Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

🚀 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

15,136 subscribers

24,267 Aufrufe • vor 3 Monaten •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

I was asked by many people last week about how to use the new ThreeJS WebGPU inspector and control panel in React-Three-Fiber. Here is how I personally use it: Code: Demo: #threejs #r3f #creativecoding
0:36

I was asked by many people last week about how to use the new ThreeJS WebGPU inspector and control panel in React-Three-Fiber. Here is how I personally use it: Code: Demo: #threejs #r3f #creativecoding

Faraz

45,871 Aufrufe • vor 2 Monaten

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,581 Aufrufe • vor 1 Jahr

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,829 Aufrufe • vor 1 Jahr

R3F v10 has a fresh release in preview! ✧ First-class WebGPU and TSL support ✧ useFrame revamped with a new scheduler ✧ Multi-canvas out of the box ✧ Three essentials moved out of Drei directly into core ▶️ npm install @'react-three/fiber@alpha' We are eagerly deving what the next generation of frameworks should look like from WebGPU to agentic support. Shout out your feedback. For details check out: And if you want to learn more first-hand join us at our Threejs conf workshop!
0:31

R3F v10 has a fresh release in preview! ✧ First-class WebGPU and TSL support ✧ useFrame revamped with a new scheduler ✧ Multi-canvas out of the box ✧ Three essentials moved out of Drei directly into core ▶️ npm install @'react-three/fiber@alpha' We are eagerly deving what the next generation of frameworks should look like from WebGPU to agentic support. Shout out your feedback. For details check out: And if you want to learn more first-hand join us at our Threejs conf workshop!

Poimandres

10,926 Aufrufe • vor 21 Tagen

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,183 Aufrufe • vor 7 Monaten

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,268 Aufrufe • vor 1 Jahr

Live Link: Source Code: While updating my website, I found an old project that was broken and decided to bring it back to life using WebGPU + TSL in #threejs. I’ve always loved Predator. The first time I saw the Predator cloak effect, I knew I wanted to learn visual effects and make them part of my professional life. Turn the sound on — it makes the experience much more fun 😅 This is also a great exercise if you’re learning TSL and want to experiment with glass, dispersion, IOR, and custom shaders. Both the classic shader version and the new TSL version are included in the repo so you can compare the approaches side by side. Hope it’s useful. Don’t forget to ⭐ the GitHub repo! #r3f #threejsJourney
2:07

Live Link: Source Code: While updating my website, I found an old project that was broken and decided to bring it back to life using WebGPU + TSL in #threejs. I’ve always loved Predator. The first time I saw the Predator cloak effect, I knew I wanted to learn visual effects and make them part of my professional life. Turn the sound on — it makes the experience much more fun 😅 This is also a great exercise if you’re learning TSL and want to experiment with glass, dispersion, IOR, and custom shaders. Both the classic shader version and the new TSL version are included in the repo so you can compare the approaches side by side. Hope it’s useful. Don’t forget to ⭐ the GitHub repo! #r3f #threejsJourney

Anderson Mancini

13,984 Aufrufe • vor 1 Monat

Sunday v0: a web-based 3D Jenga game. Everything is procedurally generated: the structure, the bricks, the wooden texture, the sounds, the carved-in ▲ on the top pieces. I tweaked the physics enough that it feels as fun and frustrating as the real thing 😂 Cool technical detail: v0 loaded a R3F (react-three-fiber) Skill automatically when I first asked for a 3d game. Anecdotally it seems that it totally nailed how to work with 3D!
1:10

Sunday v0: a web-based 3D Jenga game. Everything is procedurally generated: the structure, the bricks, the wooden texture, the sounds, the carved-in ▲ on the top pieces. I tweaked the physics enough that it feels as fun and frustrating as the real thing 😂 Cool technical detail: v0 loaded a R3F (react-three-fiber) Skill automatically when I first asked for a 3d game. Anecdotally it seems that it totally nailed how to work with 3D!

Guillermo Rauch

52,937 Aufrufe • vor 5 Monaten

I just turned 37 today and started this journey when I was 30. After years of building the engine with 💕 and optimizing it, this is the final gameplay running on #webgl with #threejs After converting Jamir from WebGL to WebGPU, I hope to release the X3JS, built on top of Jamir's game engine, in 2025, initially for creating FPP and TPP games, and make it available for everyone. New version will be upcoming in a few days, btw! 🥳 #gamedev #gamedevelopment
9:27

