I asked Patrick Cozzi if he knew of any WebGL editors working in the browser. There turn out to be quite a few, each with their own focus:
- http://webglplayground.net/ – on the left is the code, on the right is the result. See the gallery for more examples, which tend towards 2D and artistic examples.
- http://glsl.heroku.com/ – code actually overlays the display itself. Here is a more 3D example.
- http://spidergl.org/meshade/index.html – more elaborate, shows separate shaders, model loading, and JSON and HTML generated. To run, click “Load” to load the given model, which you can interact with.
- http://www.shadertoy.com – allows playing with the pixel shader, essentially. Mostly about image deformations, often encountered in old Demo Scene programs.
- http://www.kickjs.org/example/shader_editor/shader_editor.html – for playing with a 3D object and trying out experiments with the vertex and pixel shaders in the GPU.
- http://cesium.agi.com/Cesium/Apps/Sandcastle/index.html – give it time to load (hey, it’s loading the whole world). It shows a quite elaborate development environment. They are using CodeMirror to do the in-browser editor. See their other demos here.
- http://jsfiddle.net/ – a more general tool for trying out JavaScript programs, not WebGL per se.
Enjoy! And let us know of any others you find.
Note: we’ve added a resource page for WebGL-related information.
Over 4 years on, the landscape has changed considerably. Maybe time for an updated article? Perhaps the best known WebGL Editor today is PlayCanvas – https://playcanvas.com – which is built on an open source engine – https://github.com/playcanvas/engine A few others have sprung up too like WebGLStudio. Things certainly have advanced a long way since 2012!
I’ve heard of PlayCanvas, I’ve seen the website before. It was already included on our WebGL resources page, http://www.realtimerendering.com/webgl.html, which I should add a link to from this blog entry. Done! I hadn’t heard of WebGLStudio; thanks, and added.
Best of luck with your product PlayCanvas.