WebGL渲染忽略位置？答案

【问题标题】：WebGL rendering ignoring position?WebGL渲染忽略位置？
【发布时间】：2015-08-30 02:17:39
【问题描述】：

我一直在关注 learningwebgl.com，在3D part of the tutorial 上遇到了一些问题。据我所知，我已经完成了相同的代码，但由于某种原因我无法让它工作。两个三角形都被渲染了，但是一个三角形的颜色会渗透到另一个三角形中。 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;

【问题讨论】：

您是否启用了深度测试？ gl.enable(gl.DEPTH_TEST)
哇，我简直不敢相信我忘记了，非常感谢！如果您愿意，您可以将您的评论作为答案，我会将其标记为正确。

标签： javascript webgl

【解决方案1】：

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

【讨论】：