Skip to main content
The Deno 2 Release Candidate is here
Learn more
Module

x/shader_canvas/core/webgl_programs/webgl_programs.ts>WebGLPrograms

A rendering engine where you can write WebGL 2.0 shaders using custom tags.
HugoDaniel/shader_canvas
Latest
class WebGLPrograms
import { WebGLPrograms } from "https://deno.land/x/shader_canvas@v1.1.1/core/webgl_programs/webgl_programs.ts";

WebGLPrograms is a Web Component. It extends the ShaderCanvasContainer because any immediate children tags get their names registered as new Web Components automatically. These children act as containers for functionality (WebGL Programs in this case) that can then be referenced by the tag name being used.

WebGLPrograms is a container where each immediate child is a CreateProgram instance.

This class has no constructor, it assumes the default constructor. The logic starts at the initialize() function.

Properties

private
whenLoaded

Promise that resolves when all dependencies have registered their tag in the customElements global Web Components registry.

This is used in the async initialize() function, to ensure that its code only runs when all the tags it depends are available.

locations: ShaderLocations

Associates the variable name of the vertex attributes in this program with their gl location.

This Map is useful to allow the variables content to be set using their name (ShaderCanvas allows this, instead of the traditional flow of having to go asking WebGL for the location and then use the location to set the content)

Methods

callInitializers(unnamed 0: { gl: WebGL2RenderingContext; ctx: WebGLCanvasContext; programInitializers: Map<string, InitializerFunction>; modulesFunctions: Map<string, ModulesFunctions>; }): Promise<Map<string, ProgramRenderer>>

This function is responsible to create the customized render functions for the programs that have them.

A program can have a customized render function if the developer uses the ShaderCanvas.createProgram() API. This API sets an initializer function that can return a customized render function to be used at render time.

This function calls these initializers and returns their customized render function in a Map that relates the program name with its corresponding customized render function. It is meant to be used by the WebGLCanvas global initialization function.

initialize(unnamed 0: WebGLCanvasContext)

Initializes the WebGL Programs container.

This function starts by calling the common container creation logic, by reading its child tag names and create them as unique Web Components with a CreateProgram instance.

After all programs have been created as Web Components, they get loaded, compiled, linked and the variable locations updated.

Static Properties

tag: string

<webgl-programs> {#WebGLPrograms}

This tag is a container of a WebGL programs. Each child defines a WebGL Program. You must set a unique name for each child tag, these children can then have the valid content for a program.

The children unique tag names are used as reference in other containers and in the list of actions.

WebGL Programs consist of vertex shader code and fragment shader code. During initialization the programs listed as children of this tag get loaded, compiled, linked and their variable locations set.

The allowed children are:

Example

<shader-canvas>
  <webgl-canvas>
   <webgl-programs>
     <my-awesome-program>
       <vertex-shader>
         <code> ... </code>
       </vertex-shader>
       <fragment-shader>
         <code> ... </code>
       </fragment-shader>
     </my-awesome-program>
   </webgl-programs>
 </webgl-canvas>
</shader-canvas>

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

The <webgl-programs> tag is meant to be used as a child of the <webgl-canvas> tag.