美文网首页
webgl 16.看旋转的三角形

webgl 16.看旋转的三角形

作者: lesliefang | 来源:发表于2017-08-31 09:57 被阅读33次

    上节中我们从一个位置观察了三角形,现在我们来看一下从一个位置观察旋转的三角形。要旋转三角形我们需要计算一个 rotation matrix, 要看一个三角形我们需要计算一个 view matrix 。那我们是先看还是先旋转呢? 既然是看一个旋转的三角形这里是先旋转再看。

    view rotated triangles.png
    <script id="vertex-shader" type="glsl">
        attribute vec4 a_Position;
        attribute vec4 a_Color;
        uniform mat4 u_viewMatrix;
        uniform mat4 u_modelMatrix;
        varying vec4 v_Color;
    
        void main() {
            gl_Position = u_viewMatrix * u_modelMatrix * a_Position;
            v_Color = a_Color;
        }
    </script>
    
    <script id="fragment-shader" type="glsl">
        precision mediump float;
        varying vec4 v_Color;
        void main() {
           gl_FragColor = v_Color;
        }
    </script>
    

    先旋转 <rotated vertex coordinates> = <rotation matrix> * <origin>
    再看 <view rotated vertex coordinates> = <view matrix> * <rotated vertex coordinates> = <view matrix> * (<rotation matrix> * <origin>) = <view matrix> * <rotation matrix> * <origin>

    先旋转再看和先看再旋转是不一样的,因为矩阵乘法不满足交换律
    var viewMatrix = new Matrix4();
    viewMatrix.setLookAt(0.2, 0.25, 0.25, 0, 0, 0, 0, 1, 0);
    
    var modelMatrix = new Matrix4();
    modelMatrix.setRotate(-10, 0, 0, 1);
    
    var u_viewMatrix = gl.getUniformLocation(gl.program, 'u_viewMatrix');
    gl.uniformMatrix4fv(u_viewMatrix, false, viewMatrix.elements);
    
    var u_modelMatrix = gl.getUniformLocation(gl.program, 'u_modelMatrix');
    gl.uniformMatrix4fv(u_modelMatrix, false, modelMatrix.elements);
    

    我们把 model matrix 和 view matrix 分开传入了 shader 中,这里可以优化一下,没必要分开传可以先计算出 <view matrix> * <model matrix> 再传进去。
    model matrix 和 view matrix 合在一起称为 ModelView Matrix, 加上马上要学到的 projection matrix (投影矩阵) 统称为 ModelViewProjection Matrix ,简称 MVP。

    var modelViewMatrix = new Matrix4();
    // <view matrix> * <model matrix>
    modelViewMatrix.setLookAt(0.2, 0.25, 0.25, 0, 0, 0, 0, 1, 0);
    modelViewMatrix.rotate(-10, 0, 0, 1);
    
    理解眼睛在哪往哪看也是一种模型变换很重要

    练习:

    1. 用 ModelView Matrix 优化程序

    查看源码

    相关文章

      网友评论

          本文标题:webgl 16.看旋转的三角形

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