WEBGL中的矩阵变换以及opengl着色语言(glsl)中常见的内置函数、变量

背景：了解webgl中顶点通过矩阵变换产生位移、缩放、旋转，以及了解opengl着色语言(glsl)中常见的内置函数和变量方便使用做出酷炫的可视化效果。

• 变换
  在三维空间里面我们用(x, y, z)表示一个顶点，其中我们会加入一个w分量，即四维向量(x, y, z, w)，w分量的存在是为了在变换中矩阵运算的需要。这些都是建立在我们有一定线代基础的情况下，毕业4年啦，都忘啦，最近恶补了一下。其中位移和缩放简单的口算都能搞定，旋转相对复杂，需要大量的推算。

1、位移

mat4(1.0, 0.0, 0.0, Tx,
     0.0, 1.0, 0.0, Ty,
     0.0, 0.0, 1.0, Tz,
     0.0, 0.0, 0.0, 1.0) * vec4(x,y,z,1) = vec4(x+Tx, y+Ty, z+Tz, 1)

2、缩放

mat4(Sx, 0.0, 0.0, 0.0,
     0.0, Sy, 0.0, 0.0,
     0.0, 0.0, Sz, 0.0,
     0.0, 0.0, 0.0, 1.0) * vec4(x,y,z,1) = vec4(Sx*x, Sy*y, Sz*z, 1)

3、旋转
旋转角度为θ

// x轴旋转
mat4(1.0, 0.0, 0.0, 0.0,
     0.0, cosθ, -sinθ, 0.0,
     0.0, sinθ, cosθ, 0.0,
     0.0, 0.0, 0.0, 1.0) * vec4(x,y,z,1