上节中我们从一个位置观察了三角形，现在我们来看一下从一个位置观察旋转的三角形。要旋转三角形我们需要计算一个 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);
理解眼睛在哪往哪看也是一种模型变换很重要
练习:
- 用 ModelView Matrix 优化程序