I just turned 37 today and started this journey when I was 30. After years of building the engine with 💕 and optimizing it, this is the final gameplay running on #webgl with #threejs After converting Jamir from WebGL to WebGPU, I hope to release the X3JS, built on top of Jamir's game engine, in 2025, initially for creating FPP and TPP games, and make it available for everyone. New version will be upcoming in a few days, btw! 🥳 #gamedev #gamedevelopment

mert

31,651 Aufrufe • vor 1 Jahr

I've been working with caustics for a while in #webGPU and one of the issues I find is that it's hard to handle caustics for complex scenes. It's easy for planes, you can save photons in a texture using either compute and atomics, or additive blending with the rasteriser. 🧵
1:03

I've been working with caustics for a while in #webGPU and one of the issues I find is that it's hard to handle caustics for complex scenes. It's easy for planes, you can save photons in a texture using either compute and atomics, or additive blending with the rasteriser. 🧵

Hat

17,985 Aufrufe • vor 1 Jahr

My #threejs Lumen Decor Studio is getting an update. It will now support more settings and more complex scenes, thanks to the latest library updates. I'm combining #WebGPU SSGI with light probes, giving us the best of both worlds. Real-time light bounces via SSGI, and when the camera stops moving, I bake probes to measure the average light in the room, generating fill lights that paint an envmap. I also created a denoiser for SSGI, avoiding the previous blur that discarded the AO. Now, everything is lighter, a little noisier, but it complements indirect light well. Live link coming soon. BTW: The video is on my YouTube Channel in case you want to watch it in a higher resolution: #creativecoding #archiviz #WebGPU
2:39

My #threejs Lumen Decor Studio is getting an update. It will now support more settings and more complex scenes, thanks to the latest library updates. I'm combining #WebGPU SSGI with light probes, giving us the best of both worlds. Real-time light bounces via SSGI, and when the camera stops moving, I bake probes to measure the average light in the room, generating fill lights that paint an envmap. I also created a denoiser for SSGI, avoiding the previous blur that discarded the AO. Now, everything is lighter, a little noisier, but it complements indirect light well. Live link coming soon. BTW: The video is on my YouTube Channel in case you want to watch it in a higher resolution: #creativecoding #archiviz #WebGPU

Anderson Mancini

29,926 Aufrufe • vor 3 Monaten

Two new #threejs projects on the way 😍 Working on my own gem renderer with a custom refraction material in TSL for #WebGPU, combining Screen Space Reflections + SSGTAO for superior results, as this allows diamonds to generate reflections on the metal mesh. The performance is incredible, even on gems with over 200 diamonds. This time, without any additional libraries. Just React Three Fiber and a lot of magic with custom shaders in TSL. GemGPU™ will also come with a very minimalist gem and metal customization panel that hides and lets the jewelry be the star. I also created a beautiful new stats panel that completely hides in the scene when not needed. It provides relevant optimization information, a performance gauge, summary and expanded modes, and day/night toggle. In the video, you can also see SSGI in action, with a pearl that reflects, in real time, all the objects in the scene, just as the objects in the scene reflect the pearl. It's magical. There are still a few things to fix, but I'll share the live link soon. Stay tuned.
3:43

Two new #threejs projects on the way 😍 Working on my own gem renderer with a custom refraction material in TSL for #WebGPU, combining Screen Space Reflections + SSGTAO for superior results, as this allows diamonds to generate reflections on the metal mesh. The performance is incredible, even on gems with over 200 diamonds. This time, without any additional libraries. Just React Three Fiber and a lot of magic with custom shaders in TSL. GemGPU™ will also come with a very minimalist gem and metal customization panel that hides and lets the jewelry be the star. I also created a beautiful new stats panel that completely hides in the scene when not needed. It provides relevant optimization information, a performance gauge, summary and expanded modes, and day/night toggle. In the video, you can also see SSGI in action, with a pearl that reflects, in real time, all the objects in the scene, just as the objects in the scene reflect the pearl. It's magical. There are still a few things to fix, but I'll share the live link soon. Stay tuned.

Anderson Mancini

