绘制点
Shader
WebGL 使用两种 Shader:
- Vertex Shader:用于描述 point 的特性。
- Fragment Shader:用于逐片处理。
Shader Program 使用的是 GLSL ES 语言,在 JS 中需要使用字符串编写,再通过函数加载进去。
WebGL 的执行流程大致为:
- Get canvas.
- Get WebGL context.
- Initialize vertex shader and fragment shader.
- Set clear color.
- Clear canvas.
- Draw.
vec4
在 GLSL ES 中,vec4类型用四维适量描述一个点的三维空间投影,(x, y, z, w)等价与三维空间的(x / w, y / w, z / w)。
WebGL 坐标系统水平向右为 x 正轴,竖直向上为 y 正轴,垂直屏幕向外为 z 正轴。范围都在[-1, 1]之间。