我一直在关注learningwebgl.com,并在3D part of the tutorial上遇到了一些问题。 。据我所知,我已经完成了相同的代码,但由于某种原因我无法让它工作。两个三 Angular 形均已渲染,但其中一个三 Angular 形的颜色会渗透到另一个三 Angular 形中。 Here is a simplified version只有两种颜色和两个三 Angular 形。如果我的代码有任何问题,请告诉我。谢谢!
下面是我将数据加载到着色器的代码。
//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;
最佳答案
问题是 OP 没有启用深度测试。不要忘记启用它:P。
关于javascript - WebGL渲染忽略位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32288187/