12,113 Aufrufe • vor 7 Monaten

I'm making real progress with Opus 5, Fable and Sol on a very high value tool that I'm going to opensource. A Three.js webgpu based terrain generator with an API for agents to use as well. It's called Ekigar, from the sumerian E-ki-gar meaning "Temple that places the earth". I will be releasing it on my git once it gets to a good enough first state! Here's a preview of how it's going. So far, it's EXTREMELY fast, much better performance than industry standards for terrain generation.
0:22

I'm making real progress with Opus 5, Fable and Sol on a very high value tool that I'm going to opensource. A Three.js webgpu based terrain generator with an API for agents to use as well. It's called Ekigar, from the sumerian E-ki-gar meaning "Temple that places the earth". I will be releasing it on my git once it gets to a good enough first state! Here's a preview of how it's going. So far, it's EXTREMELY fast, much better performance than industry standards for terrain generation.

Utah teapot 🫖

17,582 Aufrufe • vor 1 Monat

I can finally announce the project I've been working on with Joce ! Fondant is building a new app that brings avatars and vtubing to Web. Multiplayer lobbies for vtuber streamer collabs or just hangouts with friends, as well as character customization tools building up to a full creator. We are using a WebGL and WebGPU techstack, so part of the point is to provide a cross-platform alternative to the current Unity based app ecosystem, and also to build tools that people can use to create or modify characters without going through a DCC (Blender, Maya, etc). For now we're starting with the basics: multiplayer lobbies, VRM support, and some tools like merging accessories into existing VRMs in the quoted post, and transferring Custom Vertex Normals from proxy meshes. My role is stylized shaders and procedural character creation. I've been working on NPR Shaders and tools to help build and customize 3D anime characters in Blender for years. With WebGPU, we can bring it into Web. My hope is to build a full character customization system for the Web with next gen toon shaders, and also a matching set of tools in Blender for serious content creators. But it is early days still, and there's a lot to be done! Here's the latest WIP of the rig for fitting proxy meshes to new faces.
2:14

I can finally announce the project I've been working on with Joce ! Fondant is building a new app that brings avatars and vtubing to Web. Multiplayer lobbies for vtuber streamer collabs or just hangouts with friends, as well as character customization tools building up to a full creator. We are using a WebGL and WebGPU techstack, so part of the point is to provide a cross-platform alternative to the current Unity based app ecosystem, and also to build tools that people can use to create or modify characters without going through a DCC (Blender, Maya, etc). For now we're starting with the basics: multiplayer lobbies, VRM support, and some tools like merging accessories into existing VRMs in the quoted post, and transferring Custom Vertex Normals from proxy meshes. My role is stylized shaders and procedural character creation. I've been working on NPR Shaders and tools to help build and customize 3D anime characters in Blender for years. With WebGPU, we can bring it into Web. My hope is to build a full character customization system for the Web with next gen toon shaders, and also a matching set of tools in Blender for serious content creators. But it is early days still, and there's a lot to be done! Here's the latest WIP of the rig for fitting proxy meshes to new faces.

aVersionOfReality

65,803 Aufrufe • vor 1 Jahr

Took Grok 4.6 out for a spin this weekend and built this horde shooter prototype on ThreeJS. It is a big step up from Grok 4.5! I've always wanted to try building a horde shooter game with thousands of enemies onscreen and used Grok 4.6 for pretty much everything (including UI, vfx, and even the sfx!), except the 3D models for the characters, which were made and rigged with Meshy. I'm also amazed that ThreeJS with WebGPU can really handle thousands of enemies onscreen at the same time, though I think I pushed the limit here with Depth of Field and some other fancy shaders. Very fun!
0:48

Took Grok 4.6 out for a spin this weekend and built this horde shooter prototype on ThreeJS. It is a big step up from Grok 4.5! I've always wanted to try building a horde shooter game with thousands of enemies onscreen and used Grok 4.6 for pretty much everything (including UI, vfx, and even the sfx!), except the 3D models for the characters, which were made and rigged with Meshy. I'm also amazed that ThreeJS with WebGPU can really handle thousands of enemies onscreen at the same time, though I think I pushed the limit here with Depth of Field and some other fancy shaders. Very fun!

Danny Limanseta

65,105 Aufrufe • vor 1 Monat

