Water Caustics in WebGL

Description

Render water caustics at interractive framerates using WebGL with JavaScript

Scene

• Bottom of a swimming pool
• Contains
  • Light: directed down
  • Water: random / interactive waves
  • Bottom: sand / tile
  • Caustics

Demo

Click this link

Interaction

• Rotation: Drag using the mouse
• Scale: Scroll using the mouse
• Distance: Move the slider to change the depth
• Wave: Click on water surface to simulate rain
• Bottom: Click "Load Texture" to change bottom texture
• Creating shots: Click "Save Image"

References

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