Threejs Water WebGL Pool

· 0:39 · Projects · three.js, react-three-fiber, shaders, webgl

Threejs Water WebGL Pool - video thumbnail

Watch on YouTube · Subscribe to the channel

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!