Renaud's banner

Renaud

@onirenaud • 12,905 subscribers

Co-founder @utsuboco WebGPU @threejs

Shorts

Nice! We no longer need a depth sensor, a Kinect, or even Windows to build amazing interactive installations. Just an Apple device, ARKit, and AI. Rendered with Three.js in Electron, using its new SharedTexture API for direct GPU-to-GPU texture sharing. 🚀

Nice! We no longer need a depth sensor, a Kinect, or even Windows to build amazing interactive installations. Just an Apple device, ARKit, and AI. Rendered with Three.js in Electron, using its new SharedTexture API for direct GPU-to-GPU texture sharing. 🚀

68,765 次观看

We live in a funny time. I asked Fable for Azure Kinect support on macOS: "Doesn't exist, the depth engine is a closed Windows/Linux binary" Me: "I know you can do it" Used the arm64 Linux build, booted it in a 182 MB VM, passed the sensor over USB C, streamed depth +IR back.

We live in a funny time. I asked Fable for Azure Kinect support on macOS: "Doesn't exist, the depth engine is a closed Windows/Linux binary" Me: "I know you can do it" Used the arm64 Linux build, booted it in a 182 MB VM, passed the sensor over USB C, streamed depth +IR back.

27,179 次观看

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

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

47,337 次观看

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!

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!

55,089 次观看

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

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

64,678 次观看

Previewing one of the new features I'm building for Three Blocks: Making multi-angle object photography interactive: rotate and explore it in real time. Views and depth are streamed as compact video atlases, decoded with WebCodecs, then depth-warped and blended in WebGPU.

Previewing one of the new features I'm building for Three Blocks: Making multi-angle object photography interactive: rotate and explore it in real time. Views and depth are streamed as compact video atlases, decoded with WebCodecs, then depth-warped and blended in WebGPU.

19,272 次观看

Testing the upcoming Mesh-to-Splat tool from Three.js Blocks 👀 It’ll be available through the three-blocks CLI, Blender add-on, and Cinema 4D add-on, with support for both 3DGS and 4DGS. And yes… Three.js Blocks will be back in just a few days :)

Testing the upcoming Mesh-to-Splat tool from Three.js Blocks 👀 It’ll be available through the three-blocks CLI, Blender add-on, and Cinema 4D add-on, with support for both 3DGS and 4DGS. And yes… Three.js Blocks will be back in just a few days :)

15,783 次观看

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

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

42,925 次观看

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 ⚡️

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 ⚡️

42,622 次观看

"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

"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

32,306 次观看

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!

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!

32,330 次观看

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

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

44,184 次观看

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

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

27,633 次观看

It takes like 200 LOC to build an Instanced Skinning Node animated via Compute Shaders with Three.js. TSL is so cracked.

It takes like 200 LOC to build an Instanced Skinning Node animated via Compute Shaders with Three.js. TSL is so cracked.

21,925 次观看

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! ❄️✨

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! ❄️✨

26,491 次观看

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:

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:

67,198 次观看

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😄

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😄

26,170 次观看

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

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

19,387 次观看

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!

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!

17,429 次观看

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

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

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

Watching The Odyssey in Three.js, just as Christopher Nolan intended. Bonus test from the front row for maximum immersion.

Watching The Odyssey in Three.js, just as Christopher Nolan intended. Bonus test from the front row for maximum immersion.

1,123,030 次观看 • 2 个月前

60 FPS body tracking + mask segmentation at 2K in portrait, off GPU! Running on Apple Neural Engine: Body pose:~9ms (6x faster than Mediapipe) Mask:~9ms (quality is super impressive) GPU is still free for Three.js fun! My goal is advanced installation for <1000$ (M6 Mac Mini)

60 FPS body tracking + mask segmentation at 2K in portrait, off GPU! Running on Apple Neural Engine: Body pose:~9ms (6x faster than Mediapipe) Mask:~9ms (quality is super impressive) GPU is still free for Three.js fun! My goal is advanced installation for <1000$ (M6 Mac Mini)

28,089 次观看 • 1 个月前

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!!

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!!

131,159 次观看 • 1 年前

My full talk at the Three.js Conf in Paris! 🇫🇷 24 minutes of Three.js, WebGPU and performance optimization ⚡️

My full talk at the Three.js Conf in Paris! 🇫🇷 24 minutes of Three.js, WebGPU and performance optimization ⚡️

14,904 次观看 • 1 个月前

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

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

57,995 次观看 • 1 年前

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! 👀🎮

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! 👀🎮

35,581 次观看 • 9 个月前

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!

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!

24,548 次观看 • 8 个月前

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!

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!

26,094 次观看 • 10 个月前

Studying offline 3D vibe-coding with Three.js: - Gemma 4 E4B runs on-device via llama.cpp (or in-browser via transformers.js, ~13x slower). - Scene renders through WebGPU→Dawn→Metal. - A grammar + verifier outside the weights makes the model reliable at Three.js.

Studying offline 3D vibe-coding with Three.js: - Gemma 4 E4B runs on-device via llama.cpp (or in-browser via transformers.js, ~13x slower). - Scene renders through WebGPU→Dawn→Metal. - A grammar + verifier outside the weights makes the model reliable at Three.js.

13,101 次观看 • 4 个月前

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!

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!

22,151 次观看 • 1 年前

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.

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.

23,815 次观看 • 1 年前

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! 😎

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! 😎

17,829 次观看 • 1 年前

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.

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.

14,632 次观看 • 10 个月前

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

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

15,657 次观看 • 1 年前

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

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

10,095 次观看 • 1 年前

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

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

13,739 次观看 • 2 年前

没有更多内容可加载