为什么我会在WebGL中看到这些奇怪的剪贴画？

Question

我正在使用TWGL创建一个NxN平面缓冲区，然后将其用作网格（twgl.primitives.createPlaneBufferInfo），并在Z轴上相对于视频中的亮度值进行拉伸。一切看起来都不错，除了我在（-X，-Y）和（X，Y）象限中得到了奇怪的剪切伪像。请参见附件中的示例...

我看到this post提出了类似的问题，并建议了深度排序，但是鉴于相对深度是在着色器中动态确定的，因此我什至不知道如何进行这种排序。还建议禁用深度测试并启用人脸剔除，但这不起作用。我认为必须有其他选择，因为我所做的并不是特别常见。也许我需要以不同的方式生成网格？对我来说也不是很清楚，为什么只会在四个象限中的两个象限中发生两个。预先感谢！

Answer 1

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

我正在用twgl生成透视矩阵。不知道为什么实现会以这种方式工作（对我来说似乎是个错误）：_public.perspectiveMatrix = twgl.m4.perspective（_public.POV，宽度/高度，0.0，100）;

这是一个问题，因为我正在像这样设置顶点着色器中的位置：gl_Position = PerspectiveMatrixUniform * viewMatrixUniform * vec4（（matrixUniform * vec3（position.xy，1.0））。xy，（强度.r +强度.g +强度.b）/3.0 + 0.01，1.0）;

如果初始化透视图矩阵后立即添加以下行，则所有操作均按预期进行：_public.perspectiveMatrix [15] = 1.0;