WebGl紋理視覺失真

I渲染六角網格平面，得到結果：http://gyazo.com/0a008cc909138c7e3c1368e0078c7695 WebGl紋理視覺失真

網格失真。請幫助 - 這可能是什麼原因以及如何解決？我想這是因爲疊加透明膠片而發生的，但不知道如何解決它，而無需將網格更改爲六邊形。

紋理文件看起來：http://gyazo.com/0fea1cb07e52976dc9427b74ab23a252 （它有大小256x256px）

片段着色器：

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

}

來源

2011-10-25 Vecnas

看起來像簡單的深度緩衝區戰鬥 - 來自一個多邊形的透明像素影響深度緩衝區，即使它們最終沒有效果沒有顏色緩衝區。那麼當邏輯上處於完全相同深度的可見像素通過管道時，根據深度比較函數和累積的精度錯誤，可能繪製或不繪製可能繪製的像素。

我認爲我說得對，WebGL在沒有Alpha測試的情況下遵循ES 2.0，所以可能你想修改你的片段着色器 - 比較alpha到一定的閾值，如果片段低於那個閾值，那麼discard它。

或者，如果有任何方法可以繪製深度緩衝禁用的網格，那麼這可能值得跟進。也許你可以在深度比較啓用的情況下繪製它，但是深度寫入禁用，或者先將深度緩衝區完全禁用，然後繪製一個覆蓋整個平面的不可見多邊形以便填充深度緩衝區？

來源

2011-10-25 16:08:21 Tommy

謝謝，禁用深度緩衝區解決問題！ – Vecnas

WebGl紋理視覺失真

回答

相關問題