node package manager



A JSON-based shader graph builder for WebGL.


Note: the library is still in early development -- apologies for the lack of clarity.

The general usages is as follows:

var builder = new ShaderBuilder;

var material = /* JSON object */;
var asset =;
var vs = asset.vertexShader;        // Contains the vertex shader as a string
var fs = asset.fragmentShader;      // Contains the fragment shader as a string
var params = asset.activation;      // Contains the key-pairs for setting the shader
                                    // uniforms


The basic architecture is as follows:

  1. An object is assigned a Material
  2. A Material is a shader graph along with it's assigned parameters
  3. Parameters may consist of explicit values, computed values, or context variables
  4. The graph is composed of Node objects which encapsulate a single "function" within the graph

Internally, the system (1) caches shared graphs - i.e. Materials that share the same graph and differ only by parameter, (2) supports explicitly named Materials as well as anonymous derived Materials that vary only by overrides.





Context Variables


Overrides / Overlays

Creates an anonymous Material from a named Material.


Graph Cache

Ensures equivalent graphs are reused when only the input parameters, not the underlying code, vary -- thus allowing program reuse.


Implict Conversions

As a domain-specific language, the ShaderBuilder supports implicit conversions that make sense in the context of a graphical shading language. An obvious convenience conversion would be from RGB to RGBA.

Full list of conversions TBD.


  • Other targets (GLSL, C++ ray-tracer lambdas, etc.)