DJ's WebGL Tutorial 005--3D渲染与所需矩阵变换

在前面几节，我们省略了顶点的矩阵变换，直接使用的屏幕空间坐标进行渲染。

本节中，我们将开始进入3D世界，渲染一个旋转的3D立方体。

一个3D模型要显示到屏幕上，顶点要经过以下坐标变换：

本地坐标->世界坐标

世界坐标->视图坐标

视图坐标->屏幕坐标

这就涉及到3个变换矩阵：Model，View，Projection。

由于WebGL不提供矩阵相关API，所以，我写了一个Matrix4x4类，同时还提供了所需的Vector3、Quaternion类。

在讲矩阵之前，我们先约定：

使用左手坐标系，x轴向右，y轴向上，z轴由屏幕向里。

矩阵使用列主序，是常用的行主序的转置。

Matrix Model

模型矩阵可以分解为三个矩阵：

位移：Translation

旋转：Rotation

缩放：Scaling

所以又称之为TRS矩阵。

矩阵接口：

Matrix4x4.TRS = function(vect, vecr, vecs) {
var t = Matrix4x4.Translation(vect);
var r = Matrix4x4.Rotation(vecr);
var s = Matrix4x4.Scaling(vecs);

return t.multiply(r).multiply(s);
};

Matrix View

视图矩阵描述了摄像机的位置和朝向：

Matrix4x4.LookTo = function(eye_position, to_direction, up_direction) {
var m = Matrix4x4.Identity();
var array = m.array;

var zaxis = new Vector3([-to_direction[0], -to_direction[1], -to_direction[2]]);
zaxis.normalize();

var xaxis = zaxis.multiply(new Vector3(up_direction));
xaxis.normalize();

var yaxis = xaxis.multiply(zaxis);

var xa = xaxis.array;
var ya = yaxis.array;
var za = zaxis.array;
var eye = new Vector3(eye_position);

array[0] = xa[0]; array[1] = xa[1]; array[2] = xa[2]; array[3] = -xaxis.dot(eye);
array[4] = ya[0]; array[5] = ya[1]; array[6] = ya[2]; array[7] = -yaxis.dot(eye);
array[8] = za[0]; array[9] = za[1]; array[10] = za[2]; array[11] = -zaxis.dot(eye);
array[12] = 0; array[13] = 0; array[14] = 0; array[15] = 1.0;

return m;
};

Matrix Projection

投影矩阵描述了摄像机的投影参数，

使用常用的透视投影：

Matrix4x4.Perspective = function(fov, aspect, z_near, z_far) {
var m = Matrix4x4.Identity();
var array = m.array;

var y_scale = 1 / Math.tan(Math.PI / 180 * fov / 2);
var x_scale = y_scale / aspect;

array[0] = x_scale;
array[5] = y_scale;
array[10] = (z_near + z_far) / (z_near - z_far);
array[11] = 2 * z_near * z_far / (z_near - z_far);
array[14] = -1.0;
array[15] = 0;

return m;
};

有了变换矩阵，可以开始渲染了。

1.扩展顶点buffer来创建立方体，并建立顶点索引buffer（前几节没有使用顶点索引）。

一个立方体需要12个顶点和36个顶点索引。

function create_buffer() {
var vertices = [
-0.5, 0.5, -0.5,
-0.5, -0.5, -0.5,
0.5, -0.5, -0.5,
0.5, 0.5, -0.5,

-0.5, 0.5, 0.5,
-0.5, -0.5, 0.5,
0.5, -0.5, 0.5,
0.5, 0.5, 0.5,

-0.5, 0.5, 0.5,
0.5, 0.5, 0.5,
-0.5, -0.5, 0.5,
0.5, -0.5, 0.5
];

var uvs = [
0.0, 0.0,
0.0, 1.0,
1.0, 1.0,
1.0, 0.0,

1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
0.0, 0.0,

0.0, 1.0,
1.0, 1.0,
0.0, 0.0,
1.0, 0.0
];

var indices = [
0, 1, 2,
0, 2, 3,

4, 6, 5,
4, 7, 6,

3, 2, 6,
3, 6, 7,

4, 5, 1,
4, 1, 0,

8, 0, 3,
8, 3, 9,

10, 2, 1,
10, 11, 2
];

vertex_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

uv_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, uv_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(uvs), gl.STATIC_DRAW);

index_buffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
}

2.修改vertex shader，使用mvp矩阵变换顶点：

var shader_src_vs = "\
uniform mat4 u_mat_mvp;\
attribute vec4 a_position;\
attribute vec2 a_uv;\
varying vec2 v_uv;\
void main()\
{\
vec4 pos = a_position * u_mat_mvp;\
v_uv = a_uv;\
gl_Position = pos;\
}\
";

3.开启深度测试、背面裁剪：

function init_gl() {
gl.clearColor(0.0, 0.0, 1.0, 1.0);
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);

create_shader();
create_buffer();
create_texture();
}

4.渲染：

function render() {
update_fps();

gl.clear(gl.COLOR_BUFFER_BIT);

if (texture != null) {
gl.useProgram(program);

var index_mvp = gl.getUniformLocation(program, "u_mat_mvp");
var index_pos = gl.getAttribLocation(program, "a_position");
var index_uv = gl.getAttribLocation(program, "a_uv");
var index_tex = gl.getUniformLocation(program, "u_tex");

rot += 1;
var mat_m = Matrix4x4.TRS([0, 0, 0], [45, rot, 0], [1, 1, 1]);
var mat_v = Matrix4x4.LookTo([0, 0, -3], [0, 0, 1], [0, 1, 0]);
var ratio = gl.drawingBufferWidth / gl.drawingBufferHeight;
var mat_p = Matrix4x4.Perspective(45, ratio, 0.3, 100);

var mat_mvp = mat_p.multiply(mat_v).multiply(mat_m);

gl.uniformMatrix4fv(index_mvp, false, mat_mvp.array);

gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
gl.enableVertexAttribArray(index_pos);
gl.vertexAttribPointer(index_pos, 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, uv_buffer);
gl.enableVertexAttribArray(index_uv);
gl.vertexAttribPointer(index_uv, 2, gl.FLOAT, false, 0, 0);

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.uniform1i(index_tex, 0);

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
}

window.requestAnimationFrame(render);
}

矩阵使用解析：

模型矩阵

var mat_m = Matrix4x4.TRS([0, 0, 0], [45, rot, 0], [1, 1, 1]);

立方体位于（0， 0， 0），

绕x轴旋转45度，绕y轴旋转rot度，

缩放系数为1。

视图矩阵

var mat_v = Matrix4x4.LookTo([0, 0, -3], [0, 0, 1], [0, 1, 0]);

摄像机位于（0， 0， -3），

前方向向量（0， 0， 1），即朝向z轴正方向，

上方向向量（0， 1， 0），朝向y轴正方向。

投影矩阵

var ratio = gl.drawingBufferWidth / gl.drawingBufferHeight;

var mat_p = Matrix4x4.Perspective(45, ratio, 0.3, 100);

摄像机视口张角45度，

宽高比等于屏幕宽高比，

近裁剪面z=0.3，

远裁剪面z=100。

MVP

var mat_mvp = mat_p.multiply(mat_v).multiply(mat_m);

连乘得到mvp，之后传给vertex shader。

运行结果（由于上传图片大小限制，动画帧率较低）：



代码下载