webgl 16.看旋转的三角形

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

view rotated triangles.png

先旋转 = *
再看 = * = * ( * ) = * *

先旋转再看和先看再旋转是不一样的，因为矩阵乘法不满足交换律

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

var modelViewMatrix = new Matrix4();
//  * 
modelViewMatrix.setLookAt(0.2, 0.25, 0.25, 0, 0, 0, 0, 1, 0);
modelViewMatrix.rotate(-10, 0, 0, 1);

理解眼睛在哪往哪看也是一种模型变换很重要

练习:

1. 用 ModelView Matrix 优化程序

查看源码