WebGL等距投影

Question

好的 - 这里有一个技术问题。我正在进行一些WebGL工作，尝试制作一个等轴立方体。我不想使用Three.js。我希望首先了解我的代码出了什么问题。我已经做了一些研究，但我找到的所有教程似乎都是关于OpenGL的。

无论如何 - 这是我的drawScene函数：

function drawScene() {

this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
mat4.perspective(45, this.gl.viewportWidth / this.gl.viewportHeight, 0.1, 100.0, pMatrix);
mvMatrix = mat4.lookAt([0,0,40], [0, 0, 0], [0, 1, 0]);

_globalNext = this._first;

    while(_globalNext) {
    _globalNext.render();
    }

}

而 render 函数是

function render() {

mvPushMatrix();

//transform. order matters.
mat4.translate(mvMatrix, [this._x, this._y, this._z]);
mat4.rotate(mvMatrix, 0.01745*this._rot, [this._axisX, this._axisY, this._axisZ]);
mat4.scale(mvMatrix,  [this._scaleX,this._scaleY,this._scaleZ]);

//bind the buffers.
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this._positionBuff);
this.gl.vertexAttribPointer(this._shader.vertexPositionAttribute, this._positionBuff.itemSize,   this.gl.FLOAT, false, 0, 0);

this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this._colorBuff);
this.gl.vertexAttribPointer(this._shader.vertexColorAttribute, this._colorBuff.itemSize, this.gl.FLOAT, false, 0, 0);

this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this._indexBuff);
this.setMatrixUniforms(this.gl);
this.gl.drawElements(this.gl.TRIANGLES, this._indexBuff.numItems, this.gl.UNSIGNED_SHORT, 0);

    if(this._usePopper == false) {
    mvPopMatrix();
    } 

_globalNext = this._nextSib;
}

相当普通。我正在使用它来绘制立方体。在OpenGL示例中，它们似乎放弃了透视函数，但是如果我将其省略，我的场景就是空白的。我知道lookAt函数正常工作，并且我必须对透视矩阵进行一些处理。感谢您的帮助。

- CodeOwl

Answer 1

投影矩阵的作用仅在于将场景的坐标系统映射到X轴和Y轴上[-1，1]范围内的空间。这是在向窗口渲染片段时使用的空间。如果您构建的场景直接渲染到该[-1, 1]空间中，则不需要投影矩阵（这可能是您提到示例中忽略它的情况，但通常并非如此）。

当使用透视矩阵作为投影矩阵时，X和Y坐标按Z值进行缩放，使它们具有深度外观。如果该效果不理想，则可以通过使用正交矩阵消除深度缩放，例如：

mat4.ortho(left, right, bottom, top, 0.1, 100.0, pMatrix);

left/right/top/bottom这些值的定义由你决定，但通常它们应该与WebGL视口的尺寸相对应。例如，如果你的WebGL窗口大小为640x480，你可以这样定义：

mat4.ortho(0, 640, 0, 480, 0.1, 100.0, pMatrix);

这将导致任何放置在坐标 (0, 0) 的顶点渲染在窗口的左下角，而放置在 (648, 480) 的顶点则渲染在右上角。这些顶点的 z 分量不会产生影响。这是一种流行的技术，可用于呈现 GUI 元素、精灵或像您正在尝试的等角图形。

希望这有所帮助！

- Toji

---

继续前进吧！我一直在调整正交投影，但我的唯一错误是zFar参数中有一个负号，所以什么也没有显示出来。我很高兴现在它可以工作了！ - CodeOwl