Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 Aufrufe • vor 1 Jahr •via X (Twitter)

GamingWissenschaft & TechnologieBildung#threejs#r3f#WebGPU#TSL
LIVE

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von Ebe ✦ Creative Dev
Ebe ✦ Creative Devvor 1 Jahr

This looks so cool!! Need the code haha.

Profilbild von Anderson Mancini
Anderson Mancinivor 1 Jahr

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

Profilbild von Rainmaker
Rainmakervor 2 Jahren

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

Profilbild von Simon
Simonvor 1 Jahr

Ooooh

Profilbild von Carolina Aiazzi
Carolina Aiazzivor 1 Jahr

@sea3dformat Very cool🤩

Profilbild von Anderson Mancini
Anderson Mancinivor 1 Jahr

@sea3dformat Thank you 🤩

Profilbild von MrBodean
MrBodeanvor 1 Jahr

Beautiful

Profilbild von Anderson Mancini
Anderson Mancinivor 1 Jahr

Thank you very much 🙏🏻😊

Profilbild von rherault
rheraultvor 1 Jahr

Awesome 😍 Need something similar for a big project 👀

Profilbild von Anderson Mancini
Anderson Mancinivor 1 Jahr

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

Profilbild von Evert Junior
Evert Juniorvor 1 Jahr

@nicolettiFPS

Ähnliche Videos

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

🚀 #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,815 Aufrufe • vor 8 Monaten

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

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 Aufrufe • vor 3 Jahren

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

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

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,103 Aufrufe • vor 2 Jahren

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 SEA3D, 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 SEA3D, mrdoob and all the TSL contributors made an awesome job making it as easy as possible #threejsjourney #r3f #threejs details below ⬇️

Alex

84,234 Aufrufe • vor 5 Monaten

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

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

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

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

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

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

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,595 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 2 Jahren

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

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,070 Aufrufe • vor 2 Jahren

New tutorial by Anderson Mancini on how to use AutoFocus with #threeJs and #R3F 👉 His portfolio 👉
0:21

New tutorial by Anderson Mancini on how to use AutoFocus with #threeJs and #R3F 👉 His portfolio 👉

Bruno Simon

11,885 Aufrufe • vor 1 Jahr

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