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#webgl
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
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
How to Create Motion Hover Effects with Image Distortions using Three.js
In this tutorial you will learn how to achieve interesting looking hover effects with image distortions using Three.js.
+ more
Case Study: Chang Liu Portfolio V4
by Chang Liu
Get insight on how to add 3D to a website using Three.js and make a wavy distortion effect in this case study of Chang Liu's new portfolio.
+ more
How to Create an Interactive 3D Character with Three.js
by Kyle Wetton
In this in-depth tutorial you will learn how to create an interactive 3D character that follows the mouse and performs random animations on click.
+ more
Create Text in Three.js with Three-bmfont-text
A short tutorial on how to create animated text in Three.js with three-bmfont-text and give it a nice look using shaders.
+ more
Creating a Water-like Distortion Effect with Three.js
Learn how to achieve a water-like ripple distortion effect with Three.js and postprocessing.
+ more
Simulating Depth of Field with Particles using the Blurry Library
Learn how to create a geometrical scene with a depth effect using the Blurry library.
+ more
Mouse Flowmap Deformation with OGL
A set of WebGL demos using OGL that show an interactive fluid distortion hover effect.
+ more
Crafting Stylised Mouse Trails With OGL
How to make a WebGL mouse trail, and other important life tips...
+ more
How to Build a Color Customizer App for a 3D Model with Three.js
by Kyle Wetton
Learn how to create a complete color customizer app for a 3D model of a chair using Three.js in this in-depth tutorial.
+ more
How to Create a Webcam Audio Visualizer with Three.js
A tutorial on how to create a Three.js powered audio visualizer that takes input from the user's webcam.
+ more