1.平移的概念

为了平移一个三角形，我们需要对它的每一个顶点在对应的坐标轴上移动一定的距离。假如我们将点 P(x,y,z) 平移到 P1(x1,y1,z1),在三个坐标轴上平移的距离分别是,Tx,Ty,Tz,那么用公式就可以表示为：

x1 = x + Tx
y1 = y + Ty
z1 = z + Tz

在顶点着色器中表示为：

attribute vec4 a_Position;
uniform vec4 u_Translation;
void main(){
    gl_Position = a_Position + u_Translation;
}

在js代码中传递u_Translation的代码如下所示：

const u_Translation = gl.getUniformLocation(gl.program,'u_Translation');
const Tx = 0.5;
const Ty = 0.5;
const Tz = 0.0;
gl.uniform4f(u_Translation,Tx,Ty,Tz,0.0);

具体的demo 可以参考 平移 (opens new window) 。

2.平移矩阵

可以使用以下的矩阵能来实现三角形的平移。 上面矩阵的乘法结果如下所示。

x1 = ax + by + cz + d = x + Tx
y1 = ex + fy + gz + h = y + Ty
z1 = ix + jy + kz + l = z + Tz
1  = mx + ny + oz + p

根据上面的乘法结果可以得出平移矩阵的结果。

a = 1, b = 0, c = 0, d = Tx; 
e = 0, f = 1, g = 0, h = Ty;
i = 0, j = 0, K = 1, l = Tz;
m = 0, n = 0, o = 0, p = 1;

所以可以得到平移矩阵如下所示

具体的demo 可以参考 平移-矩阵 (opens new window) 。

阅读量：

评 论：