Varyings with the same name but different type, or statically used varyings in fragment shader are not declared in vertex shader: fogDepth

Viewed 485

I'm not very good at shaders. I need the fog to reflect in the water. I use Three.js sky_sun_shader. I have added the following to the fragment Shader:

THREE.ShaderChunk[ "fog_pars_fragment" ],

THREE.ShaderChunk ["fog_fragment" ],

In r71, this works fine. In r101, when I use chunk I get an error:

THREE.WebGLProgram: shader error: 0 35715 false gl.getProgramInfoLog Variations with the same name but different type, or statically used variations in fragment shader are not declared in vertex shader: fogDepth

How can I fix this?

The shader's code:

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

};

fog reflection

1 Answers

You need to pay attention to varying declaration that should be consistent across vertex and fragment shaders when embedding code from ShaderChunks.

In your case, you used code from the 2 fragment shaders fog_pars_fragment and fog_fragment

Thus you need to also add the chuncks of the matching vertex shaders fog_pars_vertex and fog_vertex (into your vertex shader). fog_pars_vertex is declaring the missing varying

// fog_pars_vertex.glsl

#ifdef USE_FOG

    varying float fogDepth;

#endif

// fog_vertex.glsl

#ifdef USE_FOG

    fogDepth = -mvPosition.z;

#endif
Related