webgl 矩阵变换(一)

矩阵的变化主要是三种变化，平移，旋转，缩放

平移

平移表示一个位置移动到另外一个位置

image.png

已知定点p(x,y,z) 在xyz三个方向上将点移动到p'(x',y',z').如果是个图形，并非只有一个顶点，而是三个或者更多，那么所以的顶点都按照相同的原理进行平移

image.png
在实际代码中，我们要有一个向量的概念。

比如 (x,y,z) ，我们既可以说它是一个顶点位置，也可以说它是一个向量。

至于 (x,y,z) 到底是什么，要看我们拿它做什么。

比如，把点p(x,y,z) 作为点位时，那它就是点p(x,y,z)

我们把p 的移动距离tx、ty、tz 封装成一个对象pt(tx,ty,tz)，那么pt 就是一个向量，一个为点p 指明移动方向和距离的向量。

因此：点p 的移动结果 p' 就可以这么写：

p'=p+pt

由上可知，顶点的位移就是向量的加法。
在GLSL ES语言中，向量是支持相加的

attribute vec4 a_Position;
vec4 translation=vec4(0,0.2,0,0);
void main(){
    gl_Position = a_Position+translation;
}

旋转

物体的旋转是分正负之分的。在webgl一般使用右手坐标系。

image.png

• 物体绕着z轴旋转
  从x轴正半轴向y正轴逆向旋转的是正向旋转
• 物体绕着x轴旋转
  从y正半轴向z正半轴逆向旋转时，是正向旋转
• 物体绕y轴
  从z正半轴向x正半轴逆向旋转为正向旋转
• 旋转公式

bx=ax*cosβ-ay*sinβ
by=ay*cosβ+ax*sinβ

• GLSL ES中如下

<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    float angle=radians(80.0);
    float sinB=sin(angle);
    float cosB=cos(angle);
    void main(){
        gl_Position.x=a_Position.x*cosB-a_Position.y*sinB;
        gl_Position.y=a_Position.y*cosB+a_Position.x*sinB;
        gl_Position.z=a_Position.z;
        gl_Position.w=1.0;
    }
</script>

缩放

缩放可以理解为对向量的长度改变，或者对向量的同步缩放

• 着色器中如下·

<script id="vertexShader" type="x-shader/x-vertex">
attribute vec4 a_Position;
float scale=1.2;
void main(){
    gl_Position.x= a_Position.x*scale;
    gl_Position.y= a_Position.y*scale;
    gl_Position.z= a_Position.z*scale;
    gl_Position.w=1.0;
}
</script>