1

WebGL で xy 平面 (z=0) に 2D 形状を描画したいと考えています。

ここから読んでいます。

これが私の drawScene 関数です:

function drawScene() {
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);

    mat4.identity(mvMatrix);
    mat4.translate(mvMatrix, [2.0, 5.0, -1.0]);

    mvPushMatrix();
    gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

    gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,squareVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);

    setMatrixUniforms();
    gl.drawArrays(gl.TRIANGLE_FAN, 0, squareVertexPositionBuffer.numItems);

        mvPopMatrix();
}

squareVertexPositionBuffer と squareVertexColorBuffer は、オブジェクトの形状と色のバッファーです。

問題はここにあります： mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);そして mat4.translate(mvMatrix, [2.0, 5.0, -1.0]);

z=0 平面にオブジェクトを描画したいと考えています。だから私はそれをに変更する mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.0, 100.0, pMatrix);と mat4.translate(mvMatrix, [2.0, 5.0, 0.0]);

画面には何も表示されません。なぜこうなった？

また、形状の座標を変換してバッファに格納するために WebGL で指定する数値は、画面のピクセル単位ですか?

4

4 に答える 4

2

これは、ニア クリッピング プレーン ( の 3 番目の引数mat4.perspective) が 0.1 に設定されているためです。これは、その前にあるものはすべてカリングされることを意味します。

于 2012-10-16T11:53:18.077 に答える
1

2D レンダリングを行う場合は、3D 演算を使用しないでください。mat4 ライブラリを取り除き、2D 計算を行うと、2D に関するすべての問題が解消されます。

WebGL で 2D に 3D 数学を使用することは、OpenGL 1.0 から残された古い考え方であり、もはや推奨されません。

これは、2D 数学ライブラリを含む 2D の実行方法を説明する一連の記事です。

http://games.greggman.com/game/webgl-fundamentals/

于 2012-10-17T07:13:55.860 に答える
0

また、2D レンダラーを実行している場合は、おそらく深度バッファー テストを無効にする必要があります。おそらく、可視性を決定するために描画順序に依存したいからです。

于 2012-10-16T17:49:10.387 に答える