Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

Andersonmancini's profile picture

Anderson Mancini

12,267 subscribers

17,859 görüntüleme • 1 yıl önce •via X (Twitter)

#threejs#r3f#webgl
LIVE

Anya Rossi• Live Now

Private livecam show

12 Yorum

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

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

Mobile Scanner profil fotoğrafı
Mobile Scanner1 yıl önce

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

Alex profil fotoğrafı
Alex1 yıl önce

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

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

Hahaha thanks Alex 😂

Simon profil fotoğrafı
Simon1 yıl önce

So slick

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

Thank you my friend 😊

Matthias profil fotoğrafı
Matthias1 yıl önce

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

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

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

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

oh my god

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

Thanks ;)

Chris Lane Jones profil fotoğrafı
Chris Lane Jones1 yıl önce

Great stuff man!

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

Thank you very much Chris 😊

Benzer Videolar

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

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

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

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

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

AA

47,343 görüntüleme • 2 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

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

44,895 görüntüleme • 20 gün önce

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

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 👇
0:24

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

⚡️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
1:40

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

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

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 ⬇️
0:20

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

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

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

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

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

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

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

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… ✈️
0:34

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

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!
0:23

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

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

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

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

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

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