Water Caustics in WebGL

Description

Render water caustics at interractive framerates using WebGL with JavaScript

Scene

• Swimming pool in a skybox
• Contains
  • Light
  • Background: skybox
  • Water: random / interactive waves
  • Walls and Bottom: tiles
  • Object: sphere / apple / duck
  • Caustics

Features

• Reflection
• Refraction
• Shadow
• Caustics
• Waves
• Object Interaction

Demo

Click this link

Interaction

• Interaction: Left Mouse
• Rotation: Right Mouse
• Scale: Scroll using the mouse

References

• WebGL Water: Demo, Github
• ThreeJS Caustics: Demo, Github
• Underwater Caustics
• Rendering Water Caustics: Code
• Water Caustics: Video, Github
• WebGL Fluid: Demo, Github