typeshaders

Easy WebGL shader playground in Typescript with WEbGL 1.0 support.

State of the project

This project is still in early stages, and there will be major changes and added examples in the future.

Roadmap:

• Enable Multi Texture Outputs with WebGL1.0 -> branch: "multi-texture", currently on npm as typeshaders@beta

Get started

0. Installation

npm i typeshaders

1. Create a canvas object

Make sure to add a custom id to the object. The shader will be rendered on this canvas.

<canvas id = "canvasID"/>

2. Create a new manager

Pass the custom id to the Manager.

The Manager function will handle the animation frames, as well as the Scene and its corresponding Renderer's.

const manager = new Manager("canvasID");

3. Create a new Scene

Implement the start and if desired the update method. The start function is called when the Scene is initialized, the update function is called once in each frame.

Don't override the constructor and use the start function, unless you know what you are doing.

class myScene extends Scene{

    start(){
 
    }

    update(){
    
    }
}

3.1 Create a new Shader

Each Shader requires a codestring, shadertype and an array containing the required IUniform objects. The name of the uniform object needs to be written just as in the codestring describing the shader.

new Shader(
    `
    precision mediump float;
    uniform vec4 uColor;
    void main () {
        gl_FragColor = uColor;
    }
    `,
    EShaderTypes.fragment,
    [
      {
        name: 'uColor',
        source:  [0,1,1,1],
        type: EUniformTypes.f4
      }
    ] 
)

3.2 Create a new Renderer

A scene can have several renderers, which are all pushed into the renderers array. Each Renderer consists of a fragment shader, vertex shader, geometry object and optionally a FBO (frameBufferObject). Optionally one can set the number of iterations the program will be run in each frame. In case the shader requires a feedback loop, we can set autoFeedback to true.

start(){
    this.renderers.push(
        new Renderer(
            {
                vertex: Shader,
                fragment: Shader,
                geo: Geometry,
                fbo: FBO,
                iterations: 1,
                autoFeedback: false
            }
        )   
    )
}

In most cases we only want to render on a plain 2D plane. In that case we can simply use the baseVertexShader and baseGeo which can be found inside the Manger class.

IMPORTANT: the last element of the renderers array is expected to have no FBO object attached and will automatically render to the canvas object.

3.3 Feedback loops

To create a feedback loop, we need to set autoFeedback parameter of the specific Renderer to true. Furthermore inside the fragment shader the very first sampler2D variable needs to be called feedback. Typeshaders uses a ping pong technique where each FBO object has two textures, which are alternately associated the role of the read and write texture.

A standard fragment shader which can used along the baseVertexShader looks like this:

precision mediump float;
varying vec2 vUv;
varying vec2 vL;
varying vec2 vR;
varying vec2 vT;
varying vec2 vB;

uniform sampler2D feedback;

void main() {
    gl_FragColor = texture2D(feedback,vUv) + vec4(0.002,0,0,0);
}

3.4 FBO's

Inside the Scene class we can create a FBO as following:

const fbo1 = new FBO(this.manager, true)

The second parameter enables the feedback inside the FBO.

The reason for differentiation between the two variables: autoFeedback of the Renderer class and feedback of the FBO class is as follows:

There are certain scenarios where we want to have the possibility of a feedback loop, but not make use of it in each frame. Then one would set àutoFeedback to false, feedback to true, and manually swap the FBO write and read textures. We can for example simply call FBO.output(true) to get the output of the FBO object and swap the textures.

We can then pass this FBO to a Renderer:

new Renderer(
    {
        vertex: Shader,
        fragment: Shader,
        geo: Geometry,
        fbo: fbo1,
        iterations: 1,
        autoFeedback: true
    }
)   

And use the output of the FBO as a uniform for a fragment shader:

new Shader(
    `
    precision mediump float;
    varying vec2 vUv;
    varying vec2 vL;
    varying vec2 vR;
    varying vec2 vT;
    varying vec2 vB;
    
    uniform sampler2D feedback;
    uniform sampler2D fbo1;

    void main () {
        gl_FragColor = texture2D(feedback,vUv) + texture2D(fbo1,vUv);
    }
    `,
    EShaderTypes.fragment,
    [
      {
        name: 'fbo1',
        source: () => fbo1.output(),
        type: EUniformTypes.tex
      }
    ] 
)