Renaud

@onirenaud • 12,298 subscribers

Renderer @spawn WebGPU @threejs

Shorts

34,751 views

55,055 views

64,432 views

32,306 views

42,799 views

32,250 views

27,633 views

42,501 views

44,069 views

26,431 views

19,387 views

26,114 views

67,157 views

17,081 views

27,124 views

11,783 views

Videos

sweetdream.ai

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Private Show

Join now for exclusive access

Free preview available • Premium content

130,942 views • 7 months ago

57,891 views • 8 months ago

35,169 views • 5 months ago

24,548 views • 3 months ago

25,495 views • 5 months ago

22,151 views • 8 months ago

23,815 views • 11 months ago

14,610 views • 5 months ago

17,753 views • 8 months ago

15,580 views • 10 months ago

10,095 views • 11 months ago

13,498 views • 2 years ago

No more content to load

Live Cam

Renaud

Shorts

New Three.js PR: InstancedSkinnedMesh Per-instance skeletal animation for animated crowds -- with shadows, postprocessing, and full TSL support. Vertex animation: material.skinningNode = instancedSkinning Compute animation: material.skinningNode = computeInstancedSkinning

Next week I’ll put online physics examples, and I’ll need some gamer testers👾 The magic of Three.js Blocks Engine is that users can plug in their own Physics Models: Platformers, FPS, RTS, anything. It even ships with presets like quake, here I vibe coded a CS1.6 surf mod!

Why Threejs Plus? Because it’s Threejs, plus thousands of hours of expertise distilled into modular, interconnectable building blocks. SpatialGrid → Boids: const { instanceMatrix } = new Boids(300000) positionNode = instanceMatrix().mul(positionLocal) Powered by TSL &amp; WebGPU

"Ok Claude: build an Awwwards SOTD site. Use the Three.js Blocks template. Copy the trend. Make no mistake." That’s the idea. My new Template CLI is almost ready: generate a performant 3D website / game / experience from one prompt. 1/8

Working on the last big piece that will be shipped in the alpha of Three.js Blocks: IndirectBatchedMesh for WebGPU. Static scenes with frustum culling + dynamic batching. ~0.3ms CPU for ~500k unique geometry. This is the Web-3D leap WebGL couldn’t hit. 1/3

Some progress on my CS 1.6 surf mod! ⛷️ It’s accurate enough now that I can’t complete it, starting to feel just like the original. 😄 Any surf experts already spotting obvious physics issues from the video? I’ll put an online demo up tomorrow!

New Three.js Blocks release! 🚀 ✨ Gaussian Splatting 🧱 Physic Engine 🛠️ Hundreds of fixes + new features 1/5

Three.js devs don’t know it yet, but this will become one of their favorite tools🥖 Bake thousands of animations, run them entirely in a compute shader, no heavy GLB size, no CPU overhead, no AnimationMixer bottleneck ⚡️

Integrated unified spray, foam, and bubbles into my fluid simulation. Runs in real-time with WebGPU, Three.js, and over 1 million particles!

This is what happens when you combine two features of Three.js Blocks. The SPH simulation is rendered as an InstancedMesh and parented to a MeshTransmission. By simply rotating the parent, the magic unfolds. Can’t wait to see some snow globe experiences this Christmas! ❄️✨

Just integrated BVH for SDF generation, and added Sampling + Volume Collision support across all my simulations! Super excited to ship the Three.js Blocks release later this month! 🚀 1/5

The interaction is finally ready! It was tricky to calibrate, but it now supports up to 6 people, reacting to full-body movement velocity. The more energetic your motion, the stronger the response. During my tests kids loved it. They had a blast jumping around nonstop😄

Introducing the new react-three-next: Integrate seamlessly 3D into your Next.js website. New features include 3D portal divs, synchronized DOM/3D views and events, and a complete refactor for app-directory. Repo: Demo: A thread:

Three.js Blocks is getting the fastest Fluid Simulation ever built for the Web! Powered by WebGPU texture-formats-tier2 with RGBA storage textures and read-write access (coming in Chrome 142 🚀). And it’s just one simple node you can drop anywhere in your scene or Postprocess!

Added a system to dynamically inject chunks into my fluid simulation using intermediate storage buffers and compute shader transfers. Zero impact on performance and no wasted memory! To make this possible, I added two PRs:

