pass shaders through a preprocessing step

it does a few things:

- adds a prelude (which defines precision and the default uniforms
    availlable)
- supports `//#include`ing other files

glsl/defaultFiles.js

@@ -1,21 +1,11 @@
files.current = "default.frag";
files.builtin = {
  "colors.frag": `precision highp float;
uniform vec2 iResolution;
uniform float blue; //#slider[0.0,0.0,1.0]
  "colors.frag": `uniform float blue; //#slider[0.0,0.0,1.0]
void main() {
  gl_FragColor = vec4(gl_FragCoord.xy / iResolution, blue, 1.0);
}`,
  "default.frag": `precision highp float;
uniform float iGlobalTime;
uniform vec2 iResolution;
uniform vec3 iMouse;
const int MaximumRaySteps = 150;
  "default.frag": `const int MaximumRaySteps = 150;
const float MinimumDistance = 0.0001;
float DistanceEstimator(vec3 pos);

glsl/files.js

@@ -66,14 +66,18 @@ files.exists = function(name) {
  return name in files.builtin || (files.prefix + name) in localStorage;
}
files.open = function(name) {
  files.current = name;
  document.title = files.makeName(name);
files.get = function(name) {
  if (name in files.builtin) {
    files.currentFile = {"name": name, "content": files.builtin[name], "readonly": true};
    return {"name": name, "content": files.builtin[name], "readonly": true};
  } else {
    files.currentFile = {"name": name, "content": localStorage[files.prefix + name], "readonly": false};
    return {"name": name, "content": localStorage[files.prefix + name], "readonly": false};
  }
}
files.open = function(name) {
  files.current = name;
  document.title = files.makeName(name);
  files.currentFile = files.get(name);
  return files.currentFile;
}

glsl/raymarching.html

@@ -11,6 +11,7 @@
    <script src="sliders.js"></script>
    <script src="files.js"></script>
    <script src="defaultFiles.js"></script>
    <script src="transformShader.js"></script>
    <script src="raymarching.js"></script>
  </body>
</html>

glsl/raymarching.js

@@ -124,7 +124,7 @@ void main() {
    var options = options || {};
    var tt = {};
    tt.canvas = canvas;
    tt.fragmentShaderSrc = fragmentShaderSrc;
    tt.fragmentShaderSrc = transformShader(fragmentShaderSrc);
    
    tt.w = canvas.width = window.innerWidth;
    tt.h = canvas.height = window.innerHeight;

glsl/transformShader.js

@@ -0,0 +1,28 @@
var prelude = `precision highp float;
uniform float iGlobalTime;
uniform vec2 iResolution;
uniform vec3 iMouse;
`;
function transformShader(shader) {
  var lines = shader.split("\n");
  lines = lines.map(function(line) {
    var match = line.match(/\/\/#include "(.*)"/);
    if (match) {
      var file = files.get(match[1]);
      if (!file.content) {
        throw new Error(`No such file: '${match[1]}'`);
      }
      return `//#includestart "${match[1]}" (start)
${file.content}
//#includeend "${match[1]}"
`
    } else {
      return line;
    }
  });
  
  return prelude + lines.join("\n");
}