title: WebGL - is there an alternative to embedding shaders in HTML?
body: <p>The popular way of using GLSL shaders in WebGL seems to be to embed them in the main html file. 
  The vertex and fragments shaders are embedded in tags like:</p>
  
  <pre><code>&lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
  </code></pre>
  
  <p>This is the same convention I see in the WebGL samples in the Mozilla Developer Network page. </p>
  
  <p>This works fine for simple apps, but when you have a complex app with a number of shaders, the html file gets cluttered. (I keep editing the wrong shader!) Also if you want to reuse your shaders, this scheme is inconvenient.</p>
  
  <p>So I was thinking about putting these shaders in a separate XML files and loading them using XMLHttpRequest(). Then I saw that someone else had the same idea:</p>
  
  <p><a href="http://webreflection.blogspot.com/2010/09/fragment-and-vertex-shaders-my-way-to.html" rel="noreferrer">http://webreflection.blogspot.com/2010/09/fragment-and-vertex-shaders-my-way-to.html</a></p>
  
  <p>I like the suggestion to use .c files, since that gives you syntax highlighting and other editor conveniences for GLSL. </p>
  
  <p>But the issue with the above approach is that (as far as I understand) XMLHttpRequest() cannot load a local .c file - ie, on the client side - while you are developing and testing the WebGL app. But it is cumbersome to keep uploading it to the server during this process. </p>
  
  <p>So if I want to keep the shaders out of the html file, is the only option to embed them as strings in the code? But that would make it hard to write as well as debug...</p>
  
  <p>I'd appreciate any suggestions on managing multiple GLSL shaders in WebGL apps. </p>
  
  <p>Regards</p>
  
  <p><strong>Edit (May 05 2011)</strong></p>
  
  <p>Since I use a Mac for development, I decided to enable Apache server, and put my webgl code under <a href="http://localhost/~username/" rel="noreferrer">http://localhost/~username/</a>. This sidesteps the issue of file: protocol being disabled during development. Now the javascript file loading code works locally since http: is used, rather than file:. Just thought I'd put this up here in case anyone finds it useful.</p>