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等軸測投影

回答

相關問題