MENU


Statements and Built-ins

Statements, Built-in Functions and the Preprocessor

GLSL's statements are C's, and its standard library is built into the GPU. Many built-ins are easiest to grasp as pictures, so the helper gains GLH.paint(), which fills a canvas with a fragment shader and passes it vUV, running from 0 to 1 across the canvas:

webgl-helper.js, third part: painting a canvas with a fragment shaderJavaScript
// Section 3.3: fill a canvas with one fragment shader; vUV runs from 0 to 1 across it
GLH.paint = function (canvas, fsSource, uniforms = {}) {
  const gl = canvas.getContext('webgl2');
  const program = GLH.program(gl, `#version 300 es
    out vec2 vUV;                  // one oversized triangle covers the whole canvas
    void main() { vUV = vec2(gl_VertexID & 1, gl_VertexID >> 1) * 2.0;
                  gl_Position = vec4(vUV * 2.0 - 1.0, 0.0, 1.0); }`, fsSource);
  gl.useProgram(program);
  for (const [name, value] of Object.entries(uniforms)) {     // 1 to 4 floats each
    const v = [].concat(value);
    gl[`uniform${v.length}fv`](gl.getUniformLocation(program, name), v);
  }
  gl.drawArrays(gl.TRIANGLES, 0, 3);
  return gl;
};

Subsections