Kinetic Typography with Three.js
Discover how to use Three.js to render kinetic 3D typography.
+ more#webgl
Interactive WebGL Hover Effects
by Yuri Artiukh
A simple tutorial on how to achieve an interactive mouseover/hover effect on images in some easy steps.
+ more
Create a Wave Motion Effect on an Image with Three.js
Learn how to make a wave motion effect on an image with Three.js.
+ more
Audio-based Image Distortion Effects with WebGL
Some experiments that show how to make audio-based distortion effects on images with p5.js and its sound library.
+ more
How to Create a Physics-based 3D Cloth with Cannon.js and Three.js
Learn how to create a physics-based 3D cloth with Cannon.js and Three.js and use simplex noise to create a wind effect.
+ more
How to Create Procedural Clouds Using Three.js Sprites
Learn how to simulate a cloud on a Three.js Sprite using React-Three-Fiber.
+ more
How to Unroll Images with Three.js
by Yuri Artiukh
Discover the basic concept behind an unrolling image effect using WebGL.
+ more
Playing with Texture Projection in Three.js
by Marco Fugaro
In this tutorial, you'll learn how to project a texture onto an object in Three.js with some interesting examples.
+ more
Case Study: Akaru 2019
In this creative breakdown you will learn how the signature WebGL oil effect of the new Akaru website was created.
+ more
How to Create the Apple Fifth Avenue Cube in WebGL
A tutorial on how to re-create the Apple Fifth Avenue Cube animation using WebGL.
+ more
Case Study: Portfolio of Bruno Arizio
by Bruno Arizio
A look behind the scenes of Bruno Arizio's portfolio with insight into the design process and an in-depth technical breakdown of the WebGL implementation.
+ more
Scroll, Refraction and Shader Effects in Three.js and React
Discover how to use react-three-fiber and combine some common techniques to create a Three.js powered layout with shader effects.
+ more
Building a Physics-based 3D Menu with Cannon.js and Three.js
Learn the basics of doing physics in WebGL by building a 3D menu with Cannon.js and Three.js as renderer.
+ more
Creating a Distorted Mask Effect on an Image with Babylon.js and GLSL
Learn the basics of GLSL while creating a distorted mask effect on images using Babylon.js.
+ more
High-speed Light Trails in Three.js
A creative coding exploration into how to recreate a high-speed lights effect in real-time using Three.js.
+ more
Creative WebGL Image Transitions
by Yuri Artiukh
A set of interesting looking image transitions including distortion and warp effects made with WebGL.
+ more
Real-time Multiside Refraction in Three Steps
by Jesper Vos
In this tutorial you will learn how to make objects appear glass-like in three steps using Three.js.
+ more
Making Gooey Image Hover Effects with Three.js
Learn how to create gooey reveal hover effects on images with Three.js using noise within a shader.
+ more