Returns all valid input variables. Vertex shader outputs are removed from the Fragment shader inputs.

This function uses the GLSL variable parser helper functions (imported at the top of this module) to differentiate between input and output variables.

This function gets the and nodes from the DOM and places a reference to their class instance in the attributes "this.vertexShader" and "this.fragmentShader".

These are helper references, to avoid having to read the DOM every time that work needs to be done on their class instances.

It leaves the "vertexShader" and "fragmentShader" attributes as undefined if they don't have the correct class instance. Which can happen if their tag names have not yet been registered at the customElements at this point.

Program information log, a string that holds the result of calling gl.getProgramInfoLog(). This function is called right after the program is finished being initialized.

The program name is the name set as the tagName. This is defined by the user when declaring programs as children of the container.

The program GL id, this is used to bind the program in the WebGL state before performing the actions that relate to it.

A Map that relates the uniform variable name with its WebGL location in this program.

Uniform locations are kept per program (as opposed to the vertex attributes that are global and share their locations between programs).

Vertex Shader and Fragment Shader node classes, They hold the final shader code and are responsible for most shader GL actions, like loading and compiling the shader.

This function looks for the Sampler* variables in the fragment shader. It returns an array with all of these variables. This is useful so that the textures declared can build their draw function at initialization time, fetching the corresponding location for their variable and creating their drawing call already with this information.

This function calls gl.bindAttribLocation to set the pre-established location for any vertex attributes that this program might have.

It receives the attribLocations Map that holds the locations for all known vertex attributes at this point in time.

This function is used to try to keep the same locations at the same variable names between programs. This allows for Vertex Array Objects to be swapped easily between programs.

Compiles shaders, this calls gl.compileShader

This function creates the WebGLProgram. It calls gl.createProgram() and then attaches the shaders to it.

This is where the Program logic starts. Initializing a program consists in checking if it has any modules, read these modules payloads and merge them to the program, and then read the final shader code (vertex and fragment) and keep a reference for its string.

No compilation or shader loading is done here. There are helper methods for these actions, and they are meant to be used by the parent initialize function at a proper moment.

Avoiding doing program compilation and linking here allows the Shader Canvas to explore parallel compilation and linking by making the compile calls for all the programs at once in WebGLPrograms.

Links this WebGLProgram. Completing the process of preparing the GPU code for the program's fragment and vertex shaders.

Loads the shaders, this function creates the shaders and calls gl.shaderSource with their code.

Checks if the program was properly created and linked.

Places the info log in the "log" attribute of this class.

Deletes the program if errors are found.

This functions reads each vertex attribute location of this program and puts it in the attribute locations Map attribLocations provided as argument.

If the location already exists, it is assume that its location remains the same (this means that multiple programs must share the same locations for each vertex attribute).

The attribLocations Map is changed. This is not a pure function.

This functions updates and fills this program uniformLocations Map.

The uniformLocations Map is an association kept at each program that relates a uniform variable to its bound location.

It uses the variables parsed from the code and present at

This function only verifies if the locations were set at their intended locations.

It prints an error if a variable was not located.

It does not change the attribLocations Map.

<{{program-name}}> {#CreateProgram}

The tag name is set by you when declaring a program. Use the tag name to represent the program name. This name is then used to reference this program in other Shader Canvas containers and parts.

The allowed children of a program are:

• <vertex-shader> WebGL Vertex Shader code
• <fragment-shader> WebGL Fragment Shader code
• Any module tag defined inside the Shader Canvas <new-modules> tag

Example

<shader-canvas>
 <webgl-canvas>
   <webgl-programs>
     <!--
       Create your WebGL programs here by specifying a
       tag name that identifies them, and place inside
       it the vertex and fragment code
     -->
     <here-is-a-cool-program>
       <vertex-shader>
         <code>
           #version 300 es
           in vec4 a_position;
           void main() {
             gl_Position = a_position;
           }
         </code>
       </vertex-shader>
       <fragment-shader>
         <code>
           <!--
             Write the fragment shader code for the
             "here-is-a-cool-program" here.
           -->
         </code>
       </fragment-shader>
     </here-is-a-cool-program>
   </webgl-programs>
 </webgl-canvas>
</shader-canvas>

For a usable example check the 1st example - simple triangle

This custom named tag is meant to be used as a child of the <webgl-programs> container tag.