Renaud's banner

Renaud

@onirenaud • 12,554 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. 🚀

67,793 просмотров

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 просмотров

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.

18,576 просмотров

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 просмотров

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 просмотров

"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 просмотров

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,581 просмотров

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,308 просмотров

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 просмотров

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 просмотров

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,162 просмотров

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,173 просмотров

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 просмотров

Excited to announce the launch of my new #WebGL performance monitor tool: stats-gl! A minimalist solution for real-time WebGL performance metrics - FPS, CPU, and GPU. Repo: Live demo: An example for #threejs is also available😊

Excited to announce the launch of my new #WebGL performance monitor tool: stats-gl! A minimalist solution for real-time WebGL performance metrics - FPS, CPU, and GPU. Repo: Live demo: An example for #threejs is also available😊

34,066 просмотров

It's satisfying to watch A* find its way through a maze. I added pathfinding to the RTS camera's click-to-move controls with full debug visualization.

It's satisfying to watch A* find its way through a maze. I added pathfinding to the RTS camera's click-to-move controls with full debug visualization.

10,837 просмотров

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,121,590 просмотров • 1 месяц назад

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)

27,606 просмотров • 8 дней назад

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,106 просмотров • 10 месяцев назад

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 просмотров • 11 месяцев назад

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,405 просмотров • 8 месяцев назад

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 просмотров • 2 месяцев назад

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 просмотров • 6 месяцев назад

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!

25,976 просмотров • 8 месяцев назад

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 просмотров • 11 месяцев назад

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 просмотров • 11 месяцев назад

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 просмотров • 8 месяцев назад

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 лет назад

Больше нет контента для загрузки