Textures Uniforms and Viewport

Uniform Alpha Value

Send One Number to the Shader

A WebGL draw uses one JavaScript uniform value to make the active fragment shader render a partly transparent triangle.

Program

Uniforms are small pieces of state that JavaScript sends to a shader program. This lesson keeps the program and buffer setup implicit and focuses on one alpha value.

uniform_alpha_value.html 
<canvas id="gl" width="320" height="180"></canvas>
<script>
  const gl = document.querySelector("#gl").getContext("webgl");
  const program = gl.getParameter(gl.CURRENT_PROGRAM);
  const alphaLocation = gl.getUniformLocation(program, "u_alpha");
  gl.uniform1f(alphaLocation, 0.65);
  gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
uniform location A uniform location is the handle WebGL needs before JavaScript can set a shader value.
alpha Alpha is the opacity channel in a color value.