Загрузка видео...

Не удалось загрузить видео

На главную

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 просмотров • 1 год назад •via X (Twitter)

#threejs#r3f#webgl
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 12

Фото профиля Anderson Mancini
Anderson Mancini1 год назад

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

Фото профиля Mobile Scanner
Mobile Scanner1 год назад

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

Фото профиля Alex
Alex1 год назад

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

Фото профиля Anderson Mancini
Anderson Mancini1 год назад

Hahaha thanks Alex 😂

Фото профиля Simon
Simon1 год назад

So slick

Фото профиля Anderson Mancini
Anderson Mancini1 год назад

Thank you my friend 😊

Фото профиля Matthias
Matthias1 год назад

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

Фото профиля Anderson Mancini
Anderson Mancini1 год назад

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

Фото профиля Evert Junior
Evert Junior1 год назад

oh my god

Фото профиля Anderson Mancini
Anderson Mancini1 год назад

Thanks ;)

Фото профиля Chris Lane Jones
Chris Lane Jones1 год назад

Great stuff man!

Фото профиля Anderson Mancini
Anderson Mancini1 год назад

Thank you very much Chris 😊

Похожие видео

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 просмотров • 2 лет назад

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 просмотров • 1 год назад

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 просмотров • 2 месяцев назад

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 просмотров • 1 год назад

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 просмотров • 20 дней назад

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 просмотров • 1 год назад

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 просмотров • 7 дней назад

⚡️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 просмотров • 3 лет назад

🚀 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 просмотров • 1 месяц назад

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 просмотров • 1 год назад

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 просмотров • 1 год назад

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 просмотров • 1 год назад

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 просмотров • 1 год назад

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 просмотров • 10 месяцев назад

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 просмотров • 7 месяцев назад

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 просмотров • 1 год назад

👉🏻 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 просмотров • 1 год назад

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 просмотров • 1 год назад

🚀 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 просмотров • 1 год назад