Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

⚡️WebGPU Glass Material Update See it live: This new #threjs material provides extra depth by adding recursive transmission support, allowing glass objects to see and refract other glass and transparent surfaces, also bringing chromatic aberration and full #webgpu / TSL compatibility. More about it in the comments 😊

Andersonmancini's profile picture

Anderson Mancini

15,024 subscribers

16,551 görüntüleme • 14 gün önce •via X (Twitter)

#threjs
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

New WebGPU Glass Material is almost ready! It will be available for Three.js and Poimandres React Three Fiber. Lots of customization; it comes with a very beautiful and handy control panel. Live link and source code will be available on Monday 😊 #threejsJourney #creativecoding #webgpu
0:55

New WebGPU Glass Material is almost ready! It will be available for Three.js and Poimandres React Three Fiber. Lots of customization; it comes with a very beautiful and handy control panel. Live link and source code will be available on Monday 😊 #threejsJourney #creativecoding #webgpu

Anderson Mancini

18,204 görüntüleme • 19 gün önce

This is a glass frog, an amphibian from Central and South America known for its transparent skin. The photo shows the underside of the frog, allowing you to directly view its internal organs. The green spheres at the bottom are eggs, and the red structure in the middle is the heart. Transparent glass frogs can pack their red blood cells into their liver to make their skin even more see-through while they sleep.
0:30

This is a glass frog, an amphibian from Central and South America known for its transparent skin. The photo shows the underside of the frog, allowing you to directly view its internal organs. The green spheres at the bottom are eggs, and the red structure in the middle is the heart. Transparent glass frogs can pack their red blood cells into their liver to make their skin even more see-through while they sleep.

Nature Girl

19,138 görüntüleme • 2 ay önce

I created my own custom water material and underwater post process material in UEFN! It uses distance fields to create foam and ripples around objects on the surface and I can also add algae/pondscum to the surface. I plan on adding more features to this material soon! For underwater, I project a caustics material along surface normals in the underwater post process material as well as using scene depth to make things up close appear clear and things farther away appear not as clear. #UEFN #Fortnite
0:54

I created my own custom water material and underwater post process material in UEFN! It uses distance fields to create foam and ripples around objects on the surface and I can also add algae/pondscum to the surface. I plan on adding more features to this material soon! For underwater, I project a caustics material along surface normals in the underwater post process material as well as using scene depth to make things up close appear clear and things farther away appear not as clear. #UEFN #Fortnite

PixelatedDreams 🍔

14,020 görüntüleme • 1 yıl önce

Live Link: Source Code: While updating my website, I found an old project that was broken and decided to bring it back to life using WebGPU + TSL in #threejs. I’ve always loved Predator. The first time I saw the Predator cloak effect, I knew I wanted to learn visual effects and make them part of my professional life. Turn the sound on — it makes the experience much more fun 😅 This is also a great exercise if you’re learning TSL and want to experiment with glass, dispersion, IOR, and custom shaders. Both the classic shader version and the new TSL version are included in the repo so you can compare the approaches side by side. Hope it’s useful. Don’t forget to ⭐ the GitHub repo! #r3f #threejsJourney
2:07

Live Link: Source Code: While updating my website, I found an old project that was broken and decided to bring it back to life using WebGPU + TSL in #threejs. I’ve always loved Predator. The first time I saw the Predator cloak effect, I knew I wanted to learn visual effects and make them part of my professional life. Turn the sound on — it makes the experience much more fun 😅 This is also a great exercise if you’re learning TSL and want to experiment with glass, dispersion, IOR, and custom shaders. Both the classic shader version and the new TSL version are included in the repo so you can compare the approaches side by side. Hope it’s useful. Don’t forget to ⭐ the GitHub repo! #r3f #threejsJourney

Anderson Mancini

13,714 görüntüleme • 21 gün önce

🤖 Ever seen a robot get confused by a glass door? That era is ending. Today, we're open-sourcing LingBot-Depth, a new spatial perception model that lets robots truly *see* the physical world, including transparent & reflective objects. It even surpasses top-tier industrial depth cameras in core metrics. A new sense of sight for embodied AI. #EmbodiedAI #Robotics #ComputerVision #OpenSource #DepthCamera
2:37

