WebGL的zBuffer不起作用

Question

WebGL是否具有zBuffer或深度？

所以这是我的问题：

正在裁剪立方体或未正确渲染立方体。在0和1旁边设置'z'坐标会导致对象/几何体被裁剪/剪切。 另外我已经在C ++上实现了这个功能，它可以正常移植webGL和OpenGL ES。 这是我的视角配置：

mat4.perspective(45.0, gl.viewportWidth / gl.viewportHeight, 0.1, 1000.0, pMatrix);

还尝试将zFar设置为更大的值，但结果是相同的。

这是我用于矢量转换的代码：

mat4.translate(mvMatrix, mvMatrix, [0.0, 0.0, 2.0]);

并且还试图检查mat4.translate函数是否存在问题：

var x = 0.0, y = 0.0, z = 2.0;
var position = [
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    x, y, z, 1,
];

mat4.multiply(mvMatrix, mvMatrix, position);

同时检查并尝试直接在Vertex Shader中设置值：

gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition.x, aVertexPosition.y, 2.0, 1.0);

更新： 同时设置为启用DEPTH_TEST。

gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);

Answer 1

最后，我解决了它，问题的原因是由于无效的参数参数和互联网上有关gl-matrix.js库使用的过时教程。

mat4.perspective(45.0, gl.viewportWidth / gl.viewportHeight, 0.1, 1000.0, pMatrix);

而新的gl-matrix参数应该是这样的：

mat4.perspective(pMatrix, 45.0, gl.viewportWidth / gl.viewportHeight, 0.1, 1000.0);

检查JS库的正确文档后。

Answer 2

如果应用投影，通常会在负z轴方向上从原点查看。因此，我认为您需要在z方向上使用负值进行平移，以便在按[0.0, 0.0, 2.0]进行翻译的同时查看几何体。

您说您正在尝试绘制立方体，但您的顶点着色器会将所有z坐标硬连线到2.0。如果您对所有顶点使用相同的z坐标，则无法获得任何类型的三维形状。嗯，你在技术上可以，但我怀疑这是你想要的。