Rick
I am a creative frontend developer, I specialise in React, GLSL, postprocessing and R3F. I love to experiment with code and deal with complex topics.
Realtime Displacement Maps using CanvasTextures in React Three Fiber
A very quick walkthrough for doing realtime displacement of a subdivided plane using displacement maps in Three.js. This has a wide number of applications, for example terrain tools much like in unity, real time growth patterns or some sort of animated displacement. Combined with emission and potential postprocessing you could create some pretty cool projects with this technique.
Workflow from Shadertoy to React Three Fiber - R3F
This is a workflow from shadertoy to r3f (@react-three/fiber). It involves ping pong textures and using the output texture as the input texture. This pattern is seen a lot in shadertoy as it uses textures and fragment shaders.
Creating amazing particle effect along a curve in React Three Fiber
Creating particles in @react-three/fiber and making them follow a curve. This could be used for a cool dashboard GUI or combined with soft particles to procedurally place smoke coming from something - to name but a few uses.
Creating Realistic Water Ripples - A Beginner's Guide to Reflective Effects
This article provides a step-by-step tutorial for beginners, covering the basics of creating realistic reflective water ripples using shaders and reflective materials. Discover the techniques to bring your virtual water surfaces to life and add a basic reflective material.
Immersive Portals in Three and R3F - Unleashing the Power of Stencil Masks from Drei
Dive into the world of portals in Three.js with the powerful stencil mask functionality from Drei. Experience seamless transitions and captivating environments as you traverse these enchanting gateways. With precise control over visibility using stencil masks, create immersive and interactive scenes that transport your audience to new dimensions. Discover the endless creative possibilities and unlock a realm of storytelling potential with portals in Three.js. Step into a world where reality and imagination converge, and embark on an immersive journey like never before.
Mastering Skybox Realism - Loading and Applying HDRI with Three and R3F
Embark on a journey towards breathtaking visual fidelity as we delve into the realm of HDRI-driven skybox shaders in Three.js. In this comprehensive article, we guide you through the process of loading and seamlessly applying High Dynamic Range Images (HDRI) to create stunningly realistic skybox environments. Discover the art of harnessing the true potential of HDRI to evoke immersive atmospheres and dynamic lighting conditions. Learn the intricacies of integrating HDRI seamlessly into Three.js skybox shaders, unlocking a world of photorealistic rendering and captivating visual experiences. Join me as we explore the techniques for achieving unmatched visual realism with HDRI in Three.js skybox shaders.