🤖 Ever seen a robot get confused by a glass door? That era is ending. Today, we're open-sourcing LingBot-Depth, a new spatial perception model that lets robots truly *see* the physical world, including transparent & reflective objects. It even surpasses top-tier industrial depth cameras in core metrics. A new sense of sight for embodied AI. #EmbodiedAI #Robotics #ComputerVision #OpenSource #DepthCamera

Robbyant

320,159 görüntüleme • 6 ay önce

I see Liquid Glass everywhere but the problem is everyone’s created a sphere and that’s it. I prefer to create systems. I’ve Vibecoded the full-fledged cpu based universal Liquid Glass design system that works on every browser and device , getting closer and closer to the official iOS 26 one. Still working in progress before a full release.
0:35

I see Liquid Glass everywhere but the problem is everyone’s created a sphere and that’s it. I prefer to create systems. I’ve Vibecoded the full-fledged cpu based universal Liquid Glass design system that works on every browser and device , getting closer and closer to the official iOS 26 one. Still working in progress before a full release.

Tykra

41,704 görüntüleme • 3 ay önce

Two new #threejs projects on the way 😍 Working on my own gem renderer with a custom refraction material in TSL for #WebGPU, combining Screen Space Reflections + SSGTAO for superior results, as this allows diamonds to generate reflections on the metal mesh. The performance is incredible, even on gems with over 200 diamonds. This time, without any additional libraries. Just React Three Fiber and a lot of magic with custom shaders in TSL. GemGPU™ will also come with a very minimalist gem and metal customization panel that hides and lets the jewelry be the star. I also created a beautiful new stats panel that completely hides in the scene when not needed. It provides relevant optimization information, a performance gauge, summary and expanded modes, and day/night toggle. In the video, you can also see SSGI in action, with a pearl that reflects, in real time, all the objects in the scene, just as the objects in the scene reflect the pearl. It's magical. There are still a few things to fix, but I'll share the live link soon. Stay tuned.
3:43

Two new #threejs projects on the way 😍 Working on my own gem renderer with a custom refraction material in TSL for #WebGPU, combining Screen Space Reflections + SSGTAO for superior results, as this allows diamonds to generate reflections on the metal mesh. The performance is incredible, even on gems with over 200 diamonds. This time, without any additional libraries. Just React Three Fiber and a lot of magic with custom shaders in TSL. GemGPU™ will also come with a very minimalist gem and metal customization panel that hides and lets the jewelry be the star. I also created a beautiful new stats panel that completely hides in the scene when not needed. It provides relevant optimization information, a performance gauge, summary and expanded modes, and day/night toggle. In the video, you can also see SSGI in action, with a pearl that reflects, in real time, all the objects in the scene, just as the objects in the scene reflect the pearl. It's magical. There are still a few things to fix, but I'll share the live link soon. Stay tuned.

Anderson Mancini

12,113 görüntüleme • 6 ay önce

The Aboso Glass Factory, established and commissioned on February 5, 1966, by Osagyefo Dr. Kwame Nkrumah, just 19 days before his overthrow. The factory formed part of President Nkrumah’s post-independence vision to industrialize the country, reduce reliance on imports, and foster self-reliance through state-led manufacturing. It primarily produced glass bottles for the beverage industry, along with tableware, sheet glass, and louvre glass. At full capacity, it could manufacture around 18 million bottles, 2 million units of tableware, and 8–10 million square feet of sheet and louvre glass each year. In its early days, the factory employed about 500 Ghanaians, making it a major employer and an important economic driver for the surrounding area.
0:45

The Aboso Glass Factory, established and commissioned on February 5, 1966, by Osagyefo Dr. Kwame Nkrumah, just 19 days before his overthrow. The factory formed part of President Nkrumah’s post-independence vision to industrialize the country, reduce reliance on imports, and foster self-reliance through state-led manufacturing. It primarily produced glass bottles for the beverage industry, along with tableware, sheet glass, and louvre glass. At full capacity, it could manufacture around 18 million bottles, 2 million units of tableware, and 8–10 million square feet of sheet and louvre glass each year. In its early days, the factory employed about 500 Ghanaians, making it a major employer and an important economic driver for the surrounding area.

𝐀𝐒𝐊

32,686 görüntüleme • 6 ay önce

