Implementing Water Effects in Three.js

Based on the images you've shared, you're looking to create realistic water simulations with features like reflections, refractions, waves, and caustics. Three.js offers several approaches to implement these water effects.

Built-in Three.js Resources

Three.js has some built-in resources that can help you get started:

1. Sky Object: The Sky object in the Three.js addons can be used to create realistic sky backgrounds that would reflect in your water.

   JAVASCRIPTCopied
   import { Sky } from 'three/addons/objects/Sky.js';

2. Water Example: Three.js has an official water example that implements many of the effects you're looking for:

   • Three.js Ocean Example
   • Three.js Water Example

Implementation Approaches

To achieve the quality shown in your images, you'll likely need to use custom shaders. Here's a general approach:

1. Basic Water Surface with ShaderMaterial

JAVASCRIPTCopied
// Create a plane geometry for the water surface
const waterGeometry = new THREE.PlaneGeometry(10000, 10000, 100, 100);

// Create a custom shader material
const waterMaterial = new THREE.ShaderMaterial({
  uniforms: {
    time: { value: 0 },
    resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
    cameraPos: { value: new THREE.Vector3() },
    // Add textures for normal maps, reflection, refraction
    normalMap: { value: normalMapTexture },
    reflectionMap: { value: reflectionRenderTarget.texture },
    refractionMap: { value: refractionRenderTarget.texture },
  },
  vertexShader: waterVertexShader,
  fragmentShader: waterFragmentShader,
  transparent: true,
});

const water = new THREE.Mesh(waterGeometry, waterMaterial);
water.rotation.x = -Math.PI / 2; // Make it horizontal
scene.add(water);

2. Reflection and Refraction

For realistic water, you'll need to render the scene twice - once for reflection and once for refraction:

JAVASCRIPTCopied
// Create render targets for reflection and refraction
const reflectionRenderTarget = new THREE.WebGLRenderTarget(
  window.innerWidth, 
  window.innerHeight
);
const refractionRenderTarget = new THREE.WebGLRenderTarget(
  window.innerWidth, 
  window.innerHeight
);

// In your render loop:
function render() {
  // Update uniforms
  waterMaterial.uniforms.time.value = performance.now() * 0.001;
  waterMaterial.uniforms.cameraPos.value.copy(camera.position);
  
  // Render reflection
  water.visible = false;
  const reflectionCamera = getReflectionCamera(camera, water.position.y);
  renderer.setRenderTarget(reflectionRenderTarget);
  renderer.render(scene, reflectionCamera);
  
  // Render refraction
  const refractionCamera = getRefractionCamera(camera);
  renderer.setRenderTarget(refractionRenderTarget);
  renderer.render(scene, refractionCamera);
  
  // Render the scene normally
  water.visible = true;
  renderer.setRenderTarget(null);
  renderer.render(scene, camera);
  
  requestAnimationFrame(render);
}

3. Wave Simulation

For dynamic waves, you can use:

1. Vertex displacement in your shader based on mathematical functions
2. FFT-based water simulation for more realistic ocean waves

Open Source Resources

Here are some open-source resources that might help:

1. Three.js Ocean: https://github.com/jbouny/ocean
2. React Three Fiber Ocean: https://github.com/pmndrs/react-three-fiber/blob/master/examples/src/demos/Ocean.js
3. Three.js Water Shader: https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Water.js

Advanced Techniques

For the high-quality effects shown in your images:

1. Caustics: Implement using light projection techniques or pre-computed textures
2. Foam: Add foam at wave peaks and shorelines using noise functions
3. Depth-based color: Change water color based on depth
4. Dynamic normals: Calculate normals in real-time for better wave lighting

Example Shader Code

Here's a simplified example of water vertex and fragment shaders:

GLSLCopied
// Vertex Shader
varying vec2 vUv;
varying vec3 vPosition;
varying vec3 vWorldPosition;

uniform float time;

void main() {
  vUv = uv;
  
  // Simple wave displacement
  vec3 newPosition = position;
  newPosition.y = sin(position.x * 0.05 + time) * 0.2 + 
                 cos(position.z * 0.1 + time * 0.8) * 0.3;
  
  vPosition = newPosition;
  vec4 worldPosition = modelMatrix * vec4(newPosition, 1.0);
  vWorldPosition = worldPosition.xyz;
  
  gl_Position = projectionMatrix * viewMatrix * worldPosition;
}

// Fragment Shader
uniform sampler2D normalMap;
uniform sampler2D reflectionMap;
uniform sampler2D refractionMap;
uniform vec3 cameraPos;

varying vec2 vUv;
varying vec3 vPosition;
varying vec3 vWorldPosition;

void main() {
  // Calculate normal from normal map
  vec3 normal = texture2D(normalMap, vUv * 2.0 + time * 0.05).rgb;
  normal = normalize(normal * 2.0 - 1.0);
  
  // Calculate view direction
  vec3 viewDirection = normalize(cameraPos - vWorldPosition);
  
  // Calculate reflection/refraction coordinates
  float refractionRatio = 1.02;
  vec3 reflectionDir = reflect(-viewDirection, normal);
  vec3 refractionDir = refract(-viewDirection, normal, refractionRatio);
  
  // Sample reflection and refraction textures
  vec4 reflectionColor = texture2D(reflectionMap, reflectionDir.xy * 0.5 + 0.5);
  vec4 refractionColor = texture2D(refractionMap, refractionDir.xy * 0.5 + 0.5);
  
  // Mix based on fresnel effect
  float fresnel = pow(1.0 - dot(viewDirection, normal), 4.0);
  vec4 waterColor = mix(refractionColor, reflectionColor, fresnel);
  
  // Add blue tint and transparency
  waterColor.rgb += vec3(0.0, 0.1, 0.2);
  waterColor.a = 0.8;
  
  gl_FragColor = waterColor;
}

To achieve the quality shown in your images, you'll need to refine these shaders and potentially combine multiple techniques. The Three.js examples and open-source resources mentioned above should provide a solid foundation for your implementation.