Varying Color Gradient

A vertex shader writes vColor, and the fragment shader reads the interpolated value to fill a rectangle with a smooth corner gradient.

Program

Varyings bridge vertex and fragment shaders. The GPU interpolates each varying for every covered pixel.

varying_color_gradient.html

<canvas id="stage" width="360" height="210"></canvas>
<script>
  varying vec3 vColor;
  vColor = aColor;
  gl_FragColor = vec4(vColor, 1.0);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
</script>

varying A varying carries interpolated values from vertex shader to fragment shader.

interpolation Interpolation computes per-pixel values between primitive vertices.