"Come on.. you can't be that dumb", Kerry Roberts proclaims as she attempts to explain how silly it sounds for the cocktail glass to have been found by John O'Keefe. You're right Kerry, it's ridiculous. It's ridiculous to think the same hand that supposedly received a direct hit with an SUV (that had received no injuries from this very hit) somehow managed to grasp this cocktail glass as it broke. This same body then did a spin, with the broken glass in hand, got launched 10 feet, and said glass landed right next to the body. Or does it make more sense that a body holding a cocktail glass received a strike on the back of the head and the glass broke as the hand released the grip on the glass as the body fell. This wouldn't be the first murder where evidence was placed to look staged. Riddle me this Kerry... Is this why, til this very day, the entirety of the glass has never been found? Is this why the glass on the bumper did not match? Or the majority of the glass at the scene did not match? Where's the rest of the glass, Kerry?
0:22

"Come on.. you can't be that dumb", Kerry Roberts proclaims as she attempts to explain how silly it sounds for the cocktail glass to have been found by John O'Keefe. You're right Kerry, it's ridiculous. It's ridiculous to think the same hand that supposedly received a direct hit with an SUV (that had received no injuries from this very hit) somehow managed to grasp this cocktail glass as it broke. This same body then did a spin, with the broken glass in hand, got launched 10 feet, and said glass landed right next to the body. Or does it make more sense that a body holding a cocktail glass received a strike on the back of the head and the glass broke as the hand released the grip on the glass as the body fell. This wouldn't be the first murder where evidence was placed to look staged. Riddle me this Kerry... Is this why, til this very day, the entirety of the glass has never been found? Is this why the glass on the bumper did not match? Or the majority of the glass at the scene did not match? Where's the rest of the glass, Kerry?

BoozeyBeauty

39,510 görüntüleme • 8 ay önce

What if drop shadows actually look like real shadows? We are using Omma to explore a new kind of canvas that employs real-light approximations rather than simple 2D drop shadows. It runs on WebGPU and uses real-time path tracing to simulate more realistic shading. It also supports SVG shapes. The Z-index defines actual depth, too (objects with a lower z-index would be affected by shadows of other objects).
0:37

What if drop shadows actually look like real shadows? We are using Omma to explore a new kind of canvas that employs real-light approximations rather than simple 2D drop shadows. It runs on WebGPU and uses real-time path tracing to simulate more realistic shading. It also supports SVG shapes. The Z-index defines actual depth, too (objects with a lower z-index would be affected by shadows of other objects).

Omma

12,155 görüntüleme • 3 ay ö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,984 görüntüleme • 2 ay önce

This is evoBOT, a robot helper developed by Germany’s Fraunhofer Institute for Material Flow and Logistics. It can grasp and carry goods to support cargo workers in transporting packages. evoBOT can also move smoothly across uneven terrain, including bumpy surfaces and sloping ground.
0:23

This is evoBOT, a robot helper developed by Germany’s Fraunhofer Institute for Material Flow and Logistics. It can grasp and carry goods to support cargo workers in transporting packages. evoBOT can also move smoothly across uneven terrain, including bumpy surfaces and sloping ground.

Space and Technology

547,499 görüntüleme • 2 ay ö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,257 görüntüleme • 1 yıl önce

🚨 A WOMAN WAS RUSHED TO THE ER AFTER HER GLASS STRAW SNAPPED - AND A SHARD ENDED UP INSIDE HER STOMACH "Don't use glass straws... it's not worth it." A woman posted a PSA after a glass drinking straw broke mid-sip and the story is absolutely horrifying. She swallowed something sharp, checked the straw, and realized a chunk of glass was missing. Two hours later she burped… and blood filled her mouth. At the ER, doctors didn’t take it seriously until a gastro specialist saw the scan and told them to rush her into emergency care. • A shard of glass was sitting in her stomach • They put her under anesthesia to retrieve it • By the time they went in… the shard was GONE • It had already moved into her intestines • Now she has to watch for internal bleeding for 48 hours • And check every bowel movement to see if it passes • She can’t remove the TikTok Shop video she made promoting the straws • And she’s warning everyone to THROW THEM OUT immediately People in the comments are freaking out: “NOPE. Plastic only from now on.” “TikTok Shop about to deactivate glass straws in 3… 2… 1…” “I didn’t even know they could BREAK like that.” “Internal bleeding is my worst nightmare.” “This is exactly why I never bought those things.” Glass straws were supposed to be the “eco-friendly upgrade”… but this video has people rethinking that real fast. Are you tossing every glass straw in your house after watching this?
2:28

