Loading video...

Video Failed to Load

Go Home

🚀 I'm launching r3f-webgpu-perf today! "npm i r3f-webgpu-perf" One thing I missed while working with WebGPU in React Three Fiber was a performance monitor similar to r3f-perf. The existing tool is fantastic, but it doesn’t support the WebGPU renderer yet. So I decided to build one. ✅ Supports both...

Andersonmancini's profile picture

Anderson Mancini

13,967 subscribers

22,290 views • 10 days ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Mana Blade is my MMORPG built with Three.js, React Three Fiber, and WebGPU. It loads in 2 seconds and is playable on desktop and mobile. Already 2 years in the works! Music by the very talented 磯村ショウノ Shauno Isomura. #threejs #r3f #webgpu
0:25

Mana Blade is my MMORPG built with Three.js, React Three Fiber, and WebGPU. It loads in 2 seconds and is playable on desktop and mobile. Already 2 years in the works! Music by the very talented 磯村ショウノ Shauno Isomura. #threejs #r3f #webgpu

Verekia | ManaBlade.com

14,688 views • 4 months ago

Three.js WebGPU TSL grass now available in ✨ TSLFX. #threejs #r3f #webgpu
0:26

Three.js WebGPU TSL grass now available in ✨ TSLFX. #threejs #r3f #webgpu

Verekia 🔮 ManaBlade.com

12,061 views • 1 year ago

I'm back to working on my water simulator for interactive experiences using #threejs + #r3f. This time, I'm experimenting with #WebGPU and #TSL for better performance. I'm loving it more and more by the minute. The link and potentially a tutorial will be available soon. But if you want to play with the current version, it's available here: #creativecoding #r3f
1:02

I'm back to working on my water simulator for interactive experiences using #threejs + #r3f. This time, I'm experimenting with #WebGPU and #TSL for better performance. I'm loving it more and more by the minute. The link and potentially a tutorial will be available soon. But if you want to play with the current version, it's available here: #creativecoding #r3f

Anderson Mancini

12,472 views • 1 year ago

Following ☄︎ work, I'm experimenting with some react three fiber with #threejs webGPU. We no longer need an EffectComposer to use post-processing effects in #r3f. Now, everything is done by composing TSL nodes. I created a small component that helps in rendering post-processing effects. All you need to do is import the effects you want and add them to the final composition. I will share the link to the demo and source code on Monday 😍. Another thing I want to highlight is how amazing the Screen Space Reflection effect is. It generates reflections not only on the ground, as we had before in r3f in webgl. It is able to calculate the reflections between the meshes. Look how beautiful the reflection of the lightsaber on Darth Vader's mask is. This is not something that is easy to calculate and this is exactly where WebGPU in threejs shines! Congratulations to everyone on the threejs team. I am increasingly impressed with WebGPU and TSL.
1:41

Following ☄︎ work, I'm experimenting with some react three fiber with #threejs webGPU. We no longer need an EffectComposer to use post-processing effects in #r3f. Now, everything is done by composing TSL nodes. I created a small component that helps in rendering post-processing effects. All you need to do is import the effects you want and add them to the final composition. I will share the link to the demo and source code on Monday 😍. Another thing I want to highlight is how amazing the Screen Space Reflection effect is. It generates reflections not only on the ground, as we had before in r3f in webgl. It is able to calculate the reflections between the meshes. Look how beautiful the reflection of the lightsaber on Darth Vader's mask is. This is not something that is easy to calculate and this is exactly where WebGPU in threejs shines! Congratulations to everyone on the threejs team. I am increasingly impressed with WebGPU and TSL.

Anderson Mancini

26,339 views • 1 year ago

Excited to announce that Three.js Water Pro 🌊 is now available for purchase! Can't wait to see what people build with this. Welcome to the era of WebGPU! 🚀 #threejs #webgpu #webgl #shaders
0:51

