Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

My new #threejs project is live😍. Lumen Decor features WebGPU SSGI+SSR, showcasing how sunlight can influence decoration. Everything you see renders in real-time and weighs 4MB. #creativecoding #webgpu #tsl

Anderson Mancini

14,882 subscribers

68,341 views • 9 months ago •via X (Twitter)

#threejs #creativecoding #webgpu #tsl

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

New update to my #threejs Lumen Decor Studio project. Color selection behavior is ready🤩. Thanks to real-time global illumination, colors now blend naturally with sunlight, creating beautiful bounced colors everywhere. Next step: Live link #creativecoding #tsl #rf3 #webgpu

New update to my #threejs Lumen Decor Studio project. Color selection behavior is ready🤩. Thanks to real-time global illumination, colors now blend naturally with sunlight, creating beautiful bounced colors everywhere. Next step: Live link #creativecoding #tsl #rf3 #webgpu

Anderson Mancini

24,909 views • 10 months ago

Update on my new #threejs project, Lumen Decor Studio. With Screen Space Global Illumination and Screen Space Reflection in action, clients can visualize, in real time, how light can influence a room's decor and how the chosen colors blend with the light to create a cozy atmosphere. Next step: color selection behavior😍 Live link soon #creativecoding #tsl #rf3 #webgpu #threejsJourney

Update on my new #threejs project, Lumen Decor Studio. With Screen Space Global Illumination and Screen Space Reflection in action, clients can visualize, in real time, how light can influence a room's decor and how the chosen colors blend with the light to create a cozy atmosphere. Next step: color selection behavior😍 Live link soon #creativecoding #tsl #rf3 #webgpu #threejsJourney

Anderson Mancini

149,859 views • 10 months ago

My #threejs Lumen Decor Studio is getting an update. Added a denoiser to the SSGI pass + better AO. I love how light bounces cascade on objects. It looks like Blender Cycles for the Browser 😍. Everything you see is rendered in real time and loads only 6.7 MB. Rendering SSGI + AO + SSR + Denoisers + Probes. You can manipulate objects, colors, sun, and sky all in real time. No baking at all. Live link soon.

My #threejs Lumen Decor Studio is getting an update. Added a denoiser to the SSGI pass + better AO. I love how light bounces cascade on objects. It looks like Blender Cycles for the Browser 😍. Everything you see is rendered in real time and loads only 6.7 MB. Rendering SSGI + AO + SSR + Denoisers + Probes. You can manipulate objects, colors, sun, and sky all in real time. No baking at all. Live link soon.

Anderson Mancini

23,295 views • 1 month ago

A little work in progress on my new #threejs project showing how Screen Space Global Illumination also works wonders in open scenes. Here, I'm using SSGI with CSM, SSS (screen space shadows), and a custom atmospheric fog for more realism. Adjusting the time of day in a scene like this is like a dream come true 😍. More details soon. #webgpu #tsl #creativecoding #threejsJourney

A little work in progress on my new #threejs project showing how Screen Space Global Illumination also works wonders in open scenes. Here, I'm using SSGI with CSM, SSS (screen space shadows), and a custom atmospheric fog for more realism. Adjusting the time of day in a scene like this is like a dream come true 😍. More details soon. #webgpu #tsl #creativecoding #threejsJourney

Anderson Mancini

11,017 views • 8 months ago

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

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 views • 2 months ago

New features in the #threejs architecture visualization project for Planpoint. A neighborhood surroundings with points of interest integrated into the map, very convenient for placing the building in the context of the city. We also have a new unit search engine with filters. Units can also be inspected with a new details panel, showing more information about each unit. And since everything renders in real time, it's also possible to see the unit inside, simulating sunlight at different times of the year. And incredibly, everything you see in this video loads less than 6MB 🤯 #webgpu #creativecoding

New features in the #threejs architecture visualization project for Planpoint. A neighborhood surroundings with points of interest integrated into the map, very convenient for placing the building in the context of the city. We also have a new unit search engine with filters. Units can also be inspected with a new details panel, showing more information about each unit. And since everything renders in real time, it's also possible to see the unit inside, simulating sunlight at different times of the year. And incredibly, everything you see in this video loads less than 6MB 🤯 #webgpu #creativecoding

Anderson Mancini

31,036 views • 7 months 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

🚀 #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

28,056 views • 10 months ago

