Question

我有WebGL上下文，我正在渲染房间和家具的3D模型。它可以在PC上运行，但是当我在房间内和靠近相机的近平面上时，它会在移动设备上给我带来奇怪的z-fighting文物。

当我的裁剪飞机远离相机时，即使在移动设备上也能正常工作：

附近：4267.639824060027，远：11183.900282644734

projectionMatrix = [1.9196896450555059,0,0,0,0,1.7320508075688774,0,0,0,0,2-24082350944259，-1,0,0，-13801.866294355888,0];

但是什么时候

zLimits = {near：30，far：5960.493230110447}

projectionMatrix = [1.9196896450555059,0,0,0,0,1.7320508075688774,0,0,0,0,1.0101172023425247，-1,0,0，-60.30351607027574,0]

图片因z-fighting而损坏，第一个对象的三角形远离第二个对象1000个单位不断闪烁在第二个对象三角形后面

PS：我尝试在我的着色器中使用

precision highp float
precision highp int

和gl.getShaderPrecisionFormat（gl.VERTEX_SHADER，gl.HIGH_FLOAT）;结果是 WebGLShaderPrecisionFormat {rangeMin：127，rangeMax：127，precision：23} 但它没有给我带来任何影响

gl.getParameter（gl.DEPTH_BITS）返回24;

我有两个渲染路径（使用DEPTH_COMPONENT32F转发和延迟），两者都给我相同的artfifacts

PPS：我通过使用ThreeJS渲染的应用程序在同一设备上打开类似的场景，它渲染类似大小的场景而没有伪影

PPPS：我的顶点＆amp;前向渲染中使用的片段着色器

export const geometry = new ShaderProgram(
    // vertex shader
    `
    precision highp float;
    uniform mat4 u_transformMatrix;
    uniform mat4 u_modelViewMatrix;
    uniform mat4 u_meshMatrix;
    uniform vec3 u_viewDir;

    attribute vec4 a_position;
    attribute vec3 a_normal;
    attribute vec2 a_texcoord;

    varying float v_lighting;
    varying vec3 v_normal;
    varying vec3 v_position;
    varying vec2 v_texcoord;

    void main(void)
    {
        vec4 vertex4 = u_meshMatrix * a_position;
        vec3 normal = (u_meshMatrix * vec4(a_normal, 0.0)).xyz;
        v_normal = (u_modelViewMatrix * vec4(normal, 0.0)).xyz;;
        v_position = (u_modelViewMatrix * vertex4).xyz;
        gl_Position = u_transformMatrix * vertex4;
        v_lighting = min(abs(dot(normal, u_viewDir)) + 0.4, 1.0);
        v_texcoord = a_texcoord;
    }
    `
    ,
    // fragment shader
    `
    precision highp float;
    uniform lowp vec4 color;
    uniform lowp float u_selection;
    uniform sampler2D u_texture;
    uniform lowp float u_opacity;
    uniform lowp vec2 u_textureOffset;
    uniform lowp vec2 u_textureScale;

    varying float v_lighting;
    varying vec2 v_texcoord;
    varying vec3 v_normal;
    varying vec3 v_position;

    void main(void)
    {
        vec3 cur_color = vec3(0.0, 1.0, 1.0);
        float ligtMapVal = v_lighting;
        vec2 texCoord = (v_texcoord + u_textureOffset) * u_textureScale;
        vec3 texColor = texture2D(u_texture, texCoord).xyz;
        //vec3 texColor = vec3(0.4, 0.4, 0.6);
        vec3 selectionColor = vec3(0.0, 0.0, 1.0);
        vec3 color = mix(texColor, selectionColor, u_selection);

        vec3 lightDirection = normalize(vec3(1.0, 1.0, 1.0));
        float diffuseWeight = max(dot(v_normal, vec3(0, 0, 1)) + 0.2, 0.5);

        vec3 eyeDirection = normalize(-v_position);
        vec3 halfVector = normalize(lightDirection + eyeDirection);
        float uShininess = 25.1;
        float specularWeight = pow(max(dot(v_normal, halfVector), 0.0), uShininess);

        vec3 lightSpecular = vec3(1.0, 1.0, 1.0);
        gl_FragColor = vec4(color * diffuseWeight + specularWeight * lightSpecular, u_opacity);
    }
`
);

Answer 1

问题的主要来源是我使用mediump精度编译了一些着色器。它们甚至不会被渲染路径使用，而是首先加载。删除这些着色器可以解决问题。

感谢LJ优秀的doc进一步优化它！

WebGL：移动设备上的Z-Buffer工件

1 个答案: