How to Create Distortion and Grain Effects on Scroll with Shaders in Three.js
In Tutorials by Jan Kohlbach
Learn how to create distortion and grain effects on scroll using Three.js shaders, syncing HTML images with WebGL.
Searching for "distortion"
We've found
16 results for your search term.
Creating a Bulge Distortion Effect with WebGL
In Tutorials by Robin Payot
Learn how to create a fun bulge effect in WebGL using the OGL library and shaders.
Creating a Fluid Distortion Animation with Three.js
In Videos by Yuri Artiukh
A coding session where you’ll learn how to create the interactive liquid-like effect from the PixiJS website using Three.js.
Pixel Distortion Effect with Three.js
In Playground by Yuri Artiukh
An interactive WebGL pixel distortion effect with lots of possibilities based on the effect seen on the website for “Infinite Bad Guy”.
Pixelated Distortion Effect with Three.js
In Videos by Yuri Artiukh
In this coding tutorial, you’ll learn how to recreate an interactive pixel distortion effect using Three.js.
Deconstructing the homunculus.jp Distortion with Three.js
In Videos by Yuri Artiukh
Learn how to replicate the pixel river distortion effect seen on homunculus.js using Three.js.
How to Code a Crosshair Mouse Cursor with Distortion Hover Effect
In Tutorials by Manoela Ilic
A quick tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion hover effect.
Audio-based Image Distortion Effects with WebGL
In Playground by Yannis Yannakopoulos
Some experiments that show how to make audio-based distortion effects on images with p5.js and its sound library.
How to Create Motion Hover Effects with Image Distortions using Three.js
In Tutorials by Niccolò Miranda
In this tutorial you will learn how to achieve interesting looking hover effects with image distortions using Three.js.
Creating a Water-like Distortion Effect with Three.js
In Tutorials by Daniel Velasquez
Learn how to achieve a water-like ripple distortion effect with Three.js and postprocessing.
A Configurator for Creating Custom WebGL Distortion Effects
In Playground by Daniel Velasquez
A configurator for creating unique fullscreen image animations with WebGL distortion effects powered by Three.js.
Image Distortion Effects with SVG Filters
In Playground by Manoela Ilic
Three distortion effects powered by SVG filters that are applied to an image when hovering a link.
Text Distortion Effects using Blotter.js
In Playground by Manoela Ilic
Some text distortion experiments using the Blotter.js library. The idea is to distort text as we scroll or move the mouse.
WebGL Distortion Hover Effects
In Playground by Robin Delaporte
A little library that can be used for creating WebGL powered distortion hover effects using displacement images.
Liquid Distortion Effects
In Playground by Yannis Yannakopoulos
A slideshow with liquid distortion effects in WebGL powered by PixiJS and GSAP.
Animated Heat Distortion Effects with WebGL
In Tutorials by Lucas Bebber
A tutorial on how to use fragment shaders in WebGL to create an animated heat haze distortion effect on images and text.