opengl-template

This template is for setting up a canvas with WebGL2. It uses React to setup the template, and we can pass some webgl config.

Typical usage:

hookupCanvas(div, {
    pixelRatio: 2,
    onRefresh(gl) {
        //  do some WEBGL drawing
    },
    webglAttributes,
    initialProgram,
    programs,
}, controller);

• initialProgram is an id that indicates the first program to use. If ommitted, by default, it's just the first one.
• programs is an array of shader programs with the following structure:

        programs: [
          {
              id: "sample-multicolor",
              vertex: VERTEX_SHADER_CODE,
              fragment: FRAGMENT_SHADER_CODE,
          },
        ],

controller is an empty object {}, which will get filled with some methods:

• setActive: just activate / deactivate the canvas. Note that it also deletes all the canvas's programs.
• setActiveProgram: Here pass the program id. This switches between the program.
• setRefresh: Pass a callback refresh(gl) where you can do all your WebGL drawing. Return the cleanup function in that callback.
• getUniformLocation: Get the location of a uniform. Pass the name first, then the programId (uses the active program if omitted)
• getAttributeLocation: Get the location of an attribute. Pass the name first, then the programId (uses the active program if omitted)

Once we're done with setting up the config, the code in "onRefresh" can be used to render some WebGL graphics. onRefresh is called by the React component when it detects that it needs to refresh (canvas size changed, program changed, ...), but typically it'll also be used externally in a loop to render any animated graphics.

Demo

In the demo, we setup some WebGL to draw a triangle, and we have 3 WebGL programs loaded.