0

私は現在 WebGL を学んでおり、2 つの個別のメッシュ (立方体とピラミッド) でオブジェクトをレンダリングしようとしています。WebGL でオブジェクトを表すには、次のような多次元配列を使用します。

var V = [[-1, -1, -1,          // Vertices
           1, -1,  1,
           ...],               // Cube
         [-1, -1,  1,
           1, -1,  1,
           ...]                // Pyramid
        ];
var VBuffer = new Array();     // Vertex buffer for createBuffer()

var F = [[1, 5, 6,  1, 6, 2,   // Triangle facets
          2, 6, 7,  2, 7, 3,
          ...],                // Cube
         [0, 1, 4,  1, 2, 4,
          ...]                 // Pyramid
        ];

var NVF = [18, 12];            // Total no. of vertices in F

次に、WebGL でのバッファーの初期化のために、次のようにします。

function initBuffers(idx) {
  VBuffer[idx] = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, VBuffer[idx]);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(V[idx]), gl.STATIC_DRAW);
  ...
}

三角形のファセットは同じ方法で初期化されます。オブジェクトをレンダリングするには:

function drawScene(idx) {
  ...
  gl.bindBuffer(gl.ARRAY_BUFFER, VBuffer[idx]);
  gl.vertexAttribPointer(vertexPositionAttribute[idx], 3, gl.FLOAT, false, 0, 0);
  ...
  gl.drawElements(gl.TRIANGLES, NVF[idx], gl.UNSIGNED_SHORT, 0);

  ...
}

これらのルーチンは、HTML ページで次のように呼び出されます。

function setInt(f, i, interval) {                    // To animate the object
  setInterval(function() { f(i); }, interval);
}

function start() {
  ...
  if (gl) {
    gl.clearColor(0.2, 0.6, 0.8, 1.0);
    gl.clearDepth(1.0);
    gl.enable(gl.DEPTH_TEST);
    gl.depthFunc(gl.LEQUAL);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    for (i=0; i<2; i++) {
      initShaders(i);
      initBuffers(i);
    }

    orthoMatrix = makeOrtho(-4, 4, -3, 3, 0.1, 100.0);
    mvMatrix = Matrix.I(4);
    mvTranslate([0.0, 0.0, -7.0]);

    for (i=0; i<2; i++) {
      setInt(drawScene, i, 15);
    }
  }
}

レンダリングとアニメーションは機能しますが、背景 (キャンバス) の色は白であり、gl.clearColor() で指定されたものとは異なります。これを修正する方法についてのアイデア/提案はありますか?

4

3 に答える 3

0

次の 2 つの可能性があります。

  • 白はキャンバスのデフォルトの色であり、webGL コンテキストが適切に初期化されていないため、白のままです。コンソールを確認してください。初期化にエラーがある場合は、問題が見つかったよりも、そうでない場合は 2 番目のオプションです。
  • 白はエラーなしでキャンバスに描画されます。これは、シェーダーが白いフラグメントを出力し、大きすぎるオブジェクトを配置した場合に発生する可能性があるため、ピラミッド/立方体の片側を見ることになり、他のすべてがビューからブロックされているためです。その一面の。

フィードバックをお待ちしております。

于 2013-08-28T10:53:36.033 に答える
0

今日も同じ問題に遭遇しました。私の解決策は、gl.drawElements を呼び出す直前に gl.clearColor と gl.clear を配置することです。

私のコードでは、画像のオンロード イベントで gl.drawElements が呼び出されるため、キャンバスの背景色を正しく保つためにこれを行う必要があります。

于 2013-12-18T08:08:11.020 に答える
0

gl.clearColor() は drawScene() 内に配置する必要があるため、setInt(drawScene, i, 15) によって drawScene() が更新されたときに常に呼び出されます。setInterval() ではなく requestAnimFrame() を使用する別の提案がありますが、私はこれを試していません。

于 2013-08-29T01:42:21.643 に答える