🚨 A WOMAN WAS RUSHED TO THE ER AFTER HER GLASS STRAW SNAPPED - AND A SHARD ENDED UP INSIDE HER STOMACH "Don't use glass straws... it's not worth it." A woman posted a PSA after a glass drinking straw broke mid-sip and the story is absolutely horrifying. She swallowed something sharp, checked the straw, and realized a chunk of glass was missing. Two hours later she burped… and blood filled her mouth. At the ER, doctors didn’t take it seriously until a gastro specialist saw the scan and told them to rush her into emergency care. • A shard of glass was sitting in her stomach • They put her under anesthesia to retrieve it • By the time they went in… the shard was GONE • It had already moved into her intestines • Now she has to watch for internal bleeding for 48 hours • And check every bowel movement to see if it passes • She can’t remove the TikTok Shop video she made promoting the straws • And she’s warning everyone to THROW THEM OUT immediately People in the comments are freaking out: “NOPE. Plastic only from now on.” “TikTok Shop about to deactivate glass straws in 3… 2… 1…” “I didn’t even know they could BREAK like that.” “Internal bleeding is my worst nightmare.” “This is exactly why I never bought those things.” Glass straws were supposed to be the “eco-friendly upgrade”… but this video has people rethinking that real fast. Are you tossing every glass straw in your house after watching this?

HustleBitch

85,261 görüntüleme • 8 ay önce

Inspired by Ed Husain powerful piece on The Spectator, In Defence of Dubai. This nation was never built overnight. It is not merely glass towers and economics, but a civilization layered with memory, faith, lineage, and identity. A country that modernized without surrendering its roots. Historically grounded, religiously rich, and culturally confident. This is the depth too many still fail to see. Link to the article:
2:06

Inspired by Ed Husain powerful piece on The Spectator, In Defence of Dubai. This nation was never built overnight. It is not merely glass towers and economics, but a civilization layered with memory, faith, lineage, and identity. A country that modernized without surrendering its roots. Historically grounded, religiously rich, and culturally confident. This is the depth too many still fail to see. Link to the article:

Rauda Altenaiji

17,142 görüntüleme • 4 ay önce

🧑‍🏫 How to make a glass/refraction shader: 🍷 Refraction will ultimately have the effect that whatever is behind your mesh should appear distorted by the surface of the mesh itself. We're not going for external caustics projection, just modelling glass-like, distorting "transparency". 🌆 In Unity, you can sample the *global* _CameraOpaqueTexture (make sure it's enabled in your URP asset settings), which is what your scene looks like rendered without any transparent objects. In Shader Graph, you can simply use the Scene Colour node. 🔢 The UVs required for this texture are the normalized screen coordinates, so if we offset/warp/distort these coordinates and sample the texture, we ultimately produce a distorted image. We can offset the UVs by some normal map, as well as a refraction vector based on the direction from the camera -> the vertex/fragment (flip viewDir, which is otherwise vertex/fragment -> camera) and normals of the object. 📸 Input the (reversed) world space view direction and normal into HLSL refract. **Convert the refraction direction vector to tangent space before adding it to the screen UV.** Use the result to sample _CameraOpaqueTexture. refract(-worldViewDirection, worldNormal, eta); eta -> refraction ratio (from_IOR / to_IOR), > for air, 1.0 / indexOfRefraction (IOR). IOR of water = 1.33, glass = 1.54... 💡 You can also do naive "looks about right" hacks: fresnel -> normal from grayscale, which can be used for distortion. Or distort it any other way (without even specifically using refract at all), really... 🧠 Thus, even if your object is rendered as a transparent type (and vanilla Unity URP will require that it is), it is fully 'opaque' (max alpha), but it renders on its surface what is behind it, using the screen UV. If you distort those UVs by the camera view and normals of the surface it will be rendered on, it then appears like refractive glass on that surface. > Transparent render queue, but alpha = 1.0.
0:39

