美文网首页
webgl 矩阵变换(一)

webgl 矩阵变换(一)

作者: Viewwei | 来源:发表于2021-05-12 13:32 被阅读0次

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

平移

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


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>

相关文章

网友评论

      本文标题:webgl 矩阵变换(一)

      本文链接:https://www.haomeiwen.com/subject/ldradltx.html