2

ここで大丈夫です。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関数が正しく機能していることはわかっているので、パースペクティブマトリックスを使用して何かを行う必要があります。少し助けていただければ幸いです。ありがとうございました！

4

1 に答える 1

5

投影行列が行うのは、シーンの座標系を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要素、スプライト、または等角グラフィックスをレンダリングするために使用する一般的な手法です。

お役に立てば幸いです。

于 2012-06-18T20:51:22.850 に答える