Uniform Color Slider

A slider value is converted into a fragment shader uniform so JavaScript can recolor a WebGL draw.

Program

Uniforms are values supplied by JavaScript to shader programs. This lesson assumes the shader program from the earlier pipeline setup is already active and focuses on updating one uniform.

uniform_color_slider.html

<canvas id="gl" width="320" height="180"></canvas><input id="red" type="range" min="0" max="1" step=".1" value=".8">
<script>
  const gl = document.querySelector("#gl").getContext("webgl");
  const red = document.querySelector("#red");
  const program = gl.getParameter(gl.CURRENT_PROGRAM);
  const redLocation = gl.getUniformLocation(program, "u_red");
  red.addEventListener("input", () => {
    gl.uniform1f(redLocation, Number(red.value));
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  });
</script>

uniform A uniform supplies one value to all shader invocations in a draw call.

active program Later WebGL lessons can build on the linked program and buffers introduced in the pipeline chapters.

drawArrays drawArrays runs the active shader program over vertex data.