🧑‍🏫 How to make a glass/refraction shader: 🍷 Refraction will ultimately have the effect that whatever is behind your mesh should appear distorted by the surface of the mesh itself. We're not going for external caustics projection, just modelling glass-like, distorting "transparency". 🌆 In Unity, you can sample the *global* _CameraOpaqueTexture (make sure it's enabled in your URP asset settings), which is what your scene looks like rendered without any transparent objects. In Shader Graph, you can simply use the Scene Colour node. 🔢 The UVs required for this texture are the normalized screen coordinates, so if we offset/warp/distort these coordinates and sample the texture, we ultimately produce a distorted image. We can offset the UVs by some normal map, as well as a refraction vector based on the direction from the camera -> the vertex/fragment (flip viewDir, which is otherwise vertex/fragment -> camera) and normals of the object. 📸 Input the (reversed) world space view direction and normal into HLSL refract. **Convert the refraction direction vector to tangent space before adding it to the screen UV.** Use the result to sample _CameraOpaqueTexture. refract(-worldViewDirection, worldNormal, eta); eta -> refraction ratio (from_IOR / to_IOR), > for air, 1.0 / indexOfRefraction (IOR). IOR of water = 1.33, glass = 1.54... 💡 You can also do naive "looks about right" hacks: fresnel -> normal from grayscale, which can be used for distortion. Or distort it any other way (without even specifically using refract at all), really... 🧠 Thus, even if your object is rendered as a transparent type (and vanilla Unity URP will require that it is), it is fully 'opaque' (max alpha), but it renders on its surface what is behind it, using the screen UV. If you distort those UVs by the camera view and normals of the surface it will be rendered on, it then appears like refractive glass on that surface. > Transparent render queue, but alpha = 1.0.

Mirza Beig

125,253 görüntüleme • 1 yıl önce

The robot’s “eyes” just received a big upgrade. LingBot-Depth 2.0, a depth-completion model with half the depth error just dropped. 12/16 benchmarks topped. Glass, mirrors, and transparent objects are so easy for us humans, but so hard for robots, because they do not behave like ordinary surfaces in a camera pipeline. A robot that misunderstands a balcony window or a table edge, will have a completely false planning inside a false world. Huge implecation. LingBot-Depth 2.0 takes an RGB image plus a broken depth map from a sensor and then outputs a cleaner depth map and a usable 3D point cloud. Numbers on LingBot-Depth 2.0 - Excels on glass, mirrors & transparent objects — where traditional depth cameras fail - Training data: 3M → 150M (50x scale-up) - 12 out of 16 first-place rankings on depth completion benchmarks - RMSE cut in half: 0.132 → 0.062 on the hardest indoor scenes LingBot-Vision trained on boundaries, because object edges carry the geometry robots need. No human boundary labels are used, which makes this approach easier to scale. The open-sourced LingBot-Vision is the general vision backbone, and LingBot-Depth 2.0 is the depth model built on it.
2:22

The robot’s “eyes” just received a big upgrade. LingBot-Depth 2.0, a depth-completion model with half the depth error just dropped. 12/16 benchmarks topped. Glass, mirrors, and transparent objects are so easy for us humans, but so hard for robots, because they do not behave like ordinary surfaces in a camera pipeline. A robot that misunderstands a balcony window or a table edge, will have a completely false planning inside a false world. Huge implecation. LingBot-Depth 2.0 takes an RGB image plus a broken depth map from a sensor and then outputs a cleaner depth map and a usable 3D point cloud. Numbers on LingBot-Depth 2.0 - Excels on glass, mirrors & transparent objects — where traditional depth cameras fail - Training data: 3M → 150M (50x scale-up) - 12 out of 16 first-place rankings on depth completion benchmarks - RMSE cut in half: 0.132 → 0.062 on the hardest indoor scenes LingBot-Vision trained on boundaries, because object edges carry the geometry robots need. No human boundary labels are used, which makes this approach easier to scale. The open-sourced LingBot-Vision is the general vision backbone, and LingBot-Depth 2.0 is the depth model built on it.

Rohan Paul

25,312 görüntüleme • 1 ay önce

They say there are two types of people: Those who see the glass half-empty, and those who see it half-full. One day in September 2021, whilst practicing, life changed for cheerleader Makayla Noble... Find out more on the latest #NBTP podcast 🔊👇
0:55

They say there are two types of people: Those who see the glass half-empty, and those who see it half-full. One day in September 2021, whilst practicing, life changed for cheerleader Makayla Noble... Find out more on the latest #NBTP podcast 🔊👇

BBC World Service Sport

45,501 görüntüleme • 9 ay önce