Loading video...

Video Failed to Load

Go Home

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

bruno_simon's profile picture

Bruno Simon

78,065 subscribers

40,609 views • 3 years ago •via X (Twitter)

#threejs#webGL#r3f
LIVE

Anya Rossi• Live Now

Private livecam show

7 Comments

Anderson Mancini's profile picture
Anderson Mancini3 years ago

@N8Programs @0xca0a It is so hard to believe that those shadows are actually being handle by threejs. They are so much better than the ones that we had previously. Amazing work teacher 👏🏻👏🏻👏🏻

Asharib Ali's profile picture
Asharib Ali3 years ago

@N8Programs @0xca0a 🔥

Brout Estevan's profile picture
Brout Estevan3 years ago

@N8Programs @0xca0a The shadows are beautiful especially those on the transparent island

Simon's profile picture
Simon3 years ago

@bizar_ro @N8Programs @0xca0a So much butter smoothness

DigitalNarrative.eth's profile picture
DigitalNarrative.eth3 years ago

@N8Programs @0xca0a They’re awesome. And do you feel any performance gains agains the other ones?

Lisa Chau's profile picture
Lisa Chau3 years ago

@N8Programs @0xca0a Incredible love it! 👏

Student's profile picture
Student3 years ago

@N8Programs @0xca0a Will this be added to the new curriculum? Looking forward to it

Related Videos

Finally made a portfolio site! Looking for new projects, so check this out if you need a #threejs #webgl #r3f #unity developer 👋
0:25

Finally made a portfolio site! Looking for new projects, so check this out if you need a #threejs #webgl #r3f #unity developer 👋

Einar Öberg

11,647 views • 2 years ago

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

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

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,210 views • 3 years ago

A little late for the #threejs challenge of the day, but it looked fun so I did it anyway ✌️ The reference is a work by Brian Dan Greenheck nice challenge lol Repo Live link #webgl #r3f
0:25

A little late for the #threejs challenge of the day, but it looked fun so I did it anyway ✌️ The reference is a work by Brian Dan Greenheck nice challenge lol Repo Live link #webgl #r3f

Marco Ludovico Perego

12,115 views • 7 months ago

🚀 New video alert! I just published a detailed guide on using the free version of meshTransitionMaterial on my YouTube channel! 🎥 This effect works on any object—not just cars. 📺 Watch here: #threejs #creativecoding #r3f
0:21

🚀 New video alert! I just published a detailed guide on using the free version of meshTransitionMaterial on my YouTube channel! 🎥 This effect works on any object—not just cars. 📺 Watch here: #threejs #creativecoding #r3f

Anderson Mancini

19,759 views • 1 year ago

🎉Finally converted the awesome @takram/three-geospatial R3F demo to Vanilla JS and added the cloud atmosphere visual effects. Also huge thanks to Shota Matsuda 松田 聖大 and Garrett Johnson! Checkout the live demo at: Full source codes can be found on my Github: #Threejs #WebGL #VanillaJavaScript
0:35

🎉Finally converted the awesome @takram/three-geospatial R3F demo to Vanilla JS and added the cloud atmosphere visual effects. Also huge thanks to Shota Matsuda 松田 聖大 and Garrett Johnson! Checkout the live demo at: Full source codes can be found on my Github: #Threejs #WebGL #VanillaJavaScript

jeantimex

79,028 views • 1 year 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
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,984 views • 2 months ago

Finally my Flowboard project - inspired by work louder® products - is DONE! I ended up taking this opportunity to finally get my hands dirty and learn ThreeJS + R3F. Found an ideal approach for using it with GSAP and Webflow. Here's the result:
0:38

Finally my Flowboard project - inspired by work louder® products - is DONE! I ended up taking this opportunity to finally get my hands dirty and learn ThreeJS + R3F. Found an ideal approach for using it with GSAP and Webflow. Here's the result:

Diego Toda de Oliveira

22,385 views • 3 years ago

Another unreleased shader - Puddle with raindrops, splashes, ripples and lightning. Of course, all #threejs and #r3f. Best witih sound. Dont forget to hit "Start" on the demo page! Live: Code:
0:20

Another unreleased shader - Puddle with raindrops, splashes, ripples and lightning. Of course, all #threejs and #r3f. Best witih sound. Dont forget to hit "Start" on the demo page! Live: Code:

Faraz

33,915 views • 1 year ago

🏎️The redesigned wheel system is finally working! Instead of direct velocity control, wheels now spin and create grip. It feels physics-driven and fits the controller better. Ecctrl 2.0 + demo coming soon. Stay tuned! #threejs #threejsJourney #webdev #r3f #ecctrl #opensource
1:24

🏎️The redesigned wheel system is finally working! Instead of direct velocity control, wheels now spin and create grip. It feels physics-driven and fits the controller better. Ecctrl 2.0 + demo coming soon. Stay tuned! #threejs #threejsJourney #webdev #r3f #ecctrl #opensource

Andrew Chen

10,999 views • 3 months ago

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,153 views • 7 months 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.
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,829 views • 1 year ago

👉🏻 My #threejs portfolio was accepted as a nominee on awwwards. 😍. The votes are open until August 15th. After 4 years in this #threejsJourney, putting into practice the things I've learned from this amazing course, it is the first time that I have had enough personal projects to compile a portfolio 😊. I'm glad that I started this journey, and I hope I can keep inspiring and helping others 🙏🏻. #creativecoding #webgl #r3f
0:43

👉🏻 My #threejs portfolio was accepted as a nominee on awwwards. 😍. The votes are open until August 15th. After 4 years in this #threejsJourney, putting into practice the things I've learned from this amazing course, it is the first time that I have had enough personal projects to compile a portfolio 😊. I'm glad that I started this journey, and I hope I can keep inspiring and helping others 🙏🏻. #creativecoding #webgl #r3f

Anderson Mancini

10,550 views • 2 years ago

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,773 views • 2 years ago

its live on - 200+ Material - 3D model ( more soon...) - Your own Custom Material / Model - 2D Editor UI/UX improvement with scale - Set Overlay reference Scale - Support for Tablets - and much more... #threejs #buildinpublic #r3f
2:05

its live on - 200+ Material - 3D model ( more soon...) - Your own Custom Material / Model - 2D Editor UI/UX improvement with scale - Set Overlay reference Scale - Support for Tablets - and much more... #threejs #buildinpublic #r3f

Sudhir

40,791 views • 5 months ago

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

My <FakeGlowMaterial /> for #r3f is finally available. You can create glow effects through #glsl shaders and meshes without any post-processing effects😍 Live: Source: The vanilla #threejs version is coming soon. #threejsJourney
1:09

My <FakeGlowMaterial /> for #r3f is finally available. You can create glow effects through #glsl shaders and meshes without any post-processing effects😍 Live: Source: The vanilla #threejs version is coming soon. #threejsJourney

Anderson Mancini

20,681 views • 2 years ago

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,145 views • 2 years ago