Renaud's banner

Renaud

@onirenaud • 12,298 subscribers

Renderer @spawn WebGPU @threejs

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

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

34,751 görüntüleme

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,055 görüntüleme

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,432 görüntüleme

"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 görüntüleme

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,799 görüntüleme

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,250 görüntüleme

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 görüntüleme

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,501 görüntüleme

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,069 görüntüleme

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,431 görüntüleme

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 görüntüleme

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,114 görüntüleme

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,157 görüntüleme

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,081 görüntüleme

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:

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:

27,124 görüntüleme

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 😄

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 😄

11,783 görüntüleme

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

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

130,942 görüntüleme • 7 ay önce

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,891 görüntüleme • 8 ay önce

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,169 görüntüleme • 5 ay önce

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 görüntüleme • 3 ay önce

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,495 görüntüleme • 5 ay önce

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 görüntüleme • 8 ay önce

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 görüntüleme • 11 ay önce

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,610 görüntüleme • 5 ay önce

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,753 görüntüleme • 7 ay önce

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,580 görüntüleme • 10 ay önce

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 görüntüleme • 11 ay önce

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,498 görüntüleme • 2 yıl önce

Daha fazla içerik yok.