Water Transition Effect with Post-Processing in Three.js

Based on your description, you're implementing an interesting technique for creating a water transition effect using post-processing in Three.js. This approach uses a cube with black exterior and white interior to create a mask for the water boundary.

To implement this with Three.js post-processing, you'll need to use the EffectComposer, which is the main tool for managing post-processing effects in Three.js.

Implementation Steps

1. First, set up your EffectComposer:

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

// Create composer
const composer = new EffectComposer(renderer);

// Add the main render pass
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

2. Create your cube for the water boundary:

JAVASCRIPTCopied
// Create a cube geometry
const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);

// Create materials for inside and outside
const insideMaterial = new THREE.MeshBasicMaterial({ 
  color: 0xffffff, 
  side: THREE.BackSide 
});

const outsideMaterial = new THREE.MeshBasicMaterial({ 
  color: 0x000000, 
  side: THREE.FrontSide 
});

// Create the cube mesh
const waterBoundaryCube = new THREE.Mesh(cubeGeometry, [
  insideMaterial, insideMaterial, insideMaterial,
  insideMaterial, insideMaterial, insideMaterial
]);

// Add to scene
scene.add(waterBoundaryCube);

3. Create a render target for the cube:

JAVASCRIPTCopied
const cubeRenderTarget = new THREE.WebGLRenderTarget(
  window.innerWidth, 
  window.innerHeight
);

4. Create a custom shader pass for the water effect:

JAVASCRIPTCopied
const waterTransitionShader = {
  uniforms: {
    'tDiffuse': { value: null },
    'tWaterMask': { value: cubeRenderTarget.texture },
    'waterColor': { value: new THREE.Color(0x0055ff) },
    'underwaterColor': { value: new THREE.Color(0x003366) }
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform sampler2D tDiffuse;
    uniform sampler2D tWaterMask;
    uniform vec3 waterColor;
    uniform vec3 underwaterColor;
    varying vec2 vUv;
    
    void main() {
      vec4 originalColor = texture2D(tDiffuse, vUv);
      vec4 maskColor = texture2D(tWaterMask, vUv);
      
      // White areas (inside cube) show underwater scene
      // Black areas (outside cube) show water surface
      float waterMask = 1.0 - maskColor.r;
      
      // Apply water color to surface areas
      vec3 finalColor = mix(originalColor.rgb, waterColor, waterMask * 0.7);
      
      // Apply underwater color tint to underwater areas
      finalColor = mix(finalColor, finalColor * underwaterColor, (1.0 - waterMask) * 0.5);
      
      gl_FragColor = vec4(finalColor, 1.0);
    }
  `
};

const waterPass = new ShaderPass(waterTransitionShader);
composer.addPass(waterPass);

5. In your animation loop, update the cube position to follow the camera:

JAVASCRIPTCopied
function animate() {
  requestAnimationFrame(animate);
  
  // Update cube position to follow camera (only XZ coordinates)
  waterBoundaryCube.position.x = camera.position.x;
  waterBoundaryCube.position.z = camera.position.z;
  waterBoundaryCube.position.y = 0; // Set at water level
  
  // First render the cube to the render target
  const currentAutoClear = renderer.autoClear;
  renderer.autoClear = true;
  renderer.setRenderTarget(cubeRenderTarget);
  renderer.render(scene, camera);
  
  // Then render the scene with post-processing
  renderer.setRenderTarget(null);
  renderer.autoClear = currentAutoClear;
  composer.render();
}

This implementation creates a water transition effect where the boundary between above and below water is determined by the cube's geometry. When the camera moves into the cube, the shader will show the underwater effect in those areas.

You may need to adjust the shader code and cube size based on your specific requirements and scene setup.