Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

#threejs#r3f#webgl
LIVE

Anya Rossi• Live Now

Private livecam show

12 Kommentare

Profilbild von Anderson Mancini
Anderson Mancinivor 1 Jahr

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

Profilbild von Mobile Scanner
Mobile Scannervor 1 Jahr

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

Profilbild von Alex
Alexvor 1 Jahr

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

Profilbild von Anderson Mancini
Anderson Mancinivor 1 Jahr

Hahaha thanks Alex 😂

Profilbild von Simon
Simonvor 1 Jahr

So slick

Profilbild von Anderson Mancini
Anderson Mancinivor 1 Jahr

Thank you my friend 😊

Profilbild von Matthias
Matthiasvor 1 Jahr

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

Profilbild von Anderson Mancini
Anderson Mancinivor 1 Jahr

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

Profilbild von Evert Junior
Evert Juniorvor 1 Jahr

oh my god

Profilbild von Anderson Mancini
Anderson Mancinivor 1 Jahr

Thanks ;)

Profilbild von Chris Lane Jones
Chris Lane Jonesvor 1 Jahr

Great stuff man!

Profilbild von Anderson Mancini
Anderson Mancinivor 1 Jahr

Thank you very much Chris 😊

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

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

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

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 Aufrufe • vor 20 Tagen

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

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 Aufrufe • vor 7 Tagen

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

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

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

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

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

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

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

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

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

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

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

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