Continuing my work on smoke simulation with 3D storage textures: Added MacCormack advection and red-black Gauss-Seidel. Performances are starting to be really solid and visuals are finally catching up too 😄

Videos

Watch Anya Live

This one took me almost 2 years to master, soon every Threejs dev will master it with a simple Import: Smoothed Particle Hydrodynamics Simulation, 2D and 3D, optimized with Spatial Hashing and Compute Shaders. Optimized for WebGPURenderer with complete TSL compatibility!!

Today’s work reminded me: tossing more OSS into the void isn’t it. Too often it fades without support. So instead, I’m putting care into how I share, bundling the code I use daily at Utsubo into Threejs Plus: advanced, always-up-to-date WebGPU-first components. 1/4

1/5 🧵 Three.js Blocks Physics demos are live 🚀 Three.js-first API, WebGL fallback ✅. Native Mesh/InstancedMesh/BatchedMesh integration. Runs in a Service Worker with instant SharedArrayBuffer sync. Physics is just so fast. Surf Mode is getting better, try it! 👀🎮

If you know Three.js, you know this is a big one. No more full material rebuild + shader recompile every time you add/change lights. renderer.lights.dynamic = true That’s it. ✅ If you’re not sure why this matters, the video’s with vs without makes it obvious. PR tomorrow!

Three.js r182 isn’t out yet, so in the meantime I’ve opened up the examples &amp; docs for Three.js Blocks 🎉 Docs are still WIP, so feedbacks are very welcome. All WebGPU examples are tested in Chrome, Safari and Firefox. I’ll start onboarding waitlist users once r182 lands!

Working on an ultra-fast SDF Texts. Instance culling via compute shader &amp; indirect-draw is just a drop-in piece. Everything reuses and connects. Made with TSL, Threejs Plus will bring a whole new level of performance into the Web that wasn't possible before WebGPU! Stay tuned!

Draft render from last week, built with Three.js Shading Language and WebGPU, using hash noise and afterimage passes in Post Process. It's not making the final cut (too noisy for interactive use), but I liked the Ghibli-esque vibe enough to share it here.

WebGPU on iOS is so good! Three.js r182 was just released today, so it’s time to onboard new users in Three Blocks! If you’re interested in starting, DM me for early access.

Had a fun bug while working on a TransmissionNodeMaterial for Three.js Plus. I’ll leave these settings available, I’m sure some creative developers are going to make something cool with them! Also, here's a preview of the starter with a native canvas recorder, HMR and more! 😎

And here’s a peek behind the scenes. 👀 A minimal Electron app connects to Azure Kinect via Node.js, reconstructs a 3D skeleton with Three.js, and reacts to motion intensity based on the velocity of some key bones. #WebGPU #Threejs

Almost done with the interaction of my WebGPU fluid simulation! After testing BVH geometry and marching cubes with compute shaders, I chose raymarching for hands interaction &amp; rendering. It adapts well with MLS-MPM and enables precise interaction in real-time for &lt;2ms. #threejs

Realtime Particle test using Transformers.js by Xenova and its upcoming WebGPU backend with the Xenova/modnet model for body segmentation. Rendered with WebGPU in Three.js. It’s so clean it makes me want to do a shadertoy visualizer in the background now 😄 #threejs

Why Threejs Plus? Because it’s Threejs, plus thousands of hours of expertise distilled into modular, interconnectable building blocks. SpatialGrid → Boids: const { instanceMatrix } = new Boids(300000) positionNode = instanceMatrix().mul(positionLocal) Powered by TSL & WebGPU

Three.js r182 isn’t out yet, so in the meantime I’ve opened up the examples & docs for Three.js Blocks 🎉 Docs are still WIP, so feedbacks are very welcome. All WebGPU examples are tested in Chrome, Safari and Firefox. I’ll start onboarding waitlist users once r182 lands!

Working on an ultra-fast SDF Texts. Instance culling via compute shader & indirect-draw is just a drop-in piece. Everything reuses and connects. Made with TSL, Threejs Plus will bring a whole new level of performance into the Web that wasn't possible before WebGPU! Stay tuned!

Almost done with the interaction of my WebGPU fluid simulation! After testing BVH geometry and marching cubes with compute shaders, I chose raymarching for hands interaction & rendering. It adapts well with MLS-MPM and enables precise interaction in real-time for <2ms. #threejs