Loading video...

Video Failed to Load

Go Home

Im decoupling rendering part of this project because WebGPU is so fresh and needs lots of work before it starts to look like I want. Good PBR rendering is super critical for app like this, game hairstyles should be authored in proper light environment. Trying to combine stylized anisotropic...

10,973 views • 24 days ago •via X (Twitter)

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

I built a Three.js rendering study inspired by Tiny Glade’s painterly aesthetic, and got it running at 120fps in the browser. Over the past few weeks, I’ve been studying how stylized games achieve that soft, handcrafted look in real time. Tiny Glade was a huge inspiration, and I wanted to use the browser as a constraint: no compute shaders, no native GPU access, and single-threaded JavaScript. As part of this study, I implemented: - GPU-driven instanced brick walls with procedural noise jitter and elastic build animations - Tree, bush, and flower rendering with billboard card expansion, wind sway, and grow animations - Procedural grass with terrain conformance and interactive push deformation - Animated water with layered noise, interactive ripples, and Fresnel-based reflections - Procedural terrain with slope-aware triplanar materials, dirt paths, and rocks - A 7-pass post-processing stack with TAA, bloom, depth of field, painterly filtering, ACES tonemapping, 3D LUT color grading, and film grain The hardest part wasn’t writing any single shader. It was making all of these systems work together at high frame rates inside WebGL, where every millisecond counts and performance problems compound quickly across animation, materials, post-processing, and scene management. Some techniques in this study were inspired by analyzing Tiny Glade’s rendering approach, while others were original implementations built from scratch from visual reference. That contrast taught me a lot: recreating an effect is one challenge, but designing your own shaders and systems to achieve a similar feel is a very different one. This is a private educational rendering study. Some temporary placeholder content is being used during the research phase, and any public or production version would use original or properly licensed assets. Huge credit to Pounce Light for the incredible art direction and rendering work in Tiny Glade: Three.js #gamedev #webgl #threejs #rendering #graphics #realtimerendering #shaderdev

Ibrahim Boona

58,625 views • 3 months ago

There's been a few cool updates recently. In particular, Rerun 0.33 released headless rendering. This, along with the Fable 5 release pushed me to work torwards making MAMMA realtime! I threw Fable at the problem, and it was able to take original implementation that was ~12 seconds / frame and get it all the way down to 40ms /frame, or nearly a 300x speedup 🏎️ How did I achieve this? TLDR: - Use rerun's headless rendering as supervision when optimizing - Save rrd file as test fixture to guide model optiziation with /goal - create an html artifact with headless rendering to provide detailed breakdown of what it did and how it actually looks like in the viewer There were a few critical bits to make sure that this ACTUALLY worked and that Fable didn't just cheat or delete something and declare victory. The first is that the original version used Rerun, this allowed us to save things to disk as an RRD file, meaning we could query the contents and use this as a sort of test fixture or golden artifact that held EXACTLY what all of the values should be. Then we can use this with /goal as a metric when doing the optimization to ensure there are no regressions. The second bit is the headless rendering, this gave us the ability to check that not only did the test fixture pass, but it also looked visually correct. This made a huge difference, and an awesome side affect of it is that we can use the headless rendering to create an implementations.html file. This gives a visual guide as to what the agent did (I walk through it in the video below) Along with this, we're working on an MCP server for rerun that allows full interactivity with the rerun viewer for your agent. So for example the agent can click, drag, move views, scroll timelines, ect. I used this to help the agent debug certain parts such as when the 2d sam masks didn't line up, or if the triangulated keypoints werent correctly matching with the optimized mesh. The agents could go, click into the view, scroll through the timeline and see where things went wrong. Fable + Headless Rendering + Rerun MCP == 300x speedup in less then a days work With these new tools, I'm planning on going back to my gaussian splatting implemntation and cleaning it up + making it fast!

Pablo Vela

22,771 views • 1 month ago