Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

New WebGPU Glass Material is almost ready! It will be available for Three.js and Poimandres React Three Fiber. Lots of customization; it comes with a very beautiful and handy control panel. Live link and source code will be available on Monday 😊 #threejsJourney #creativecoding #webgpu

Andersonmancini's profile picture

Anderson Mancini

14,864 subscribers

17,951 görüntüleme • 8 gün önce •via X (Twitter)

#threejsJourney#creativecoding
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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

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

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
2:39

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

95,861 görüntüleme • 14 gün önce

🚀 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
0:43

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

#iOS26 Apple Liquid Glass via #threejs and React Three Fiber looks sick 🤩. As I can see, it shows some readability issues, but those can be easily addressed by adjusting the roughness, metalness, or material, depending on what is underneath. I'm sure Apple will fix it before launch. I will be releasing the source code soon. Do you want it? Please sign up for my newsletter: #creativecoding #WWDC25
1:26

#iOS26 Apple Liquid Glass via #threejs and React Three Fiber looks sick 🤩. As I can see, it shows some readability issues, but those can be easily addressed by adjusting the roughness, metalness, or material, depending on what is underneath. I'm sure Apple will fix it before launch. I will be releasing the source code soon. Do you want it? Please sign up for my newsletter: #creativecoding #WWDC25

Anderson Mancini

19,991 görüntüleme • 1 yıl önce

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

<mesh> <FakeGlowMaterial /> </mesh> A new component is coming. A very simple, easy-to-use, fake glow material. This can create a glow around the mesh without any post-processing. Available soon for vanilla #threejs and #react three fiber 😍 #threejsJourney
0:50

<mesh> <FakeGlowMaterial /> </mesh> A new component is coming. A very simple, easy-to-use, fake glow material. This can create a glow around the mesh without any post-processing. Available soon for vanilla #threejs and #react three fiber 😍 #threejsJourney

Anderson Mancini

26,380 görüntüleme • 2 yıl önce

My water experiment in #webxr using #threejs is live. If you have a WebXR-compatible device, you can access it here: For now, the experience is optimized for #MetaQuest3. I plan to add support for more devices and improve performance. The source code review video will be available soon on my YouTube channel. I hope you like it 😊 #threejsJourney #ar #vr
0:51

My water experiment in #webxr using #threejs is live. If you have a WebXR-compatible device, you can access it here: For now, the experience is optimized for #MetaQuest3. I plan to add support for more devices and improve performance. The source code review video will be available soon on my YouTube channel. I hope you like it 😊 #threejsJourney #ar #vr

Anderson Mancini

11,006 görüntüleme • 1 yıl önce

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

Quest Browser 146.o now ships with experimental support for WebGPU in #WebXR. Turn on "webXR experimental features" in "chrome://flags" and the API will be available. Feedback welcome!
0:34

Quest Browser 146.o now ships with experimental support for WebGPU in #WebXR. Turn on "webXR experimental features" in "chrome://flags" and the API will be available. Feedback welcome!

@[email protected]

18,258 görüntüleme • 3 ay önce

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

⚡️My first #Threejs course with React Three Fiber will be available soon 😬. Using the scene that ☄︎ and I created together, the shorter version will be FREE on YouTube. 💸The complete will have 2h30 of content on Udemy, from design, through blender and coding. Stay tuned 🫶🏻
0:48

⚡️My first #Threejs course with React Three Fiber will be available soon 😬. Using the scene that ☄︎ and I created together, the shorter version will be FREE on YouTube. 💸The complete will have 2h30 of content on Udemy, from design, through blender and coding. Stay tuned 🫶🏻

Anderson Mancini

65,786 görüntüleme • 3 yıl önce

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

Three.js Water Pro v3.1.0 is now live! - Water appearance on WebGL/WebGPU is now 100% unified - Improved persistent foam better captures details on swells, waves and ripples - Plus lots of important bug fixes 🪳🔨 Try it now! 👉🏻
1:00

Three.js Water Pro v3.1.0 is now live! - Water appearance on WebGL/WebGPU is now 100% unified - Improved persistent foam better captures details on swells, waves and ripples - Plus lots of important bug fixes 🪳🔨 Try it now! 👉🏻

Dan Greenheck

40,073 görüntüleme • 1 ay önce

Morph sheet (WIP) inspired by Family. w/ React Native Expo + Mo Gorhom's bottom sheet The source code and an article will be available on @landingcomps (
0:29

Morph sheet (WIP) inspired by Family. w/ React Native Expo + Mo Gorhom's bottom sheet The source code and an article will be available on @landingcomps (

Erencan Arica

14,543 görüntüleme • 9 ay önce

This Deliver Mail on Tiny Colorful Planet build with Three.js WebGL is a website from . it is so cool, it blows my mind how beautiful and smooth it is.🙌🏻 It’s really well executed, and I highly recommend visiting the website and experiencing it yourself. If there was a “Showcase of the Day,” this would definitely be it. 🔥 #threejs #3D #webdesign #webgl #webgpu
2:08

This Deliver Mail on Tiny Colorful Planet build with Three.js WebGL is a website from . it is so cool, it blows my mind how beautiful and smooth it is.🙌🏻 It’s really well executed, and I highly recommend visiting the website and experiencing it yourself. If there was a “Showcase of the Day,” this would definitely be it. 🔥 #threejs #3D #webdesign #webgl #webgpu

Three.js Resources

11,249 görüntüleme • 10 ay önce

The second wrap, this time with a cotton weft is finished. Lots of ends to twist, wet finishing and a press and then it will be available in my shop.
0:51

The second wrap, this time with a cotton weft is finished. Lots of ends to twist, wet finishing and a press and then it will be available in my shop.

Nell the Weaver 🎗️ Неля ткаля #Fella 🇺🇦 

23,085 görüntüleme • 6 ay önce

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

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
2:21

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

The Three.js GameDev course will be available soon, mocking up a new site with a little demo on it. Whipped up a trigger and animation system, which will eventually make their way into the course. What should trigger #3 do?
0:30

The Three.js GameDev course will be available soon, mocking up a new site with a little demo on it. Whipped up a trigger and animation system, which will eventually make their way into the course. What should trigger #3 do?

Simon

48,803 görüntüleme • 1 yıl önce