Internals of nodes

This page describes how nodes are created so that you can understand what goes on internally or to create new nodes yourself using GLSL. Given that Hology's Typescript shaders already has support for all GLSL features, you normally don't need to create your own nodes like this.

Structure of a node implementation

The class name (NODE_NAME) can be anything you want and the parent class (BASE_TYPE) is usually one of the built in types like FloatNode, Vec3Node, etc.

export class NODE_NAME extends BASE_TYPE {
  // Other nodes can be passed into the constructor.
  constructor(private diffuseColor: RgbNode) {
    super();
  }
  public compile(c: Compiler) {
    // Generate an incrementing number to use in variables. It helps with creating unique variables and makes it easier to debug generated code. 
    const k = c.variable() 
    // Extract the output of an input. This can now be inserted in the GLSL code below. 
    const diffuseColor: string = c.get(this.diffuseColor)
    
    return {
        // Code that exist outside the main function such as uniforms, structs and functions. This is optional.
       pars: `

       `,
       // Code that exist inside the main function. This is optional as the `out` can contain an expression. 
       // However, to avoid reevaluating the expression every time, assign it to a variable here and just refer to the variable in `out`. 
       chunk: `
          vec3 color_${k} = ${diffuseColor};
       `,
       // `out` should be a GLSL expression, which usually is one variable defined in the `chunk` above.
       out: `color_${k}`
    }
  }
}