Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 1 yıl önce •via X (Twitter)

OyunBilim & TeknolojiEğitim#threejs#r3f#WebGPU#TSL
LIVE

Anya Rossi• Live Now

Private livecam show

11 Yorum

Ebe ✦ Creative Dev profil fotoğrafı
Ebe ✦ Creative Dev1 yıl önce

This looks so cool!! Need the code haha.

Anderson Mancini profil fotoğrafı
Anderson Mancini1 yıl önce

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

Rainmaker profil fotoğrafı
Rainmaker2 yıl önce

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 profil fotoğrafı
Simon1 yıl önce

Ooooh

Carolina Aiazzi profil fotoğrafı
Carolina Aiazzi1 yıl önce

@sea3dformat Very cool🤩

Anderson Mancini profil fotoğrafı
Anderson Mancini1 yıl önce

@sea3dformat Thank you 🤩

MrBodean profil fotoğrafı
MrBodean1 yıl önce

Beautiful

Anderson Mancini profil fotoğrafı
Anderson Mancini1 yıl önce

Thank you very much 🙏🏻😊

rherault profil fotoğrafı
rherault1 yıl önce

Awesome 😍 Need something similar for a big project 👀

Anderson Mancini profil fotoğrafı
Anderson Mancini1 yıl önce

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

Evert Junior profil fotoğrafı
Evert Junior1 yıl önce

@nicolettiFPS

Benzer Videolar

🚀 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 görüntüleme • 21 gün önce

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Small weekend project. Modified Brackeys's Unity dissolve shader to work in #ThreeJS using R3F. Will be using this in AR soon👀 Demo: Code: #webgl #creativecoding
0:36

Small weekend project. Modified Brackeys's Unity dissolve shader to work in #ThreeJS using R3F. Will be using this in AR soon👀 Demo: Code: #webgl #creativecoding

Faraz

111,088 görüntüleme • 3 yıl önce

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