Water.js Issue with fog

Questions
1

So I have this fog shader all it does is add height to the normal three fog:

     THREE.ShaderChunk.fog_fragment = `
      #ifdef USE_FOG
        vec3 fogOrigin = cameraPosition;
        vec3 fogDirection = normalize(vWorldPosition - fogOrigin);
        float fogDepth = distance(vWorldPosition, fogOrigin);
  
        fogDepth *= fogDepth;
  
        float heightFactor = 0.05;
        float fogFactor = heightFactor * exp(-fogOrigin.y * fogDensity) * (
            1.0 - exp(-fogDepth * fogDirection.y * fogDensity)) / fogDirection.y;
        fogFactor = saturate(fogFactor);
  
        gl_FragColor.rgb = mix( gl_FragColor.rgb, fogColor, fogFactor );
      #endif`;
      
      THREE.ShaderChunk.fog_pars_fragment = `
      #ifdef USE_FOG
        uniform float fogTime;
        uniform vec3 fogColor;
        varying vec3 vWorldPosition;
        #ifdef FOG_EXP2
          uniform float fogDensity;
        #else
          uniform float fogNear;
          uniform float fogFar;
        #endif
      #endif`;
      
      THREE.ShaderChunk.fog_vertex = `
      #ifdef USE_FOG
        vWorldPosition = (modelMatrix * vec4(transformed, 1.0 )).xyz;
      #endif`;
      
      THREE.ShaderChunk.fog_pars_vertex = `
      #ifdef USE_FOG
        varying vec3 vWorldPosition;
      #endif`;

so far so good, now when I add water.js it still works! however if I set the fog of the water to true it breaks and I get this message in the console any ideas?

image
image1920×1080 357 KB

2

The transformed variable does not exist in the vertex shader of Water. Try to use position instead.

3

so i assume this line needs replacing? vWorldPosition = (modelMatrix * vec4(transformed, 1.0 )).xyz; can i ask with what though do i spawn transformed for “position” ? or vWorldPosition… kinda lost with webgl.

4

Try it with:

vWorldPosition = (modelMatrix * vec4(position, 1.0 )).xyz;
1 Like
5

I thought so when i tried to do that it throws this:
ERROR: 0:794: ‘distance’ : function name expected

image
image1920×1080 192 KB

6

The distance() function only works with GLSL 3 I believe. Try to avoid its usage or configure your shader material by setting the glslVersion parameter to THREE.GLSL3, see:

7

i assume you want me to add this to the water.js shader ? when i do this it returns this

image
image1920×1080 222 KB

8

this would be nice to know for future reference tho i have found this Wooden Raft Games that suits my needs but it would still be good to know how to the glslVersion which version of three can you do this mines r127

9

I’ve forgot that the entire GLSL needs to be GLSL3 conform if you use THREE.GLSL3. Regarding this, it’s probably better if you implement a custom distance() function instead.

1 Like