都十几节了我们一直都在处理二维平面，Z 轴一直为 0。现在我们开始进入三维世界。进入 3D 世界我们需要解决 2 个问题，一是
viewing direction 即我们的眼睛在哪往哪看（相机），二是 visible range 即视野范围，现实世界中我们的视野是有限的，超出视野范围的物体我们是看不到的。
这节先来看一下 viewing direction
确定我们的眼睛在哪往哪看需要下面的信息来确定
Eye Point: 眼睛的位置，用 (eyeX, eyeY, eyeZ) 表示。
Look-at point: 你往物体的哪个地方看，用 (atX, atY, atZ) 表示。Eye Point 和 Look-at point 的连线就是视线的方向。
Up direction: 场景的上方向，你站着看一个物体和头朝下倒立看一个物体肯定正好是反的。
Matrix4 对象的 setLookAt 可以计算出这个变换矩阵，这个矩阵叫作 view matrix。
- Matrix4.setLookAt(eyeX, eyeY, eyeZ, atX, atY, atZ, upX, upY, upZ)
来看个例子
随着 shader 代码越来越多，拼接字符串的方式有点繁琐。我们改用例外一种方式来书写 shader 代码。把 shader 代码放到 <script> 标签中再用 DOM API 去读取。
<script id="vertex-shader" type="glsl">
attribute vec4 a_Position;
attribute vec4 a_Color;
uniform mat4 u_viewMatrix;
varying vec4 v_Color;
void main() {
gl_Position = u_viewMatrix * 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>
script 标签的 type 类型不能为 "text/javascript" ，否则会被解释为 JS
可以这样读取
var VERTEX_SHADER_SOURCE = document.getElementById('vertex-shader').text;
var FRAGMENT_SHADER_SOURCE = document.getElementById('fragment-shader').text;
var vertices = new Float32Array([
0.0, 0.5, -0.4, 0.4, 1.0, 0.4, // The back green triangle
-0.5, -0.5, -0.4, 0.4, 1.0, 0.4,
0.5, -0.5, -0.4, 1.0, 0.4, 0.4,
0.5, 0.4, -0.2, 1.0, 0.4, 0.4, // The middle yellow triangle
-0.5, 0.4, -0.2, 1.0, 1.0, 0.4,
0.0, -0.6, -0.2, 1.0, 1.0, 0.4,
0.0, 0.5, 0.0, 0.4, 0.4, 1.0, // The front blue triangle
-0.5, -0.5, 0.0, 0.4, 0.4, 1.0,
0.5, -0.5, 0.0, 1.0, 0.4, 0.4
]);
var viewMatrix = new Matrix4();
viewMatrix.setLookAt(0.2, 0.25, 0.25, 0, 0, 0, 0, 1, 0);
var u_viewMatrix = gl.getUniformLocation(gl.program, 'u_viewMatrix');
gl.uniformMatrix4fv(u_viewMatrix, false, viewMatrix.elements);
- gl_Position = u_viewMatrix * a_Position
我们用计算出来的 view matrix 乘以了 a_Position
而我们前面讲模型变换的时候是这样计算 position 的
- gl_Position = u_modelMatrix * a_Position
可以看到这个和模型的旋转、平移等计算方法是一样的，这是为什么呢？ 其实解决眼睛在哪里往哪里看和模型的旋转平移等是等价的。
看上面的图片，开始我的眼睛在原点往 Z 轴负方向看，然后眼睛沿 Z 轴正方向移动 1 个单位，眼睛和三角形的距离增加了 1 。这其实和眼睛不动，三角形向 Z 轴负方向移动 1 个单位是等价的。所以我们只需要计算出 view matrix 再对模型做变换就行了。
webgl 中眼睛默认在原点，视线是往 Z 轴负方向看，上方向是 Y 轴正方向即：
var defaultViewMatrix = new Matrix4();
defaultViewMatrix.setLookAt(0,0,0, 0,0,-1, 0,1,0);
