{"id":3223,"date":"2012-08-15T08:53:20","date_gmt":"2012-08-15T14:53:20","guid":{"rendered":"http:\/\/www.realtimerendering.com\/blog\/?p=3223"},"modified":"2016-11-14T08:05:09","modified_gmt":"2016-11-14T14:05:09","slug":"webgl-browser-editors","status":"publish","type":"post","link":"https:\/\/www.realtimerendering.com\/blog\/webgl-browser-editors\/","title":{"rendered":"WebGL Browser Editors"},"content":{"rendered":"<p>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:<\/p>\n<ul>\n<li dir=\"ltr\"><a href=\"http:\/\/webglplayground.net\/\">http:\/\/webglplayground.net\/<\/a> &#8211; on the left is the code, on the right is the result. See <a href=\"http:\/\/webglplayground.net\/gallery\">the gallery<\/a>\u00a0for more examples, which tend towards 2D and artistic examples.<\/li>\n<li dir=\"ltr\"><a href=\"http:\/\/glsl.heroku.com\/\">http:\/\/glsl.heroku.com\/<\/a> &#8211; code actually overlays the display itself. <a href=\"http:\/\/glsl.heroku.com\/e#3910.1\">Here is a more 3D example<\/a>.<\/li>\n<li dir=\"ltr\"><a href=\"http:\/\/spidergl.org\/meshade\/index.html\">http:\/\/spidergl.org\/meshade\/index.html<\/a> &#8211; more elaborate, shows separate shaders, model loading, and JSON and HTML generated. To run, click \u201cLoad\u201d to load the given model, which you can interact with.<\/li>\n<li dir=\"ltr\"><a href=\"http:\/\/www.shadertoy.com\">http:\/\/www.shadertoy.com<\/a>\u00a0&#8211; allows playing with the pixel shader, essentially. Mostly about image deformations, often encountered in old Demo Scene programs.<\/li>\n<li dir=\"ltr\"><a href=\"http:\/\/www.kickjs.org\/example\/shader_editor\/shader_editor.html\">http:\/\/www.kickjs.org\/example\/shader_editor\/shader_editor.html<\/a> \u2013 for playing with a 3D object and trying out experiments with the vertex and pixel shaders in the GPU.<\/li>\n<li dir=\"ltr\"><a href=\"http:\/\/cesium.agi.com\/Cesium\/Apps\/Sandcastle\/index.html\">http:\/\/cesium.agi.com\/Cesium\/Apps\/Sandcastle\/index.html<\/a> &#8211; give it time to load (hey, it&#8217;s loading the whole world). It shows a quite elaborate development environment.\u00a0They are using <a href=\"http:\/\/codemirror.net\/\">CodeMirror<\/a> to do the in-browser editor. See their other demos <a href=\"http:\/\/cesium.agi.com\/demos.html\">here<\/a>.<\/li>\n<li dir=\"ltr\"><a href=\"http:\/\/jsfiddle.net\/\">http:\/\/jsfiddle.net\/<\/a> &#8211; a more general tool for trying out JavaScript programs, not WebGL per se.<\/li>\n<\/ul>\n<p>Enjoy! And let us know of any others you find.<\/p>\n<p>Note: we&#8217;ve added <a href=\"http:\/\/www.realtimerendering.com\/webgl.html\">a resource page for WebGL-related information<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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\/ &#8211; on the left is the code, on the right is the result. See the gallery\u00a0for more examples, which tend towards 2D and artistic examples. http:\/\/glsl.heroku.com\/ [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[546,519,523],"class_list":["post-3223","post","type-post","status-publish","format-standard","hentry","category-resources","tag-editors","tag-javascript","tag-webgl"],"_links":{"self":[{"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/posts\/3223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/comments?post=3223"}],"version-history":[{"count":6,"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/posts\/3223\/revisions"}],"predecessor-version":[{"id":4470,"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/posts\/3223\/revisions\/4470"}],"wp:attachment":[{"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/media?parent=3223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/categories?post=3223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/tags?post=3223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}