standalone-shader

A native webgl wrapper for 2D shaders.

Similar to gl-shader but with a smaller scope and naive approach. This uses the "big triangle" approach instead of a quad. This is an ES6 library.

⚠️ experimental package made for learning purposes

Installation 📦

npm i ayamflow/standalone-shader -S

Usage 📖

createShader(options)

options {} can contain the following parameters:

• canvas CanvasHTMLElement
• settings {} passed to the context
• uniforms {}
• vertexShader (string)
• fragmentShader (string)
• clearColor ([r, g, b, a] array)

All parameters are optional. time and resolution uniforms are automatically passed to the shader.

Uniform examples:

    time: {
        type: 'float',
        value: 0
    },
    resolution: {
        type: 'vec2',
        value: [480, 320]
    },
    map: {
        type: 'sampler2D',
        value: new Image(),
        wrapS: 'mirror', // defaults to 'clamp'
        wrapT: 'repeat', // defaults to 'clamp'
        filter: 'nearest' // defaults to 'linear'
    }

shader.start

Starts the rendering loop.

shader.stop

Stops the rendering loop.

shader.resize(width, height)

Resize the canvas and update the resolution uniform.

shader.onTick(time)

Called at every frame of the loop. Override to define your custom behavior.

shader.destroy

Unbinds gl variables and remove the canvas from the DOM.

Example 💾

    import createShader from 'standalone-shader'

    let img = new Image()
    img.src = './texture.jpg'

    let shader = createShader({
        dpr: window.devicePixelRatio || 1,
        canvas: document.querySelector('canvas'),
        uniforms: {
            map: {
                type: 'sampler2D',
                value: img,
                wrapS: 'clamp',
                filter: 'nearest'
            }
        },
        fragmentShader: `
            precision highp float;

            uniform vec2 resolution;
            uniform float time;
            uniform sampler2D map;
            varying vec2 vUv;

            void main() {
                vec2 st = gl_FragCoord.xy / resolution.xy;
                st.x *= resolution.x / resolution.y;

                gl_FragColor = texture2D(map, st);
            }
        `
    })
    shader.resize(600, 400)
    shader.start()

    shader.onTick = function(time) {
        // change some uniform value
    }

    // or you could resize following browser events
    window.addEventListener('resize', function() {
        shader.resize(innerWidth, innerHeight)
    })

Demo.

TODO

• mipmap filters
• uniform type detection
• better error log
• renderer options (alpha, ...)
• extensions (derivatives, ...)
• context lost/restore
• ...

License 📝

MIT. See LICENSE for details.