How to Create a Fake 3D Image Effect with WebGL
In Tutorials, by Yuri Artiukh
Learn how to create an interactive “fake” 3D effect for images with depth maps and plain WebGL.
webgl
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.
Buildings Wave Animation with Three.js
In Tutorials, by Ion D. Filho
A tutorial on how to create a 3D building wave animation with three.js and TweenMax.
Interactive Particles with Three.js
In Tutorials, by Bruno Imbrizi
A tutorial on how to draw a large number of particles with Three.js and make them interactive.
Animated Mesh Lines
In Playground, by Jérémie Boulay
A set of five demos with animated WebGL lines created with the THREE.MeshLine library. Find out how to animate and build these lines to create your own animations.
Interactive Animated Landscape
In Playground, by André Mattos
An exploration of an animated interactive landscape built with three.js.
Interactive Repulsion Effect with Three.js
In Tutorials, by Ion D. Filho
A tutorial on how to recreate the interactive repulsion effect of grid items seen in BestServedBold’s Dribbble shot “Holographic-Interactions”.
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.
3D Particle Explorations
In Playground, by Jack Rugile
An inspirational set of demos that explores particle animations in 3D space with three.js. This type of animations could be very suitable for page loaders.
Decorative WebGL Backgrounds
In Playground, by Louis Hoebregts
A collection of decorative shapes displayed as backgrounds using WebGL. The shapes are created with Three.js and animated with the TweenMax library.
Liquid Distortion Effects
In Playground, by Yannis Yannakopoulos
A slideshow with liquid distortion effects in WebGL powered by PixiJS and GSAP.
Infinite Tubes with Three.js
In Playground, by Louis Hoebregts
Some WebGL experiments where the viewer seemingly travels through a textured tunnel. Powered by Three.js and inspired by the effect seen on fornasetti.com.
WebGL Scroll Spiral
In Playground, by Xoihazard
A couple of decorative and inspirational WebGL background scroll effects for websites powered by regl. The idea is to twist some images and hexagonal grid patterns on scroll, creating an interesting effect.
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.
The Making of “The Aviator”: Animating a Basic 3D Scene with Three.js
In Tutorials, by Karim Maaloul
A tutorial that explores the basics of creating animated 3D scenes using Three.js.
Rain & Water Effect Experiments
In Playground, by Lucas Bebber
Some experimental rain and water drop effects made with WebGL and shown in different demo scenarios.
