javascript - 为什么我在使用 WebGL 时会看到这些奇怪的裁剪伪像？

Question

我正在使用 TWGL 创建一个 NxN FlatBuffers ，然后将其用作网格 (twgl.primitives.createPlaneBufferInfo)，在 Z 轴上相对于视频中的亮度值进行拉伸(stretch)。一切看起来都不错，除了我在 (-X, -Y) 和 (X, Y) 象限中出现奇怪的裁剪伪影。有关示例，请参见所附图片...

我看到了this post这提出了类似的问题，并建议进行深度排序，但考虑到相对深度是在着色器中动态决定的，我什至不知道如何进行这种排序。还有一个建议禁用深度测试并启用面部剔除，但这不起作用。我认为必须有某种替代方案，因为我正在做的事情并不少见。也许我需要以不同的方式生成网格？我也不清楚为什么这只会发生在四个象限中的两个象限中。提前致谢!

Answer 1

经过大量实验，我终于找到了问题所在。我生成的透视矩阵的第 16 个数组元素为零(换句话说，X、Y、Z、W 矩阵中的位置 [4,4])导致深度值变平。

我正在用 twgl 生成我的透视矩阵。不确定为什么以这种方式实现(对我来说似乎是一个错误):

_public.perspectiveMatrix = twgl.m4.perspective(_public.POV, width/height, 0.0, 100);

这是一个问题，因为我在顶点着色器中设置的位置是这样的:

gl_Position = perspectiveMatrixUniform * viewMatrixUniform * vec4((matrixUniform * vec3(position.xy, 1.0)).xy, (intensity.r + intensity.g + intensity.b)/3.0 + 0.01, 1.0); 

如果我在初始化透视矩阵后立即添加以下行，一切都会按预期进行:

_public.perspectiveMatrix[15] = 1.0;