WebGPU Scanning Effect with Depth Maps
In Playground, by deadrabbbbit
An exploration of a scanning effect using depth maps, custom shaders, and WebGPU rendering.
react-three-fiber
Playing with Light and Refraction in Three.js: Warping 3D Text Inside a Glass Torus
Explore how MeshTransmissionMaterial in Three.js bends light, creates refraction effects, and enhances realistic glass-like materials.
Creating Stylized Water Effects with React Three Fiber
In Tutorials, by Thalles Lopes
Learn how to craft smooth, cartoon-style water effects with dynamic movement, optimized for performance, using React Three Fiber.
Building Efficient Three.js Scenes: Optimize Performance While Maintaining Quality
In Tutorials, by Niccolò Fanton
A comprehensive look at how to optimize Three.js scenes using Fiber, Drei, and advanced tools, ensuring smooth performance while retaining high-quality visuals.
Creating Generative Artwork with Three.js
In Tutorials, by Eduard Fossas
Develop a dynamic, generative artwork using Three.js and grid systems, inspired by Lygia Clark’s minimalist geometric designs.
How to Code a Shader Based Reveal Effect with React Three Fiber & GLSL
In Tutorials, by Colin Demouge
A simple yet cool image reveal effect created with React-Three-Fiber/Drei and animated using Framer Motion.
Creating Dynamic Terrain Deformation with React Three Fiber
In Tutorials, by Oguzhan Tufenk
An exploration of real-time terrain reshaping through user interactions, using React Three Fiber.
How to Code a Subtle Shader Background Effect with React Three Fiber
In Tutorials, by Matias Perez
Learn how to create an interactive shader background effect using React Three Fiber and Drei in four simple steps.
How to Create a PS1-Inspired Jitter Shader with React-Three-Fiber
In Tutorials, by Oguzhan Tufenk
Learn how to create a custom jitter shader in React-Three-Fiber, inspired by the visual style of PS1-era games, to add a retro aesthetic to 3D models.
Origami: 12 Free Animated 3D Objects
In Playground, by deadrabbbbit
A set of twelve free 3D animations created with React Three Fiber and GSAP.
How to Create a Liquid Raymarching Scene Using Three.js Shading Language
In Tutorials, by Ben McCormick
An introduction to Raymarching using the power of Signed Distance Fields (SDFs) and simple lighting to create a liquid shape effect.
Creating an Animated Displaced Sphere with a Custom Three.js Material
In Tutorials, by Pavel Mazhuga
Learn how to create an animated, displaced sphere using custom shaders with Three.js and React Three Fiber.
Case Study: ToyFight — 2024
A snapshot of how the new ToyFight site was designed and developed.
Model Texture Transition and Procedural Radial Noise using WebGL
In Playground, by Mohammed Amine Bourouis
A WebGL experiment that explores two visual effects: a texture transition on a 3D can model and a procedural radial noise field.
Creating an Interactive 3D Bulge Text Effect with React Three Fiber
In Tutorials, by Roman Jean-Elie
Exploring how to generate an engaging bulge effect on text using React Three Fiber.
On-Scroll Revealing WebGL Images
In Playground, by Yuri Artiukh
An exploration of on-scroll reveal effects for images in WebGL, using React Three Fiber.
3D Glass Portal Card Effect with React Three Fiber and Gaussian Splatting
In Playground, by Yuri Artiukh
Explore the creation of a 3D glass portal with React Three Fiber, with optimized rendering using Gaussian Splatting and integrating real-world objects.
Progressively Enhanced WebGL Lens Refraction
In Tutorials, by David Lindkvist
Learn how to create a responsive WebGL layout powered by CSS and React Three Fiber.