Using #threejs with WebGPU and TSL to build a light painting tool. It's not like watercolor, but I like how the paint dries over time. It's quite relaxing. Next, I'll enable "mesh painting" mode. Let's see how it looks. #creativecoding

Using #threejs with WebGPU and TSL to build a light painting tool. It's not like watercolor, but I like how the paint dries over time. It's quite relaxing. Next, I'll enable "mesh painting" mode. Let's see how it looks. #creativecoding

Anderson Mancini

26,897 views • 6 months ago

I’ve opened up many of the TSL exercises to everyone! Try out some WebGPU shaders and fiddle with them, all in the browser. Pick an exercise and see if you can match the output. Link: #threejs #webgpu

I’ve opened up many of the TSL exercises to everyone! Try out some WebGPU shaders and fiddle with them, all in the browser. Pick an exercise and see if you can match the output. Link: #threejs #webgpu

Simon

11,095 views • 9 months ago

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

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 views • 1 month 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 ⬇️

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 • 7 months ago

Live link: Built to showcase what's possible with real-time WebGPU rendering using #threejs. Just a 6.3 MB download, yet the lighting looks baked—until you grab the sun and watch everything update in real time. I hope you like it 🤗

Live link: Built to showcase what's possible with real-time WebGPU rendering using #threejs. Just a 6.3 MB download, yet the lighting looks baked—until you grab the sun and watch everything update in real time. I hope you like it 🤗

Anderson Mancini

128,319 views • 1 month ago

Cyberpunk-ish ⚡️ Maybe not an entire city…but at least one rainy alley built with #threejs + WebGPU that weighs only 15 MB. Live link: This is also a sneak peek at some of the techniques that Sunag and I will be covering during our workshop at Three.js Conf Paris. More on that below 🤗 I hope you like it #WebGPU #creativecoding #threejsJourney

Cyberpunk-ish ⚡️ Maybe not an entire city…but at least one rainy alley built with #threejs + WebGPU that weighs only 15 MB. Live link: This is also a sneak peek at some of the techniques that Sunag and I will be covering during our workshop at Three.js Conf Paris. More on that below 🤗 I hope you like it #WebGPU #creativecoding #threejsJourney

Anderson Mancini

96,779 views • 28 days 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.

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

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,525 views • 1 year ago

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!

Renaud

22,151 views • 10 months 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

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,257 views • 1 year ago

Live link: My new #archiviz project using #threejs is live. A realistic scene with 25,000 trees, various post-processing effects, running at 60 FPS, less than 10 MB download 😊. Screen space global illumination makes everything more realistic. Want to know more? Follow the thread👇🏻 #webgpu #threejsJourney

Live link: My new #archiviz project using #threejs is live. A realistic scene with 25,000 trees, various post-processing effects, running at 60 FPS, less than 10 MB download 😊. Screen space global illumination makes everything more realistic. Want to know more? Follow the thread👇🏻 #webgpu #threejsJourney

Anderson Mancini

17,753 views • 8 months ago

🚀 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 WebGL and WebGPU ✅ Modern and customizable UI ✅ Lightweight and easy to integrate ✅ Built specifically for React Three Fiber My goal is to turn r3f-webgpu-perf into more than just a metrics dashboard. I want it to become a learning tool that provides real-time optimization suggestions based on the techniques I’ve developed while building hundreds of interactive 3D projects over the last two decades. A vanilla Three.js version is also planned. If you’re building with Three.js, React Three Fiber, or WebGPU, I’d love for you to try it and share your feedback. ⭐ GitHub: 📦 NPM: Every GitHub star helps make the tool better for the entire community. #threejs #creativecoding #webgpu #r3f

🚀 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 WebGL and WebGPU ✅ Modern and customizable UI ✅ Lightweight and easy to integrate ✅ Built specifically for React Three Fiber My goal is to turn r3f-webgpu-perf into more than just a metrics dashboard. I want it to become a learning tool that provides real-time optimization suggestions based on the techniques I’ve developed while building hundreds of interactive 3D projects over the last two decades. A vanilla Three.js version is also planned. If you’re building with Three.js, React Three Fiber, or WebGPU, I’d love for you to try it and share your feedback. ⭐ GitHub: 📦 NPM: Every GitHub star helps make the tool better for the entire community. #threejs #creativecoding #webgpu #r3f

Anderson Mancini

23,984 views • 2 months ago

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

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,714 views • 24 days ago