Alpha Blend Translucent

Blending is enabled so a translucent teal triangle combines with an opaque orange triangle beneath it.

Program

Without blending, a fragment replaces the pixel color. With alpha blending, the source color mixes with the color already in the framebuffer.

alpha_blend_translucent.html

<canvas id="stage" width="360" height="210"></canvas>
<script>
  gl.enable(gl.BLEND);
  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
  gl.drawArrays(gl.TRIANGLES, 0, 3);
  gl.drawArrays(gl.TRIANGLES, 3, 3);
</script>

alpha Alpha is commonly used as an opacity value for blending.

blend function blendFunc chooses how source and destination colors are weighted.