import { CreateProgram } from "https://deno.land/x/shader_canvas@v1.1.1/core/webgl_programs/create_program.ts";
The CreateProgram class is intended to be used to create custom tags for the children of the WebGLPrograms container.
Every Shader Canvas program is an instance of this class. It provides methods to load, compile, link and validate a WebGL Program. It also has a couple of helper methods to deal with Program variables.
This class extends "CanHaveModules" because modules can be set inside it to extend the contents it has (like add variables or provide functionality that is common to other programs).
Properties
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.
Methods
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.
Static Properties
<{{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.