Creating a Fluid Distortion Animation with Three.js

A coding session where you’ll learn how to create the interactive liquid-like effect from the PixiJS website using Three.js.

By in Videos on

In this new ALL YOUR HTML coding session you’ll learn how to code a water-like distortion animation as seen on the PixiJS website using Three.js. We’ll use shaders and render target to achieve the fluid effects.

Original website: https://pixijs.com/

This coding session was streamed live on April 10, 2022.

Support: https://www.patreon.com/allyourhtml

Setup: https://gist.github.com/akella/a19954…

Tagged with:

Yuri Artiukh

Yuriy is a developer from Kyiv, Ukraine. Leading a small frontend agency riverco.de, also speaking at conferences, and open for freelance projects. Curious about CSS and shaders. Loves to learn every day.

MotionGrid_featured

How to Create a Motion Hover Effect for a Background Image Grid

Create an Abstract Image Slideshow with OGL, GLSL, and GSAP

Ideas for Image Motion Trail Animations

Stay up to date with the latest web design and development news and relevant updates from Codrops.