WebGL 正交相机

Question

有人可以帮助我使用以下代码:

gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.ortho(pMatrix, 0, gl.viewportWidth, 0, gl.viewportHeight, 0.1, 100);
mat4.identity(mvMatrix);
mat4.lookAt(mvMatrix, [0, 0, -40], [0, 0, 0], [0, 1, 0]);

全源 http://jsfiddle.net/bepa/2QXkp/

我试图用正交相机显示一个立方体，但我看到的只是黑色。立方体应该在 (0, 0, 0)，相机 (0, 0, -40) 并看 (0,0,0)。

对于所有矩阵变换，我使用 gl-matrix 2.2.0。

编辑:

这工作正常:

mat4.perspective(pMatrix, 45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0);
mat4.identity(mvMatrix);
mat4.lookAt(mvMatrix, [0, 40, -40], [0, 0, 0], [0, 1, 0]);
mat4.rotate(mvMatrix, mvMatrix, degToRad(45), [0, 1, 0]);

这不起作用:

mat4.ortho(pMatrix, 0, gl.viewportWidth, 0, gl.viewportHeight, 0.1, 100);
mat4.identity(mvMatrix);
mat4.lookAt(mvMatrix, [0, 40, -40], [0, 0, 0], [0, 1, 0]);
mat4.rotate(mvMatrix, mvMatrix, degToRad(45), [0, 1, 0]);

Answer 1

 mat4.ortho(pMatrix, -1.0, 1.0, -1.0, 1.0, 0.1, 100);

给出的结果不是黑色的 ;)

mat4.ortho() 的文档:

/**
 * Generates a orthogonal projection matrix with the given bounds
 *
 * @param {mat4} out mat4 frustum matrix will be written into
 * @param {number} left Left bound of the frustum
 * @param {number} right Right bound of the frustum
 * @param {number} bottom Bottom bound of the frustum
 * @param {number} top Top bound of the frustum
 * @param {number} near Near bound of the frustum
 * @param {number} far Far bound of the frustum
 * @returns {mat4} out
 */
mat4.ortho = function (out, left, right, bottom, top, near, far) {

正射投影不需要 Canvas 的宽度和高度。但我对投影矩阵不够熟悉，无法深入解释原因。