Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Source code: Live link: I increased the parallax effect in the background to visualize the liquid glass effect better and created a custom settings panel. Please leave a star on GitHub if it was useful 😊 #threejs #r3f #webgl

Anderson Mancini

12,267 subscribers

17,859 views • 1 year ago •via X (Twitter)

#threejs #r3f #webgl

Anya Rossi• Live Now

Private livecam show

12 Comments

Anderson Mancini1 year ago

This is how the code looks like. I really love readability on #r3f projects 😍.

Mobile Scanner1 year ago

Scan any documents, convert images into text, PDF files, etc. 👍

Alex1 year ago

Magnificent ! (Hope you get the pun) Haha nice one Anderson

Anderson Mancini1 year ago

Hahaha thanks Alex 😂

Simon1 year ago

So slick

Anderson Mancini1 year ago

Thank you my friend 😊

Matthias1 year ago

This is cool, but on my machine, the FPS is more like SPF if you know what I mean.

Anderson Mancini1 year ago

Ohh really. Sorry to hear that. Which device are you using?

Evert Junior1 year ago

oh my god

Anderson Mancini1 year ago

Thanks ;)

Chris Lane Jones1 year ago

Great stuff man!

Anderson Mancini1 year ago

Thank you very much Chris 😊

Related Videos

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

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

I made a little tool to better visualize the effect of the new text-box property and also generate the code for you!

I made a little tool to better visualize the effect of the new text-box property and also generate the code for you!

CSS by T. Afif

16,843 views • 1 year ago

i made a 3D stained glass type design tool it renders live in the browser using threejs and webgl shaders

i made a 3D stained glass type design tool it renders live in the browser using threejs and webgl shaders

AA

47,343 views • 2 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.

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

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

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

44,895 views • 20 days ago

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

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

This is how I make a Liquid Glass button with @Framer's AI Agent. Steal it! 1. Asked the agent to build a liquid glass background + a WebGL chromatic metal shader 2. Layered them and tuned till it felt right Prompts below 👇

This is how I make a Liquid Glass button with @Framer's AI Agent. Steal it! 1. Asked the agent to build a liquid glass background + a WebGL chromatic metal shader 2. Layered them and tuned till it felt right Prompts below 👇

Tran Mau Tri Tam ✪

1,136,274 views • 7 days ago

⚡️Live: You don't always need to use 3D elements in #threejs. In this example, a simple plane with a normal/displacement texture and lights that follows the mouse gives nice effects😍 The source code is here: #threejsJourney #r3f

⚡️Live: You don't always need to use 3D elements in #threejs. In this example, a simple plane with a normal/displacement texture and lights that follows the mouse gives nice effects😍 The source code is here: #threejsJourney #r3f

Anderson Mancini

47,570 views • 3 years 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

🚀 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,332 views • 1 month ago

I think I've found a quite nice trick to recreate a little lens distortion effect in Figma to replicate the Liquid Glass material. Find a little tutorial below ⬇️

I think I've found a quite nice trick to recreate a little lens distortion effect in Figma to replicate the Liquid Glass material. Find a little tutorial below ⬇️

Max

191,607 views • 1 year ago

Interactive simulation built with Three.js, WebGL, and GLSL shaders featuring dynamic lattice structures, particle effects, and a UI for scene controls. Source code link in the comment below. 👇 #OpenSource #Threejs #JavaScript

Interactive simulation built with Three.js, WebGL, and GLSL shaders featuring dynamic lattice structures, particle effects, and a UI for scene controls. Source code link in the comment below. 👇 #OpenSource #Threejs #JavaScript

Techartist

18,168 views • 1 year ago

If you're like me and are trying to study and inspect the new Liquid Glass effect, I've built a small utility app for you! Test Liquid Glass with all the different options, tinting, sizes, and backgrounds — only for macOS Tahoe for obvious reasons. 💾

If you're like me and are trying to study and inspect the new Liquid Glass effect, I've built a small utility app for you! Test Liquid Glass with all the different options, tinting, sizes, and backgrounds — only for macOS Tahoe for obvious reasons. 💾

Rafa

18,046 views • 1 year ago

I modifyed the official example "compute fluid particles" to make it look more liquid. Simply blur the *depth texture* to obtain a smooth surface which has differentiable gradient. Made with #threejs live demo (all source code is in html of the page) ->

I modifyed the official example "compute fluid particles" to make it look more liquid. Simply blur the depth texture to obtain a smooth surface which has differentiable gradient. Made with #threejs live demo (all source code is in html of the page) ->

Maeda Mameo

18,141 views • 1 year ago

It’s not a glitch in the matrix! It’s called a 🛑 parallax effect 🛑 and if you’ve ever experienced it, it’s pretty cool. Plane not moving… ✈️

It’s not a glitch in the matrix! It’s called a 🛑 parallax effect 🛑 and if you’ve ever experienced it, it’s pretty cool. Plane not moving… ✈️

Suzee Q

19,205 views • 10 months ago

One of the most common questions I get when I post PDP-11 stuff is "What FONT is that?". It's usually Glass TTY VT220, and I'll put a link to the font below on GitHub. Using Cool Retro Term for phosphor persistence completes the effect!

One of the most common questions I get when I post PDP-11 stuff is "What FONT is that?". It's usually Glass TTY VT220, and I'll put a link to the font below on GitHub. Using Cool Retro Term for phosphor persistence completes the effect!

Dave W Plummer

107,871 views • 7 months ago

ELON: PLAYING VIDEO GAMES RESTORES ME MENTALLY “If I play a video game on extreme difficulty, then I have to concentrate fully on the game. And it has a calming effect. It sort of chills me down. If you play martial arts, or you play pool, anything that forces you to concentrate fully actually has a calming effect. I find it has a mental restoring effect.” Source: The Joe Rogan Experience, November 2024

ELON: PLAYING VIDEO GAMES RESTORES ME MENTALLY “If I play a video game on extreme difficulty, then I have to concentrate fully on the game. And it has a calming effect. It sort of chills me down. If you play martial arts, or you play pool, anything that forces you to concentrate fully actually has a calming effect. I find it has a mental restoring effect.” Source: The Joe Rogan Experience, November 2024

Mario Nawfal

252,393 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

👉🏻 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 • 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

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,472 views • 1 year 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

🚀 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