How to use gl-shader - 10 common examples

};

    const viewRes = [0, 0];
    const viewSize = [0, 0];

    const buffers = {
        light: FBO(gl, [1, 1]),
        // @todo
        // flash: FBO(gl, [1, 1]),
        fade: [FBO(gl, [1, 1]), FBO(gl, [1, 1])]
    };

    const shaders = {
        light: shader(gl, screenVert, lightFrag),
        fade: shader(gl, screenVert, fadeFrag),
        draw: shader(gl, screenVert, drawFrag)
    };

    const screen = new Screen(gl);


    // Parameters...

    // Configuration, setup
    const config = self.config = {
        edit: (queries.edit === 'true'),

        showTrack: (queries.showTrack === 'true'),

        interact: (parseFloat(queries.interact, 10) || 1),

        showEndVideos: (queries.showEndVideos === 'true' ||

// Respawn from geometry (platonic forms)

    const geometrySpawner = new GeometrySpawner(gl, {
        speed: 0.005,
        bias: 100/0.005
    });

    const spawnForm = (buffer = spawnTargets.spawnForm) =>
        geometrySpawner.shuffle().spawn(tendrils, undefined, buffer);


    // Media - cam and mic

    const imageShaders = {
        direct: shader(gl, spawnPixels.defaults().shader[0], pixelsFrag),
        sample: shader(gl, spawnPixels.defaults().shader[0], bestSampleFrag)
    };

    const imageSpawner = new spawnPixels.PixelSpawner(gl, { shader: null });

    mat3.scale(imageSpawner.spawnMatrix,
        mat3.identity(imageSpawner.spawnMatrix), [-1, 1]);

    const rasterShape = {
        image: [0, 0],
        video: [0, 0]
    };

    let video = null;
    let mediaStream = null;

player: new Timer(0)
    };

    const viewRes = [0, 0];
    const viewSize = [0, 0];

    const buffers = {
        light: FBO(gl, [1, 1]),
        // @todo
        // flash: FBO(gl, [1, 1]),
        fade: [FBO(gl, [1, 1]), FBO(gl, [1, 1])]
    };

    const shaders = {
        light: shader(gl, screenVert, lightFrag),
        fade: shader(gl, screenVert, fadeFrag),
        draw: shader(gl, screenVert, drawFrag)
    };

    const screen = new Screen(gl);


    // Parameters...

    // Configuration, setup
    const config = self.config = {
        edit: (queries.edit === 'true'),

        showTrack: (queries.showTrack === 'true'),

        showEndVideos: (queries.showEndVideos === 'true' ||
            queries.showTros === 'true'), // Legacy

const params = { ...base, ...options };

        this.views = params.views;
        this.alphas = params.alphas;
        this.resolution = params.resolution;

        this.screen = new Screen(gl);

        // Set up the right number of views if we're working with the default shader.
        if(params.shader === base.shader) {
            params.shader[1] = params.shader[1]
                .replace(/(@

// Targets for the particles, to allow a degree of explicit control
        this.targets = FBO(this.gl, [1, 1], { float: true });

        // Multiple bufferring
        this.buffers = [];
        this.setupBuffers(params.numBuffers);


        this.logicShader = null;

        this.renderShader = ((Array.isArray(params.renderShader))?
                shader(this.gl, ...params.renderShader)
            :   params.renderShader);

        this.flowShader = ((Array.isArray(params.flowShader))?
                shader(this.gl, ...params.flowShader)
            :   params.flowShader);

        this.copyShader = ((Array.isArray(params.copyShader))?
                shader(this.gl, ...params.copyShader)
            :   params.copyShader);

        this.fillShader = ((Array.isArray(params.fillShader))?
                shader(this.gl, ...params.fillShader)
            :   params.fillShader);


        this.uniforms = {
            render: {},
            update: {}
        };

// The dimensions of the state data FBOs. Can be 1:1 with the number of
        // particle vertices, or
        this.shape = params.shape;
        this.geomShape = (params.geomShape || [...this.shape]);


        const logic = (params.logic || [params.logicVert, params.logicFrag]);

        this.logic = ((Array.isArray(logic))? shader(gl, ...logic) : logic);


        const render = (params.render ||
                [params.renderVert, params.renderFrag]);

        this.render = ((Array.isArray(render))? shader(gl, ...render) : render);


        this.geom = geom(gl);
        this.geom.attr('uv', Particles.generateLUT(this.geomShape),
            { size: 2 });

        this.buffers = [];

        this.pixels = ndarray(new Float32Array(this.shape[0]*this.shape[1]*4),
            [this.shape[0], this.shape[1], 4]);
    }

}

        audioCache.clear();

        return soundOutput;
    };


    // Screen effects

    const screen = new Screen(gl);


    // Blur vignette

    const blurShader = shader(gl, screenVert, blurFrag);

    const blurDefaults = {
        radius: 3,
        limit: 0.5
    };

    const blurState = {
        radius: 8,
        limit: 0.2
    };

    blurShader.bind();
    Object.assign(blurShader.uniforms, blurState);


    // Background

setup( ( gl: WebGLRenderingContext ) => {
                    shader = createShader(
                        gl,
                        `
                            precision mediump float;
                            attribute vec2 position;

                            varying vec2 uv;

                            void main() {
                                uv = position.xy;
                                gl_Position = vec4( position.xy, 0.0, 1.0 );
                            }
                        `,
                        `
                            precision mediump float;
                            varying vec2 uv;
                            void main() {

function initGL (pass, multipass) {
  pass.shader = CreateShader(multipass.gl, VERTEX, FRAGMENT)
  pass.render = render.bind(null, pass, multipass)
}

export default (
  gl: WebGLRenderingContext,
  transition: TransitionObjectLike,
  options: Options = {}
) => {
  const { resizeMode } = { resizeMode: "cover", ...options };
  const shader = createShader(gl, VERT, makeFrag(transition.glsl, resizeMode));
  shader.bind();
  shader.attributes._p.pointer();

  return {
    draw(
      progress: number,
      from: GLTextureLike,
      to: GLTextureLike,
      width: number = gl.drawingBufferWidth,
      height: number = gl.drawingBufferHeight,
      params: { [key: string]: mixed } = {}
    ) {
      shader.bind();
      shader.uniforms.ratio = width / height;
      shader.uniforms.progress = progress;
      shader.uniforms.from = from.bind(0);