Opus 4.6 vs Gemini 3 Pro (3/9) prompt: Build a premium interactive isometric 3D cozy room using Vite + React + Three.js (react-three-fiber/drei), with all objects modeled in code (no external assets) and subtle ambient animations. Gemini looks good on initial impression but I feel like I have way more to work with opus here (opus also did light/dark mode and took a quarter of the time to make it).
0:26

Opus 4.6 vs Gemini 3 Pro (3/9) prompt: Build a premium interactive isometric 3D cozy room using Vite + React + Three.js (react-three-fiber/drei), with all objects modeled in code (no external assets) and subtle ambient animations. Gemini looks good on initial impression but I feel like I have way more to work with opus here (opus also did light/dark mode and took a quarter of the time to make it).

Dev Ed

77,206 Aufrufe • vor 7 Monaten

I have a major announcement! 🎉 Today, I'm launching NPM Studio for WebStorm and all JetBrains IDEs. This will change the way you work with NPM packages forever. I built NPM Studio for developers who want to get work done without wasting time in the terminal. It brings package management and npm scripts directly into your IDE so you can focus on building great products. This is our version 1.0.14, and it would make me the happiest person if you tried it out by searching for "NPM Studio" in your JetBrains IDE or by clicking this link: I really appreciate your support and look forward to hearing your feedback!
1:53

I have a major announcement! 🎉 Today, I'm launching NPM Studio for WebStorm and all JetBrains IDEs. This will change the way you work with NPM packages forever. I built NPM Studio for developers who want to get work done without wasting time in the terminal. It brings package management and npm scripts directly into your IDE so you can focus on building great products. This is our version 1.0.14, and it would make me the happiest person if you tried it out by searching for "NPM Studio" in your JetBrains IDE or by clicking this link: I really appreciate your support and look forward to hearing your feedback!

Ebenezer Don 🐘

16,240 Aufrufe • vor 1 Jahr

This isn't your grandparents' fiber. You train hard. You focus on recovery. You get your protein. But if your gut is not supported, your results will not match your effort. Over 95% of Americans are deficient in fiber. Fiber is poised to be the next protein, because the science and the impact on long-term performance are undeniable. Fiber needs to be understood as more than digestive relief - It is a foundational pillar for performance. That is why we built live.momentous Fiber+ together. The fantastic thing about working with Momentous on Fiber+ is building fiber that people actually want to take and a complete fiber that doesn’t just terminate bloating and improve digestion, it rebuilds your gut bacteria. No gimmicks. No nonsense. No orange sludge. Momentous Fiber+ is a first of its kind 3-in-1 formula, designed to activate gut health as the foundation for improved performance. It’s made with both soluble and insoluble fiber along with a prebiotic resistant starch, engineered to feed healthy gut bacteria and support the digestive system from start to finish. If you’re committed to Performance for Life™ and want results that match your effort, prioritize your gut. Gut Health Isn’t Guesswork. It’s Fiber+.
1:03

This isn't your grandparents' fiber. You train hard. You focus on recovery. You get your protein. But if your gut is not supported, your results will not match your effort. Over 95% of Americans are deficient in fiber. Fiber is poised to be the next protein, because the science and the impact on long-term performance are undeniable. Fiber needs to be understood as more than digestive relief - It is a foundational pillar for performance. That is why we built live.momentous Fiber+ together. The fantastic thing about working with Momentous on Fiber+ is building fiber that people actually want to take and a complete fiber that doesn’t just terminate bloating and improve digestion, it rebuilds your gut bacteria. No gimmicks. No nonsense. No orange sludge. Momentous Fiber+ is a first of its kind 3-in-1 formula, designed to activate gut health as the foundation for improved performance. It’s made with both soluble and insoluble fiber along with a prebiotic resistant starch, engineered to feed healthy gut bacteria and support the digestive system from start to finish. If you’re committed to Performance for Life™ and want results that match your effort, prioritize your gut. Gut Health Isn’t Guesswork. It’s Fiber+.

Arnold Schwarzenegger

718,416 Aufrufe • vor 6 Monaten