Excited to announce that Three.js Water Pro 🌊 is now available for purchase! Can't wait to see what people build with this. Welcome to the era of WebGPU! 🚀 #threejs #webgpu #webgl #shaders

Dan Greenheck

37,109 views • 4 months ago

For these WebGPU demos to work on React Native, we had to apply two tiny patches to Three.js. Thanks to the great support from the Three.js WebGPU community, both changes have landed, which means that we'll be able to use a regular build from there. ❤️ open-source.
0:30

For these WebGPU demos to work on React Native, we had to apply two tiny patches to Three.js. Thanks to the great support from the Three.js WebGPU community, both changes have landed, which means that we'll be able to use a regular build from there. ❤️ open-source.

William Candillon

37,772 views • 1 year ago

Here's what it looks like to block out a scene with Triplex — the React Three Fiber editor. Sound on 🔊 #threejs #react #r3f
1:04

Here's what it looks like to block out a scene with Triplex — the React Three Fiber editor. Sound on 🔊 #threejs #react #r3f

mike douges

56,770 views • 3 years ago

Remember this incredible video from André Cardoso on how to add game feels to your game project ? I always thought it was funny to play as a capsule which is what the player of your game most commonly is. So i'm making a Roguelike coop game with WebGPU and threejs #threejs #r3f
0:32

Remember this incredible video from André Cardoso on how to add game feels to your game project ? I always thought it was funny to play as a capsule which is what the player of your game most commonly is. So i'm making a Roguelike coop game with WebGPU and threejs #threejs #r3f

Alex

27,028 views • 4 months ago

💧 Technical Showcase: A piece of WebGL history, rebuilt for WebGPU. Evan Wallace's 2011 water demo helped convince Dylan Field (Dylan Field) that Figma could exist. Yong Su (jeantimex) ported it to WebGPU with full caustics, raytraced reflections, and the GitHub repo to study. 🔗 #WebGPU #WebGL #GraphicsProgramming #Shaders #Figma
1:02

💧 Technical Showcase: A piece of WebGL history, rebuilt for WebGPU. Evan Wallace's 2011 water demo helped convince Dylan Field (Dylan Field) that Figma could exist. Yong Su (jeantimex) ported it to WebGPU with full caustics, raytraced reflections, and the GitHub repo to study. 🔗 #WebGPU #WebGL #GraphicsProgramming #Shaders #Figma

WebGL / WebGPU

18,778 views • 4 months ago

After spending some time in the Virgin Islands, I was inspired to create a WebGPU-based water shader with TSL and compute shaders 🌊 Lots left to do, but it's finally starting to look decent! #threejs #webgl #webgpu #shaders
0:51

After spending some time in the Virgin Islands, I was inspired to create a WebGPU-based water shader with TSL and compute shaders 🌊 Lots left to do, but it's finally starting to look decent! #threejs #webgl #webgpu #shaders

Dan Greenheck

28,002 views • 6 months ago

Update on my GemGPU™ product using #threejs WebGPU and #R3F. Now we have physically accurate diamond refraction, chromatic aberration, absorption, and inclusions. For diamond nerds, it comes with a custom configuration panel with over 50 parameters. Live link coming soon 😍. Official product launch later this year. Signup for the wishlist at #creativecode #webgpu #jewelry
3:58

Update on my GemGPU™ product using #threejs WebGPU and #R3F. Now we have physically accurate diamond refraction, chromatic aberration, absorption, and inclusions. For diamond nerds, it comes with a custom configuration panel with over 50 parameters. Live link coming soon 😍. Official product launch later this year. Signup for the wishlist at #creativecode #webgpu #jewelry

Anderson Mancini

32,642 views • 4 months ago

There are a couple of things that need to be untangled for the three-fiber ecosystem to support WebGPU, but we are seeing some positive signals.
0:25

There are a couple of things that need to be untangled for the three-fiber ecosystem to support WebGPU, but we are seeing some positive signals.

William Candillon

24,164 views • 1 year ago

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
0:24

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

