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是否有问题。翻译函数如下：

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);

还检查并尝试在顶点着色器中直接设置值：

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

Update:还设置为启用DEPTH_TEST。

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

Answer 1

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

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

然而，新的gl-矩阵参数应该如下所示：

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坐标，你就不可能得到任何三维形状。严格来说你可以但我怀疑这是你想要的。