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();
    }

}

并且渲染功能是

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函数工作正常，我必须用透视矩阵做 something 。一点帮助将不胜感激。谢谢！

Answer 1

投影矩阵所做的全部是将场景的坐标系映射到X和Y轴上的[-1,1]范围，这是将窗体渲染到窗口时使用的空间。可以以这样的方式构造场景，使其直接渲染到[-1,1]空间，在这种情况下，不需要投影矩阵（这可能是您所指的示例，而不是它，但是通常情况并非如此。

当使用透视矩阵作为投影矩阵时，X和Y坐标将按Z值缩放，从而为它们提供深度外观。如果不希望出现这种影响，可以使用正交矩阵消除深度缩放，如下所示：

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

左/右/上/下是什么取决于您，但通常这些将与WebGL视口的尺寸在某种程度上对应。例如，如果您的WebGL窗口是640x480，则可以执行以下操作：

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

这将导致放置在（0,0）的任何顶点在窗口的左下角渲染，并且放置在（648,480）的任何顶点在右上角渲染。这些顶点的z分量无效。这是一种流行的技术，可用于渲染GUI元素，精灵或等距图形，就像您尝试的那样。

希望有所帮助！

WebGL等距投影

1 个答案: