Composing shaders

I haven't found a good way to do modular GLSL shaders, so here's some blather on that subject.

Shaders themselves are strings of source code, compiled to a binary by the OpenGL drivers. A shader has a void main() that is called to execute the shader. There are also global definitions in the form of attributes, varyings and uniforms. And a precision qualifier like precision highp float;, and C preprocessor macros.

A shader also has a type, it can either be a vertex shader or a fragment shader (or a geometry shader). The difference between the two is that a vertex shader determines what areas to consider for modification, whereas a fragment shader determines the output value for each element in the modified areas. Imagine you're drawing a filled circle: the vertex shader would output the bounding box of the circle and the fragment shader would test each element in the bbox to see if it lies inside the circle, setting them to the fill color if they do.

But back to the composing part. If you have some common helper functions that you'd like to use in your different shaders (e.g. defaultTransform(), blend functions), how do you reuse them? I tried to link different shader objects together but it didn't work for whatever the reason. So now I'm just concatenating strings.

ShaderSource = Klass({
  initialize: function(type, source) {
    this.type = type;
    this.text = toArray(arguments).slice(1).map(function(s) {
      return s.text ? s.text : s;
    }).join("\n");
  }
});

Maybe you want to further split your shaders into functional segments and turn those segments on and off for different uses. One way is to put some #ifdefs in the shader and prepend a block of #defines to your source.

ShaderSource = Klass({
  initialize: function(type, source) {
    this.type = type;
    this.text = this.origText = toArray(arguments).slice(1).map(function(s) {
      return s.text ? s.text : s;
    }).join("\n");
  },

  setDefines : function(defines) {
    this.defines = defines;
    var defs = [];
    for (var i in defines) {
      defs.push("#define "+i+" "+defines[i]);
    }
    defs.push(this.origText);
    this.text = defs.join("\n");
  }
});

Another way would be to affix an identifier to the source strings and only use a string if it's enabled. This is like writing a feature-poor preprocessor by yourself.

ShaderSource = Klass({
  initialize: function(type, source) {
    this.type = type;
    this.segments = toArray(arguments).slice(1);
    this.text = this.segments.map(function(s) {
      return s.text ? s.text : s;
    }).join("\n");
  },

  setEnabled : function(enabled) {
    this.enabled = enabled;
    this.text = this.segments.map(function(s) {
      if (!s.id || enabled[s.id])
        return s.text ? s.text : s;
      else
        return "";
    }).join("\n");  
  },

  setDisabled : function(disabled) {
    this.disabled = disabled;
    this.text = this.segments.map(function(s) {
      if (!s.id || !disabled[s.id])
        return s.text ? s.text : s;
      else
        return "";
    }).join("\n");  
  }
});

Or some mix of the above. I don't really know what's the super-best way to do this.