Question

我渲染十六进制网格平面，得到结果：http://gyazo.com/0a008cc909138c7e3c1368e0078c7695

网格扭曲。请帮助 - 这可能是什么原因以及如何解决？我想这是因为覆盖透明度，但不知道如何解决它而不将网格更改为十六进制。

纹理文件外观：http://gyazo.com/0fea1cb07e52976dc9427b74ab23a252 （它的大小为256x256像素）

片段着色器：

vec4 textureColor0 = texture2D(uSampler0, vec2(vTextureCoord.s, vTextureCoord.t));
gl_FragColor = vec4(textureColor0.rgb, textureColor0.a);

网格位置：-10，-10，-26.99f，而相机：-5，-2，-20和角度：-8,0，-22

网格生成代码：

public static MeshData makePlane(int w, int h) {
float[] planeVerts = new float[12 * w * h];
float[] planeNormals = new float[planeVerts.length];
float[] planeTexCoords = new float[8 * w * h];
int[] planeTriangles = new int[6 * w * h];
{
int idx = 0;
for (int x = 0; x < w; x++) {
  for (int y = 0; y < h; y++) {
    planeVerts[idx] = x * 0.8f;
    planeVerts[idx + 1] = y + 0.5f * x;
    planeVerts[idx + 2] = 0;
    planeVerts[idx + 3] = x * 0.8f;
    planeVerts[idx + 4] = y + 1 + 0.5f * x;
    planeVerts[idx + 5] = 0;
    planeVerts[idx + 6] = x * 0.8f + 1;
    planeVerts[idx + 7] = y + 1 + 0.5f * x;
    planeVerts[idx + 8] = 0;
    planeVerts[idx + 9] = x * 0.8f + 1;
    planeVerts[idx + 10] = y + 0.5f * x;
    planeVerts[idx + 11] = 0;
    idx += 12;
  }
}
}
for (int i = 0; i < planeVerts.length; i+=3) {
  planeNormals[i] = 0;
  planeNormals[i + 1] = 0;
  planeNormals[i + 2] = 1;
}
for (int idx = 0; idx < planeTexCoords.length; idx += 8) {
  if (idx % 32 == 0) {
    planeTexCoords[idx] = 0;
    planeTexCoords[idx + 1] = 0.5f;
    planeTexCoords[idx + 2] = 0;
    planeTexCoords[idx + 3] = 0;
    planeTexCoords[idx + 4] = 0.5f;
    planeTexCoords[idx + 5] = 0;
    planeTexCoords[idx + 6] = 0.5f;
    planeTexCoords[idx + 7] = 0.5f;
  } else {
    planeTexCoords[idx] = 0;
    planeTexCoords[idx + 1] = 1;
    planeTexCoords[idx + 2] = 0;
    planeTexCoords[idx + 3] = 0.5f;
    planeTexCoords[idx + 4] = 0.5f;
    planeTexCoords[idx + 5] = 0.5f;
    planeTexCoords[idx + 6] = 0.5f;
    planeTexCoords[idx + 7] = 1;
  }
}
for (int idx = 0; idx < planeTriangles.length; idx += 6) {
  planeTriangles[idx] = idx * 4 / 6;
  planeTriangles[idx + 1] = idx * 4 / 6 + 1;
  planeTriangles[idx + 2] = idx * 4 / 6 + 2;
  planeTriangles[idx + 3] = idx * 4 / 6;
  planeTriangles[idx + 4] = idx * 4 / 6 + 2;
  planeTriangles[idx + 5] = idx * 4 / 6 + 3;
}
return new MeshData(planeVerts, planeTriangles, planeNormals, planeTexCoords);

}

Answer 1

它看起来像简单的深度缓冲区战斗 - 来自一个多边形的透明像素正在影响深度缓冲区，即使它们最终没有效果也没有颜色缓冲区。因此，当逻辑上处于完全相同深度的可见像素通过管道时，可能会或可能不会根据您的深度比较函数和累积的精度误差绘制。

我认为我说WebGL遵循ES 2.0没有进行alpha测试是正确的，所以可能你想修改你的片段着色器 - 将alpha与某个阈值进行比较，如果片段低于那个阈值那么{{ 1}}它。

或者，如果有任何方法可以在禁用深度缓冲的情况下绘制该网格，那么这可能值得跟进。也许你可以在最后启用深度比较但是禁用深度写入时绘制它，或者首先在深度缓冲区完全禁用的情况下绘制它，然后绘制一个覆盖整个平面的单个不可见多边形以填充深度缓冲区？

WebGl构造视觉失真

1 个答案: