WebGL-平移变换

有下述4种方法

方法一

重新定义三角形单个顶点的坐标，这也就是说数学计算任务由人完成。

var data=new Float32Array([
    0.0, 0.0, 1.0,//三角形顶点1坐标
    0.0, 1.0, 0.0,//三角形顶点2坐标
    1.0, 0.0, 0.0//三角形顶点3坐标
]);

三个顶点的x坐标分别减少0.4，也就实现了整个三角形沿着x轴平移-0.4的效果。

var data=new Float32Array([
    -0.4, 0.0, 1.0,//三角形顶点1坐标
    -0.4, 1.0, 0.0,//三角形顶点2坐标
     0.6, 0.0, 0.0//三角形顶点3坐标
]);

方法二

使用for循环便利data数组，让其中的x轴数据依次-0.4。达成目的。

方法三

使用以下代码将原gl_Position =vec4(apos.x,apos.y,apos.z,1)替换掉，着色器语言在GPU上执行，也就是说把顶点平移的任务交给GPU计算

// 在顶点着色器中逐顶点沿着x轴平移-0.4
gl_Position =vec4(apos.x-0.4,apos.y,apos.z,1);

这句代码涉及到着色器语言知识，apos变量是vec4定义的数据类型，vec4是由四个元素组成的列向量数据结构，可以用点运算符号.访问，四个分量的名字分别是x、y、z、w,比如apos.x表示顶点坐标的x分量。

声明数据类型时，vec4和C语言中的int、float用法一样，除此外vec4也可以当做构造函数来使用，在vec4()括号里面添加四个参数即可，就像平时调用函数一样，把vec4当做函数名

方法四：矩阵运算

使用矩阵的乘法运算进行三维模型的平移、缩放、旋转、剪切等几何变换，是学习计算机图形必须掌握的内容，用到的数学知识主要是线性代数。如果你的线性代数基础不好，也没有关系，这也正是本课程存在的原因，在下面会通过一个简单的展示让你理解平移矩阵。

在原来的顶点着色器代码中，声明一个4x4矩阵m4,然后通过矩阵和表示顶点坐标的列向量相乘m4*apos,实现对顶点apos的平移变换，和方法三一样把数学计算任务交给GPU处理器，具体说是顶点着色器单元(Vertex Processor)，顶点着色器单元能够完成矩阵的乘法运算。

//attribute声明vec4类型变量apos
attribute vec4 apos;
void main() {
  //创建平移矩阵(沿x轴平移-0.4)
  //1   0   0  -0.4
  //0   1   0    0
  //0   0   1    0
  //0   0   0    1
  mat4 m4 = mat4(1,0,0,0,  0,1,0,0,  0,0,1,0,  -0.4,0,0,1);
  //平移矩阵m4左乘顶点坐标(vec4类型数据可以理解为线性代数中的nx1矩阵，即列向量)
  // 逐顶点进行矩阵变换
  gl_Position = m4*apos;
}

mat4关键字和vec4关键字一样用来声明WebGL着色器变量的数据类型，和vec4一样也具有构造数据的功能。

vec4是4x1矩阵,就是列向量，有四个元素，mat4表示4x4矩阵，mat4()函数括号中的16个数据，每四个为一组，以列为准，前四个数就是mat4矩阵的第一列，后面的按顺序依次排列。

//创建平移矩阵(沿x轴平移-0.4)
//1   0   0  	 Tx			x				x+Tx
//0   1   0    Ty  *  y			= y+Ty
//0   0   1    Tz			z				z+Tz
//0   0   0    1			1					1

1、上面计算式的巧妙之处就是把三维坐标，增加一个元素1.0，用4x1矩阵表示，nx1矩阵也称为列向量，对应的数据类型就是vec4

2、n维向量增加一个维度用n+1维向量表示就是齐次坐标。

3、上面的4x4矩阵，就是平移矩阵，平移矩阵左乘顶点的齐次坐标，结果仍然是一个齐次坐标，也就是平移后的坐标。

4、矩阵的乘法满足结合律，如果多次平移，可以把所有的平移矩阵先进行乘法运算，然后左乘要平移顶点的齐次坐标。