该例子改编自 WebGLFundamentals 的 How It Works
// Vertex Shader
attribute vec2 a_position;

uniform mat3 u_matrix;

varying lowp vec4 vColor;
// varying 声明变量是要传入到 Fragment Shader, 并且这种变量会经过插值

void main() {
  // Multiply the position by the matrix.
  gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);

  /* 假设接收到了 3 个顶点数据为:
     (0.000, 0.500, 0, 1)
     (0.760, -0.820, 0, 1)
     (-0.880, -0.660, 0, 1)
  */

  // Convert from clipspace to colorspace.
  // Clipspace goes -1.0 to +1.0
  // Colorspace goes from 0.0 to 1.0
  v_color = gl_Position * 0.5 + 0.5;

  /* 得到的和顶点相关的 v_color 分别为:
     (0.50, 0.75, 0.5, 1)
     (0.88, 0.09, 0.5, 1)
     (0.06, 0.17, 0.5, 1)
  */
}
// Fragment Shader
varying lowp vec4 vColor;
// varying 声明变量是从前面的过程(光栅化)传过来的

void main() {
  gl_FragColor = vColor;
}