Codex has become a real game engine... If you take the time to make it become one. You can do EVERYTHING in it. And I think I've cracked the perfect custom UX? I'd like to show you how I use it. See video below 4 steps: - Create a custom tool you need, like one to generate new buildings that matches you game art direction - Ask Codex to open this tool in a worktree (important) - Attach the browser view of your tool in the Thread - Use pinned thread to have easy access to the tool And there you go: you have what I call a "codex-augmented" tool, which it's incredibly powerful because - the tool will speed up your development immensely AND also: - you can improve the tool as you use it with codex For example, let's say I want to add a new button to my 3D building gen tool so I can generate a thumbnail of the 3D building. - I click on "Building Lab" - I prompt Codex "add a button to generate thumbnails" - I have my new button - I can use the tool right away in the pinned Thread You can then use the /yeet skill to commit, push and create a PR with the changes you made to your tool. I have tools for everything - To manage my tasks in Linear - To do content / social media / steam marketing - To localize the game in 9 languages - To manage sounds, musics and voice lines - To generate and fine tune buildings - To create and animate procedural zombies - To tweak environnement/decor and map design - To manage my analytics - To simulate late game perf I'll be honest it's incredibly powerful and easy!
0:36

Codex has become a real game engine... If you take the time to make it become one. You can do EVERYTHING in it. And I think I've cracked the perfect custom UX? I'd like to show you how I use it. See video below 4 steps: - Create a custom tool you need, like one to generate new buildings that matches you game art direction - Ask Codex to open this tool in a worktree (important) - Attach the browser view of your tool in the Thread - Use pinned thread to have easy access to the tool And there you go: you have what I call a "codex-augmented" tool, which it's incredibly powerful because - the tool will speed up your development immensely AND also: - you can improve the tool as you use it with codex For example, let's say I want to add a new button to my 3D building gen tool so I can generate a thumbnail of the 3D building. - I click on "Building Lab" - I prompt Codex "add a button to generate thumbnails" - I have my new button - I can use the tool right away in the pinned Thread You can then use the /yeet skill to commit, push and create a PR with the changes you made to your tool. I have tools for everything - To manage my tasks in Linear - To do content / social media / steam marketing - To localize the game in 9 languages - To manage sounds, musics and voice lines - To generate and fine tune buildings - To create and animate procedural zombies - To tweak environnement/decor and map design - To manage my analytics - To simulate late game perf I'll be honest it's incredibly powerful and easy!

Nicolas Zullo

79,848 Aufrufe • vor 25 Tagen

I’ve built an order execution tool specifically for IB users. The open-source code is available on GitHub, but since most traders probably prefer something simple and ready to use, I also made an executable (.exe) version and uploaded it to Google Drive. This order execution tool can automatically retrieve your account balance and calculate position size based on your specified risk %. You can choose to set the stop loss at the LOD (low of the day) or enter it manually. The tool automatically places stop orders according to your stop level, one stop or 3 stops Why three stop orders? You can refer to Jeff Sun, CFTe Jeff Sun’s article for the reasoning behind this risk management approach. It also comes with customizable hotkeys for quick and efficient order placement. In the demo video, I used a virtual keyboard to show you how it works in real time. Lastly, this tool is completely free to use. If you find it helpful, you’re welcome to buy me a coffee — your support is what keeps me motivated to keep improving and adding new features. I’ve recorded a demo video showing how to set it up and use it — it’s already posted on X for reference. Github: Googledrive:
2:12

I’ve built an order execution tool specifically for IB users. The open-source code is available on GitHub, but since most traders probably prefer something simple and ready to use, I also made an executable (.exe) version and uploaded it to Google Drive. This order execution tool can automatically retrieve your account balance and calculate position size based on your specified risk %. You can choose to set the stop loss at the LOD (low of the day) or enter it manually. The tool automatically places stop orders according to your stop level, one stop or 3 stops Why three stop orders? You can refer to Jeff Sun, CFTe Jeff Sun’s article for the reasoning behind this risk management approach. It also comes with customizable hotkeys for quick and efficient order placement. In the demo video, I used a virtual keyboard to show you how it works in real time. Lastly, this tool is completely free to use. If you find it helpful, you’re welcome to buy me a coffee — your support is what keeps me motivated to keep improving and adding new features. I’ve recorded a demo video showing how to set it up and use it — it’s already posted on X for reference. Github: Googledrive:

Will Hu

29,715 Aufrufe • vor 10 Monaten