Transform-ER
Procedural meshless 3D morphing at stable 60 FPS on GPU
10 followers
Procedural meshless 3D morphing at stable 60 FPS on GPU
10 followers
Transform-ER is a live showcase of procedural, meshless 3D morphing at stable 60 FPS on GPU. Written entirely in raw, hand-crafted GLSL shaders using Signed Distance Fields (SDF) and raymarching, it requires zero external libraries like Three.js and zero heavy 3D assets. Built inside Google Cloud Shell, it demonstrates hyper-efficient, mobile-first PBR rendering and seamless structural transformations driven purely by real-time mathematics.
How are you handling performance on lower-end mobile devices when the SDF complexity ramps up during those mid-morph transitions? Curious if there's a fallback path or LOD strategy built into the shader pipeline.
@sleyman544815 That’s a brilliant question! Mid-morph transitions are indeed the most critical parts because smooth minimum functions (smin) or mixing complex SDFs can easily double the math complexity and cause raymarching to drag down performance.
To handle this on lower-end mobile devices without a true dynamic fallback pipeline (since it's a single raw shader), I implemented a few strict optimization strategies:
1. Bounded Morphing Areas: The intense blending mathematics only trigger within a strict spatial bounding volume. Rays that miss the bounding area skip the complex morphing logic entirely.
2. Distance-Based Step Throttling (Fake LOD): While there's no mesh to swap, I use a distance-based step strategy. As the camera moves further away, the epsilon (surface tolerance) increases dynamically, and the maximum raymarching step count drops. This acts as a shader-level LOD.
3. Optimized Normal Calculations: Normal estimation via finite differences is extremely heavy during morphs. I optimized it by reusing distance field samples from the marching loop where possible, cutting down unnecessary SDF evaluations right at the transition phase.
Thanks for asking such a tech-savvy question!
Runs smooth on my phone which i did not expect from raymarching, and the way one shape flows into another is genuinely mesmerizing
@boran0uq6 Thank you so much! Hearing that it runs smooth on your phone means a lot, as making raymarching mobile-friendly took quite a bit of optimization work. I’m super glad you enjoyed the morphing transitions — keeping them organic and mesmerizing was exactly the goal. Appreciate the support!
Honestly thought this would chug on my phone but the morphing stays buttery smooth. The fact that it is just raw shaders doing all that work is kind of wild.
@nurignf Thank you so much! Optimization was one of the biggest challenges here. Raymarching on mobile can be heavy, so I spent a lot of time fine-tuning the code and simplifying the SDF mathematics to ensure it stays buttery smooth even on smartphones. Glad you appreciated the raw shader approach!
Hand-crafted GLSL with no external libraries is genuinely impressive, and hitting a stable 60 FPS on pure raymarched SDFs is the kind of craft most shader folks only dream about.
@aydnocakl2cb Wow, thank you for such high praise! Coming from someone who understands the complexity of shader development, this means the world to me. Keeping a stable 60 FPS while raymarching pure SDFs required a lot of aggressive refactoring, sacrificing heavy operations, and structuring the math just right for the GPU pipeline. It was a real challenge, but comments like yours make all that code-golfing and optimization completely worth it. Thanks for the massive support!