Renaud

13,713 views • 2 years ago

Live: Source: You can download this to start your scenes with #r3f, #threejs WebGPU Renderer, and Post-Processing using #tsl. I also converted my jet engine shader from GLSL to TSL using the transpiler. It works like a dream😍. I added the Royal Naboo starship in the scene to show how Screen Space Reflections reacts to all metallic surfaces, not just the floor. I hope you like it. Please give me a star⭐️on GitHub if you can. #threejsJourney
1:27

Live: Source: You can download this to start your scenes with #r3f, #threejs WebGPU Renderer, and Post-Processing using #tsl. I also converted my jet engine shader from GLSL to TSL using the transpiler. It works like a dream😍. I added the Royal Naboo starship in the scene to show how Screen Space Reflections reacts to all metallic surfaces, not just the floor. I hope you like it. Please give me a star⭐️on GitHub if you can. #threejsJourney

Anderson Mancini

20,206 views • 1 year ago

I wanted to make a portfolio site but I didn't want to make a lame one so I spent the last ~4 months learning web dev and Three.js from scratch to make this really pretty one try it out and let me know what you think (link in replies) #threejs #webgpu #shaders
0:22

I wanted to make a portfolio site but I didn't want to make a lame one so I spent the last ~4 months learning web dev and Three.js from scratch to make this really pretty one try it out and let me know what you think (link in replies) #threejs #webgpu #shaders

Swifter

12,846 views • 3 months ago

STOP everything you're doing, and go try WebGPU and TSL. I wanted to give a shot to TSL and see how it's working today, and wow. in short, it's great Sunag, mrdoob and all the TSL contributors made an awesome job making it as easy as possible #threejsjourney #r3f #threejs details below ⬇️
0:35

STOP everything you're doing, and go try WebGPU and TSL. I wanted to give a shot to TSL and see how it's working today, and wow. in short, it's great Sunag, mrdoob and all the TSL contributors made an awesome job making it as easy as possible #threejsjourney #r3f #threejs details below ⬇️

Alex

84,323 views • 5 months ago

Shipping react-three/handle! The one to handle them all! 👌 Build intuitive 3D and XR cross-platform interactions with just one line of code. #R3F Three.js #WebXR
1:02

Shipping react-three/handle! The one to handle them all! 👌 Build intuitive 3D and XR cross-platform interactions with just one line of code. #R3F Three.js #WebXR

Bela Bohlender

18,632 views • 1 year ago

We've been partnering with Unity for Games to bring WebGPU to their engine, so their developers have everything they need to build immersive games in the browser. Learn more about WebGPU in Unity → Get started with WebGPU →
0:57

We've been partnering with Unity for Games to bring WebGPU to their engine, so their developers have everything they need to build immersive games in the browser. Learn more about WebGPU in Unity → Get started with WebGPU →

Chrome for Developers

18,190 views • 2 years ago

Having fun with InstantMesh model on Replicate and Poimandres react-three-rapier / Three.js 🪄 #react #r3f #threejs
0:56

Having fun with InstantMesh model on Replicate and Poimandres react-three-rapier / Three.js 🪄 #react #r3f #threejs

Baptiste Adrien

110,174 views • 2 years ago

🚀 #threejs r181 is going to be insane. I’ve been playing with the new Screen Space Global Illumination #TSL node before release in #r3f. The video showcases SSGI, GTAO, and TRAA post-processing effects performing magic thanks to the new #WebGPU API. Live link soon. Higher res video: Want to know more? Follow the thread 👇 #creativecoding
4:25

🚀 #threejs r181 is going to be insane. I’ve been playing with the new Screen Space Global Illumination #TSL node before release in #r3f. The video showcases SSGI, GTAO, and TRAA post-processing effects performing magic thanks to the new #WebGPU API. Live link soon. Higher res video: Want to know more? Follow the thread 👇 #creativecoding

Anderson Mancini

27,890 views • 8 months ago