Загрузка видео...

Не удалось загрузить видео

На главную

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

Andersonmancini's profile picture

Anderson Mancini

13,890 subscribers

12,472 просмотров • 1 год назад •via X (Twitter)

ИгрыНаука и технологииОбразование#threejs#r3f#WebGPU#TSL
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 11

Фото профиля Ebe ✦ Creative Dev
Ebe ✦ Creative Dev1 год назад

This looks so cool!! Need the code haha.

Фото профиля Anderson Mancini
Anderson Mancini1 год назад

Thank you buddy eheh. I'm still working on it but I plan to share a tutorial/breakdown soon hehe

Фото профиля Rainmaker
Rainmaker2 лет назад

Which Machine Learning model delivers stronger trading results? Check out this free Substack post where I compare several powerful models that beat the market and show yearly returns of over 20%.

Фото профиля Simon
Simon1 год назад

Ooooh

Фото профиля Carolina Aiazzi
Carolina Aiazzi1 год назад

@sea3dformat Very cool🤩

Фото профиля Anderson Mancini
Anderson Mancini1 год назад

@sea3dformat Thank you 🤩

Фото профиля MrBodean
MrBodean1 год назад

Beautiful

Фото профиля Anderson Mancini
Anderson Mancini1 год назад

Thank you very much 🙏🏻😊

Фото профиля rherault
rherault1 год назад

Awesome 😍 Need something similar for a big project 👀

Фото профиля Anderson Mancini
Anderson Mancini1 год назад

Thank you mate hehehe. Let's talk for sure 😊

Фото профиля Evert Junior
Evert Junior1 год назад

@nicolettiFPS

Похожие видео

🚀 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

22,671 просмотров • 22 дней назад

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 просмотров • 1 год назад

🚀 #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,900 просмотров • 8 месяцев назад

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 просмотров • 1 год назад

Have a play with my new interactive Koi carp pond scene! 🐟🐟🐟 ➡️ Heightfield water sim, real-time refractions and a generative night sky that's different each time. Built with #threejs and #r3f #creativecoding #javascript #webgl
0:29

Have a play with my new interactive Koi carp pond scene! 🐟🐟🐟 ➡️ Heightfield water sim, real-time refractions and a generative night sky that's different each time. Built with #threejs and #r3f #creativecoding #javascript #webgl

sᴄᴏᴛᴛ ᴅᴀʀʙʏ

111,174 просмотров • 3 лет назад

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

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 просмотров • 7 месяцев назад

It's been a while... not much news, but I'm back working on the Macro March animation. Have this older WIP to show that I'm still working on it. And more already available to my paid supporter.
2:04

Sensitive content

It's been a while... not much news, but I'm back working on the Macro March animation. Have this older WIP to show that I'm still working on it. And more already available to my paid supporter.

ModnarYug

29,995 просмотров • 1 год назад

Built this procedural prop scatter system for a larger personal project of mine 👀 Loving working in WebGPU with all the new Postprocessing effects! #threejs #r3f
0:22

Built this procedural prop scatter system for a larger personal project of mine 👀 Loving working in WebGPU with all the new Postprocessing effects! #threejs #r3f

Faraz

33,488 просмотров • 10 дней назад

New #threejs project live using #r3f, GSAP, and a lot of #glsl shader magic for My Muscle Chef 😍. ⚡️Llive link: I will publish a more detailed tutorial teaching some of the tricks as soon as possible 😬. Hope you like it! #threejsJourney
1:23

New #threejs project live using #r3f, GSAP, and a lot of #glsl shader magic for My Muscle Chef 😍. ⚡️Llive link: I will publish a more detailed tutorial teaching some of the tricks as soon as possible 😬. Hope you like it! #threejsJourney

Anderson Mancini

32,118 просмотров • 2 лет назад

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 просмотров • 5 месяцев назад

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 просмотров • 5 месяцев назад

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 просмотров • 4 месяцев назад

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

43,705 просмотров • 3 дней назад

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

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 просмотров • 5 месяцев назад

I'm thinking Chapter 2 will have more water... 🌊😁 Just experimenting with this stuff but it's running quite well already and I'm pretty excited to make missions with it.
0:22

I'm thinking Chapter 2 will have more water... 🌊😁 Just experimenting with this stuff but it's running quite well already and I'm pretty excited to make missions with it.

Colin Karpfinger

14,899 просмотров • 5 месяцев назад

Realistic Water Simulation with #threejs is live: Now, you can configure scenes, objects, colors, and light positions. You can also dive to see the effects from underwater 🌊💧. It works great on mobile 🤩. The breakdown video will be on my YouTube channel soon. Be sure to subscribe so you don't miss it: Thanks again, Evan Wallace, for the inspiration 🙏🏻 #threejsjourney #creativecoding #r3f
2:32

Realistic Water Simulation with #threejs is live: Now, you can configure scenes, objects, colors, and light positions. You can also dive to see the effects from underwater 🌊💧. It works great on mobile 🤩. The breakdown video will be on my YouTube channel soon. Be sure to subscribe so you don't miss it: Thanks again, Evan Wallace, for the inspiration 🙏🏻 #threejsjourney #creativecoding #r3f

Anderson Mancini

30,275 просмотров • 1 год назад

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 просмотров • 1 год назад

My Holographic Material for #threejs / #r3f is ready😍. It is very easy to use and with good documentation. ⚡️You can download it now The vanilla version is coming soon. Please, leave a star on GitHub if you can🙏🏻. #threejsJourney
0:42

My Holographic Material for #threejs / #r3f is ready😍. It is very easy to use and with good documentation. ⚡️You can download it now The vanilla version is coming soon. Please, leave a star on GitHub if you can🙏🏻. #threejsJourney

Anderson Mancini

25,601 просмотров • 2 лет назад

Got my hands on the new SoftShadow that N8 Programs and ☄︎ are working on for R3F Feels so sooooft👼 #threejs #webGL #r3f
0:22

Got my hands on the new SoftShadow that N8 Programs and ☄︎ are working on for R3F Feels so sooooft👼 #threejs #webGL #r3f

Bruno Simon

40,604 просмотров • 3 лет назад

I want the President to be wildly successful. I'm going to be wind at his back on things like inflation. I want him to bring peace around the world. I want to deal with the border situation, and I'm really there for him. I want to be helpful. And, Mr. President, from time to time, I'm going to disagree with you. And it will be respectful. And I think when I disagree with you, it will be helpful. And I hope you'll listen to me. More from This Week w/Jonathan Karl
0:28

I want the President to be wildly successful. I'm going to be wind at his back on things like inflation. I want him to bring peace around the world. I want to deal with the border situation, and I'm really there for him. I want to be helpful. And, Mr. President, from time to time, I'm going to disagree with you. And it will be respectful. And I think when I disagree with you, it will be helpful. And I hope you'll listen to me. More from This Week w/Jonathan Karl

John Curtis

49,719 просмотров • 1 год назад