Water Shader

• A water caustic lighting effect

• This replicates the effect of sunlight being refracted from the oceans surface.
  
  Initially I used a looping video as a filter for a spotlight. To cut down the size of the page load I used a webGL shader to simulate the water caustics. The shader is rendered onto a full screen quad, and passed to the spotlight as a render texture. The effect approximates how a gobo would work on a stage light.

• Technologies Used

  • NextJS
  • React Three Fiber
  • Drei