WebGL等轴测投影

好吧，这里坚果。我正在做一些WebGL，我正在尝试制作一个等距立方体。我不想使用Three.js。我想先了解我的代码中出了什么问题。我一直在研究和唯一的教程我能找到似乎是OpenGL的WebGL等轴测投影

在任何速率 - 这里是我的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函数可以正常工作，并且我必须使用透视矩阵来做。一点帮助，将不胜感激。谢谢！

来源

2012-06-18 CodeOwl

投影矩阵所做的一切就是将场景的坐标系映射到X轴和Y轴上的[-1,1]范围，这是将碎片渲染到窗口时使用的空间。可以通过直接渲染到[-1,1]空间的方式来构建场景，在这种情况下，不需要投影矩阵（这可能是您要将示例抛出的示例，但这通常不是这种情况

当使用透视矩阵作为投影矩阵时，X和Y坐标将被Z值缩放，给它们一个深度的外观，如果这种效果是不理想的，深度比例通过使用正交矩阵，就像这样：

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

什么左/右/上/下都是你的，但通常这些都会以某种方式与您的WebGL的视口的尺寸符合例如。，如果你的WebGL的窗口是640×480，你可以这样做：

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

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

希望有帮助！

来源

2012-06-18 20:51:22 Toji

摇滚！我用ortho搞乱了，但我唯一的错误是zFar参数中有一个负号，没有任何显示。我很高兴的工作！ – CodeOwl

WebGL等轴测投影

回答

相关问题