WebGL - 简单的移动旋转变换

1、平移

例如将一个顶点(x0, y0, z0 )进行平移到(0.5, 0.5, 0.5)的话，就只需要整个顶点的三个方向同时加上另外一个顶点；

最终位置 = (x0 + 0.5, y0 + 0.5, z0 + 0.5)

所以如果将一个三角形进行平移的话，就需要逐个顶点进行操作，加上一个平移的值；

只需要在顶点着色器中为顶点坐标的每个分量加上一个常量就可以平移的操作；

1. 具体着色器代码

// 顶点着色器
attribute vec4 a_Position;
uniform vec4 u_Translation;
void main(){
   // 将相加后的值赋值 
   gl_Position= a_Position + u_Translation;
}

2. 获取变量位置并赋值

// 设置平移距离
var tx = 0.5, ty = 0.5, tz = 0.5;

// 获取存储位置
var u_Translation = gl.getUniformLocation(gl.program, 'u_Translation');

// 传递数据
gl.uniform4f(u_Translation, tx, ty, tz, 0.0);

上面传递给uniform变量的最后一值是0.0，因为这个变量要与a_Position相加而a_Position中的第四个值是1.0，二者相加后的结果赋值给gl_Position并且gl_Position的第四个分量也需要时1.0所以u_Translation的第四个分量时0.0;

最后当调用gl.drawArrays(gl.TRANGLES, 0, n)时，执行顶点着色器的时候都会进行以下操作

• 将顶点坐标传递给a_Position；
• 向a_Position加上u_Translation；
• 结果赋值给gl_Position；

2、旋转

旋转和平移比起来时比较复杂的，因为旋转需要以下条件

• 旋转轴 – 图形将围绕旋转轴旋转
• 旋转方向 – 顺时针还是逆时针
• 旋转角度 – 图形旋转经过的角度

在 webgl中，默认角度为正的时候时逆时针旋转

如图是绕 z轴的正旋转

利用三角函数可以计算点的旋转后的位置；

具体旋转的实现此处不再赘述，详细请移步《webgl编程指南》这本书；

而且使用一般的数学计算旋转式比较繁琐的，并且也不适用于很复杂的旋转和转换操作；

3、变换矩阵

变换矩阵式计算机图形学常用的工具，它代替基础的数学计算来实现点与点之间的转换操作；

矩阵和矢量相乘

矩阵和矢量相乘得到变换后的坐标值，只有在矩阵的列数和矢量的行数相等时才可以将两者相乘，上面中间这种矩阵就称为 变换矩阵;

<新坐标> = <变换矩阵> * <旧坐标>

不管是平移、旋转还是缩放都可以使用矩阵和矢量的运算来完成；

着色器代码

attribute vec4 a_Position;

// 声明变换矩阵
uniform mat4 u_xformMatrix;
void main(){
    // 新坐标 = 变换矩阵 * 旧坐标
    gl_Position = u_xformMatrix * a_Position;
}

具体的矩阵计算细节过程可以借助一些函数库来实现；