webgl 16.看旋转的三角形

上节中我们从一个位置观察了三角形，现在我们来看一下从一个位置观察旋转的三角形。要旋转三角形我们需要计算一个 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 优化程序

查看源码