优化WebGL中Z-Fighting(Depth-Fighting)的一个小技巧

由于GPU计算数据(存储数据)的精度问题， Z-Fighting在实时渲染中很常见。解决Z-Fighting有很多小技巧，这里说一个小技巧在WebGL运行环境下优化这类问题，尤其是在多Pass多重材质的应用场景中。

如下方式写顶点shader就能防止Z-Fighting问题。

#version 300 es

precision mediump float;

layout(location = 0) in vec3 a_vs;
layout(location = 1) in vec2 a_uvs;

uniform mat4 u_objMat;
uniform mat4 u_viewMat;
uniform mat4 u_projMat;

out vec2 v_uv;

vec4 localPosition;
vec4 worldPosition;
vec4 viewPosition;

void main() {

    localPosition = vec4(a_vs.xyz,1.0);
    worldPosition = u_objMat * localPosition;
    viewPosition = u_viewMat * worldPosition;
    gl_Position = u_projMat * viewPosition;
    v_uv = a_uvs.xy;

}

上述代码，使用了全局变量。

效果如下图：

 如果用如下形式代码，则会出现Z_Fighting问题：

#version 300 es

precision mediump float;

layout(location = 0) in vec3 a_vs;
layout(location = 1) in vec2 a_uvs;

uniform mat4 u_objMat;
uniform mat4 u_viewMat;
uniform mat4 u_projMat;

out vec2 v_uv;

void main() {

    vec4 lpos = vec4(a_vs.xyz,1.0);
    vec4 wpos = u_objMat * lpos;
    vec4 vpos = u_viewMat * wpos;
    gl_Position = u_projMat * vpos;
    v_uv = a_uvs.xy;

}

上述代码，使用了局部变量。

有Z-Fighting的效果如下图:

 renderDoc查看结果: