Welcome to my blog, I'm Rick and mainly a react dev with a deep interest in creative industries and general 3D.
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.
Abstract Blob Shader with Particles
Thefrontdev's take on an abstract blob which mimics an explosive type of event in space. Written in GLSL and using noise/particles/points with smoke textures on them. All built with the Three.js builtin materials and using onBeforeCompile to get all the standard light calculations from the builtin material.
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.