javascript - 顶点着色器中未声明名称相同但类型不同的变量，或片段着色器中静态使用的变量 : fogDepth

Question

我不太擅长着色器。我需要雾在水中反射。我使用 Three.js sky_sun_shader。我已将以下内容添加到片段着色器中:

THREE.ShaderChunk[ "fog_pars_fragment"],

THREE.ShaderChunk ["fog_fragment"]，

在 r71 中，这工作正常。在 r101 中，当我使用 chunk 时出现错误:

THREE.WebGLProgram:着色器错误:0 35715 false gl.getProgramInfoLog 具有相同名称但不同类型的变体，或片段着色器中静态使用的变体未在顶点着色器中声明:fogDepth

我该如何解决这个问题？

着色器的代码:

THREE.ShaderLib['water'] = {
uniforms: THREE.UniformsUtils.merge( [
    THREE.UniformsLib[ "fog" ], {   
            "normalSampler":    { type: "t", value: null },
            "mirrorSampler":    { type: "t", value: null },
            "alpha":            { type: "f", value: 1.0 },
            "time":             { type: "f", value: 0.0 },
            "size":         { type: "f", value: 1.0 },
            "kalbedo":      { type: "f", value: 1.0 },
            "distortionScale":  { type: "f", value: 20.0 },
            "textureMatrix" :   { type: "m4", value: new THREE.Matrix4() },
            "sunColor":         { type: "c", value: new THREE.Color( 0x7F7F7F ) },
            "sunDirection":     { type: "v3", value: new THREE.Vector3( 0.70707, 0.70707, 0 ) },
            "eye":              { type: "v3", value: new THREE.Vector3( 0, 0, 0 ) },
            "waterColor":       { type: "c", value: new THREE.Color( 0x555555 ) }
    }
] ),
vertexShader: [
    'uniform mat4 textureMatrix;',
    'uniform float time;',
    'varying vec4 mirrorCoord;',
    'varying vec3 worldPosition;',
    'void main()',
    '{',
    '   mirrorCoord = modelMatrix * vec4( position, 1.0 );',
    '   worldPosition = mirrorCoord.xyz;',
    '   mirrorCoord = textureMatrix * mirrorCoord;',
    '   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
    '}'
].join('\n'),

fragmentShader: [
    'precision highp float;',
    'uniform sampler2D mirrorSampler;',
    'uniform float alpha;',
    'uniform float time;',
        'uniform float size;',
        'uniform float kalbedo;',
    'uniform float distortionScale;',
    'uniform sampler2D normalSampler;',
    'uniform vec3 sunColor;',
    'uniform vec3 sunDirection;',
    'uniform vec3 eye;',
    'uniform vec3 waterColor;',
    'varying vec4 mirrorCoord;',
    'varying vec3 worldPosition;',
    'vec4 getNoise( vec2 uv )',
    '{',
    '   vec2 uv0 = ( uv / 103.0 ) + vec2(time / 17.0, time / 29.0);',
    '   vec2 uv1 = uv / 107.0-vec2( time / -19.0, time / 31.0 );',
    '   vec2 uv2 = uv / vec2( 8907.0, 9803.0 ) + vec2( time / 101.0, time / 97.0 );',
    '   vec2 uv3 = uv / vec2( 1091.0, 1027.0 ) - vec2( time / 109.0, time / -113.0 );',
    '   vec4 noise = ( texture2D( normalSampler, uv0 ) ) +',
    '       ( texture2D( normalSampler, uv1 ) ) +',
    '       ( texture2D( normalSampler, uv2 ) ) +',
    '       ( texture2D( normalSampler, uv3 ) );',
    '   return noise * 0.5 - 1.0;',
    '}',

    'void sunLight( const vec3 surfaceNormal, const vec3 eyeDirection, float shiny, float spec, float diffuse, inout vec3 diffuseColor, inout vec3 specularColor )',
    '{',
    '   vec3 reflection = normalize( reflect( -sunDirection, surfaceNormal ) );',
    '   float direction = max( 0.0, dot( eyeDirection, reflection ) );',
    '   specularColor += pow( direction, shiny ) * sunColor * spec;',
    '   diffuseColor += max( dot( sunDirection, surfaceNormal ), 0.0 ) * sunColor * diffuse;',
    '}',
    THREE.ShaderChunk[ "common" ],
    THREE.ShaderChunk[ "fog_pars_fragment" ],
    'void main()',
    '{',
    '   vec4 noise = getNoise( worldPosition.xz * size  );',
    '   vec3 surfaceNormal = normalize( noise.xzy * vec3( 1.5, 1.0, 1.5 ) );',
    '   vec3 diffuseLight = vec3(0.0);',
    '   vec3 specularLight = vec3(0.0);',
    '   vec3 worldToEye = eye-worldPosition;',
    '   vec3 eyeDirection = normalize( worldToEye );',
    '   sunLight( surfaceNormal, eyeDirection, 100.0, 2.0, 0.5, diffuseLight, specularLight );',
    '   float distance = length(worldToEye);',
    '   vec2 distortion = surfaceNormal.xz * ( 0.001 + 1.0 / distance ) * distortionScale;',
    '   vec3 reflectionSample = vec3( texture2D( mirrorSampler, mirrorCoord.xy / mirrorCoord.z + distortion ) );',
    '   float theta = max( dot( eyeDirection, surfaceNormal ), 0.0 );',
    '   float rf0 = 0.3;',
    '   float reflectance = rf0 + ( 1.0 - rf0 ) * pow( ( 1.0 - theta ), 5.0 );',
    '   vec3 scatter = max( 0.0, dot( surfaceNormal, eyeDirection ) ) * waterColor;',
    '   vec3 albedo = mix( sunColor * diffuseLight * 0.3 + scatter, ( vec3( 0.1 ) + reflectionSample * 0.9 + reflectionSample * specularLight ), reflectance ) ;',
    '   vec3 outgoingLight = albedo *kalbedo;',
        THREE.ShaderChunk[ "fog_fragment" ],
    '   gl_FragColor = vec4( outgoingLight, alpha );',
    '}'
].join('\n')

};

Answer 1

在从 ShaderChunk 嵌入代码时，您需要注意不同的声明，这些声明应在顶点和片段着色器之间保持一致。

在您的例子中，您使用了来自 2 个片段着色器fog_pars_fragment 和fog_fragment 的代码

因此，您还需要添加匹配顶点着色器fog_pars_vertex 和fog_vertex 的 block (到您的顶点着色器中)。 og_pars_vertex 正在声明丢失的变化

// fog_pars_vertex.glsl

#ifdef USE_FOG

    varying float fogDepth;

#endif

// fog_vertex.glsl

#ifdef USE_FOG

    fogDepth = -mvPosition.z;

#endif