In this tutorial, we will explore how to dynamically deform terrain, a feature widely used in modern games. Some time ago, we learned about how to create the PS1 jitter shader, taking a nostalgic journey into retro graphics. Transitioning from that retro vibe to cutting-edge techniques has been exciting to me, and I’m happy to […]
Creating Dynamic Terrain Deformation with React Three Fiber Read More »
The award-winning website for Anderson Moss culminates a year-long brand repositioning and integrates a fresh identity design that embodies the agency’s new direction. It stands as both a design and development folio piece in its own right, featuring interactive design that captures this identity and complements a number of custom development features. The distinct art
Case Study: Anderson Moss ®️ Read More »
Hey there 👋! I’m Matias, a creative web dev based in Buenos Aires, Argentina. I currently run joyco.studio, and we recently released the first version of our website. It features a comic-like dot grid shader background, and in this post, I’ll show you how it’s coded, breaking it down into 4 simple steps. But before
How to Code a Subtle Shader Background Effect with React Three Fiber Read More »
Three.js has been gradually rolling out the new WebGPURenderer, built on WebGPU, while also introducing their node system and the Three Shading Language. It’s a lot to unpack, and although it’s not fully production-ready yet, it shows great promise. In this article, I’ll walk you through an experimental Three.js demo using the new WebGPURenderer, BatchedMesh,
Interactive 3D with Three.js BatchedMesh and WebGPURenderer Read More »
I love interactive things, but I’m not a fan of expensive devices, especially those we have to buy year after year to have the latest hardware in our hands! I’m a fan of accessible technology! With that in mind, today I’m going to show you how to control elements in a 3D scene using just
Creating a 3D Hand Controller Using a Webcam with MediaPipe and Three.js Read More »
This project demonstrates a custom jitter shader inspired by the visual style of PS1-era games. The shader replicates the nostalgic ‘jitter’ effect, adding a retro aesthetic to 3D models—perfect for developers looking to add a retro feel to low-poly projects. I’ve always found PS1 games fascinating. Inspired by their nostalgic 3D environments, I decided to
How to Create a PS1-Inspired Jitter Shader with React-Three-Fiber Read More »
In this tutorial, you will learn how to create a pixel/grid displacement effect using Three.js, enhanced with shaders and GPGPU techniques. The guide covers the application of a subtle RGB shift effect that dynamically responds to cursor movement. By the end, you’ll gain a solid understanding of manipulating textures and creating interactive visual effects in
Grid Displacement Texture with RGB Shift using Three.js GPGPU and Shaders Read More »
Threepipe is a new framework for creating 3D web applications using JavaScript or TypeScript. It provides a high-level API built on top of Three.js, offering a more intuitive and efficient way to develop 3D experiences for the web. Threepipe comes with a plugin system (and many built-in plugins), making it easy to extend functionality and integrate various
Interactive 3D Device Showcase with Threepipe Read More »
A set of twelve free 3D animations created with React Three Fiber and GSAP. Today we have something special for you: 12 awesome animated 3D objects that you can use for free in your projects. Created with React Three Fiber and GSAP, these animations are easy to integrate and perfect for adding a bit of
Origami: 12 Free Animated 3D Objects Read More »
Introduction Designing and developing a portfolio is a tough challenge for any designer or developer, and doing so while juggling client projects is even more demanding. It often means working long nights and weekends, constantly questioning whether your concept effectively showcases your vision and skills. For me, it was no different. I had to go
Case Study: Rogier de Boevé Portfolio — 2024 Read More »
