Implementing an Underwater Blur Effect in Three.js

To create a blur effect for the underwater portion of your scene, you can use Three.js post-processing capabilities with the EffectComposer. This approach allows you to apply effects selectively to specific parts of your scene.

Approach Using EffectComposer

The EffectComposer is a powerful tool in Three.js that allows you to chain multiple rendering passes to create complex visual effects. For your underwater blur, you'll need to:

1. Set up an EffectComposer
2. Create a custom shader pass for the underwater area
3. Apply a blur effect only to that region

Here's a basic implementation:

JAVASCRIPTCopied
// Import necessary components
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';

// Set up renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Set up scene, camera, etc.
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// Create EffectComposer
const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));

// Create a custom shader for underwater blur
const underwaterBlurShader = {
  uniforms: {
    "tDiffuse": { value: null },
    "waterLevel": { value: 0.5 }, // Adjust this to match your water level
    "blurAmount": { value: 2.0 }
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform sampler2D tDiffuse;
    uniform float waterLevel;
    uniform float blurAmount;
    varying vec2 vUv;
    
    void main() {
      vec4 color = texture2D(tDiffuse, vUv);
      
      // Check if we're below the water level (in screen space)
      if (vUv.y > waterLevel) {
        // Apply blur for underwater parts
        float blur = blurAmount / 512.0;
        vec4 sum = vec4(0.0);
        
        // Simple box blur
        sum += texture2D(tDiffuse, vec2(vUv.x - 4.0 * blur, vUv.y)) * 0.05;
        sum += texture2D(tDiffuse, vec2(vUv.x - 3.0 * blur, vUv.y)) * 0.09;
        sum += texture2D(tDiffuse, vec2(vUv.x - 2.0 * blur, vUv.y)) * 0.12;
        sum += texture2D(tDiffuse, vec2(vUv.x - blur, vUv.y)) * 0.15;
        sum += texture2D(tDiffuse, vec2(vUv.x, vUv.y)) * 0.16;
        sum += texture2D(tDiffuse, vec2(vUv.x + blur, vUv.y)) * 0.15;
        sum += texture2D(tDiffuse, vec2(vUv.x + 2.0 * blur, vUv.y)) * 0.12;
        sum += texture2D(tDiffuse, vec2(vUv.x + 3.0 * blur, vUv.y)) * 0.09;
        sum += texture2D(tDiffuse, vec2(vUv.x + 4.0 * blur, vUv.y)) * 0.05;
        
        // Also blur vertically
        sum += texture2D(tDiffuse, vec2(vUv.x, vUv.y - 4.0 * blur)) * 0.05;
        sum += texture2D(tDiffuse, vec2(vUv.x, vUv.y - 3.0 * blur)) * 0.09;
        sum += texture2D(tDiffuse, vec2(vUv.x, vUv.y - 2.0 * blur)) * 0.12;
        sum += texture2D(tDiffuse, vec2(vUv.x, vUv.y - blur)) * 0.15;
        sum += texture2D(tDiffuse, vec2(vUv.x, vUv.y + blur)) * 0.15;
        sum += texture2D(tDiffuse, vec2(vUv.x, vUv.y + 2.0 * blur)) * 0.12;
        sum += texture2D(tDiffuse, vec2(vUv.x, vUv.y + 3.0 * blur)) * 0.09;
        sum += texture2D(tDiffuse, vec2(vUv.x, vUv.y + 4.0 * blur)) * 0.05;
        
        // Normalize and add a blue tint for underwater effect
        sum = sum / 2.0;
        sum.b += 0.2; // Add blue tint
        
        gl_FragColor = sum;
      } else {
        // Above water - no effect
        gl_FragColor = color;
      }
    }
  `
};

// Add the underwater blur pass
const underwaterBlurPass = new ShaderPass(underwaterBlurShader);
composer.addPass(underwaterBlurPass);

// Animation loop
function animate() {
  requestAnimationFrame(animate);
  composer.render();
}
animate();

Adjustments to Consider

1. Water Level: Adjust the waterLevel uniform to match where your water line is in the scene.

2. Blur Amount: Modify the blurAmount uniform to control the intensity of the blur.

3. Blur Algorithm: The example uses a simple box blur. For better quality, you might want to implement a Gaussian blur.

4. Color Adjustment: The shader adds a slight blue tint to underwater areas. You can adjust this or add other effects like color attenuation with depth.

5. Performance: If performance is an issue, consider using a lower resolution render target for the underwater portion.

For more advanced post-processing effects, you might want to explore the full range of capabilities in the Three.js post-processing module, which includes more sophisticated blur implementations and other effects that could enhance your underwater scene.