# Threejs Water WebGL Pool

> Creating realistic water effects, including caustic, reflections. refraction of light and surrounding blocks! Using React Three Fiber mesh physical…

Canonical page: https://andersonmancini.dev/videos/threejs-water-webgl-pool

Published: 2024-11-02 · Duration: 0:39 · Category: Projects · Tags: three.js, react-three-fiber, shaders, webgl

Watch: [YouTube](https://www.youtube.com/watch?v=lWgKCV9-33I) · [Subscribe to the channel](https://www.youtube.com/@AndersonMancini?sub_confirmation=1)

Creating realistic water effects, including caustic, reflections. refraction of light and surrounding blocks! Using React Three Fiber mesh physical materials and custom GLSL shaders to bring realistic scenes to life.

In this project I used the power of Three.js to simplify some complex calculations. This is because the mesh physical material default already include refraction, reflection, and spectral calculations. I insert custom distortion code directly into the vertex and shader fragments. After changing the transmission channel I added dynamic distortion to make the image realistic and fluid. which also supports drilling cameras in water It gave us a unique underwater perspective!