WebGL をいくつか試してみましたが、修正方法がわからないバグがあります。
現在、次の設定があります。すべての位置があり、単一のgl.drawArrays関数によって描画されている約 100 個の三角形があります。それらを正しい順序で描画するためにgl.enable(gl.DEPTH_TEST);、正しい結果が得られました。
私が今抱えている問題はgl_Position、頂点シェーダーの三角形を更新すると、更新された Z 値が深度テストで使用されないことです。その結果、agl_Position.zが 1 の三角形を a が 10 の三角形の上に描画できますがgl_Position.z、これはまさに私が望んでいるものではありません。
私は何を試しましたか？
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.GEQUAL);
と
gl.clear(gl.DEPTH_BUFFER_BIT);
gl.clearDepth(0);
gl.drawArrays(gl.TRIANGLES, 0, verticesCount);
レンダリング機能で。
次のコードは、バッファを作成するために使用されます。
gl.bindBuffer(gl.ARRAY_BUFFER, dataBuffer);
gl.bufferData(gl.ARRAY_BUFFER, positionBufferData, gl.STATIC_DRAW);
const positionLocation = gl.getAttribLocation(program, 'position');
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, false, 0, 0);
より高い z 値を持つ三角形はサイズがはるかに大きくなりますが (パースペクティブのため)、小さな三角形がその上に表示されます (レンダリング順序のため)。
フラグメント シェーダーでgl_fragCoord.z、それが正しく、(遠くにある) 小さい三角形が大きい三角形 (近くにある) よりも高いアルファを受け取ったかどうかを確認するために使用しました。
奇妙な描画動作の原因は何ですか?