WebGL等距投影
好吧,我快发疯了。我在做一些WebGL,我想做一个等距立方体。我不想使用Three.js。我想首先了解我的代码中出了什么问题。我一直在研究,我能找到的唯一教程似乎是OpenGL 无论如何-以下是我的drawScene函数:WebGL等距投影,webgl,projection,isometric,Webgl,Projection,Isometric,好吧,我快发疯了。我在做一些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 / t
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函数工作正常,我必须对透视矩阵做些什么。如果你能帮我一点忙,我将不胜感激。谢谢大家! 投影矩阵所做的只是将场景的坐标系映射到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)处的任何顶点渲染到窗口的左下角,而放置在(648480)处的任何顶点在右上角渲染。这些顶点的z组件将无效。这是一种常用的技术,可用于渲染GUI元素、精灵或等轴测图形,就像您正在尝试的那样
希望这能有所帮助!rock on!我在摆弄ortho,但我唯一的错误是zFar参数中有一个负号,没有显示任何内容。我很高兴这能起作用!