WebGL 渲染忽略位置？

Question

我一直在关注 learningwebgl.com 和运行上的一些问题 3D part of the tutorial. As far as I can tell I've done the same code but I just can't get it to work for some reason. Both triangles are rendered but one triangle's color bleeds through the other. Here is a simplified version 只有两种颜色和两个三角形。如果我的代码有任何问题，请告诉我。谢谢！

下面是我将数据加载到着色器的代码。

 //initialize buffer objects
triangleVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array([
        0.0, 1.0, 0.0,
        -1.0, -1.0, 1.0,
        1.0, -1.0, 1.0,
        0.0, 1.0, 0.0,
        1.0, -1.0, 1.0,
        1.0, -1.0, -1.0
    ]),
gl.STATIC_DRAW);
triangleVertexPositionBuffer.itemSize = 3;
triangleVertexPositionBuffer.numItems = 6;


triangleVertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array([
        // front face
        1.0, 1.0, 0.0, 1.0,
        1.0, 1.0, 0.0, 1.0,
        1.0, 1.0, 0.0, 1.0,
        1.0, 0.0, 0.0, 1.0,
        1.0, 0.0, 0.0, 1.0,
        1.0, 0.0, 0.0, 1.0
    ]),
gl.STATIC_DRAW);
triangleVertexColorBuffer.itemSize = 4;
triangleVertexColorBuffer.numItems = 6;

Answer 1

问题是 OP 没有启用深度测试。不要忘记启用它：P.

WebGL 渲染忽略位置？

WebGL rendering ignoring position?

javascript

webgl