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.

A quick Three.js experiment exploring an infinite carousel of liquid glass tiles, rendered in real time with WebGPU and TSL. Each card is a thick refractive slab sitting on a curved grid that never ends. Short explanation of how the glass is rendered in the thread 👇

Shader Development Studio

1,748 subscribers

57,935 views • 1 month ago •via X (Twitter)

Arts Science & Technology Education

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

$The liquid glass carousel is live. Rebuilt it a bit since the last one, cleaner refraction, better dispersion on the edges. Still real-time Three.js, WebGPU and TSL. Still quite unoptimized :) Link below 👇$

The liquid glass carousel is live. Rebuilt it a bit since the last one, cleaner refraction, better dispersion on the edges. Still real-time Three.js, WebGPU and TSL. Still quite unoptimized :) Link below 👇

Shader Development Studio

27,140 views • 1 month ago

People told us not all glass is "liquid glass" and that we were just riding the Apple hype with our Three.js infinite liquid glass carousel (it was actually one person). So we rebuilt it with an actual GPGPU cloth sim. It's now less liquid glass and more jelly glass, to be fair.

People told us not all glass is "liquid glass" and that we were just riding the Apple hype with our Three.js infinite liquid glass carousel (it was actually one person). So we rebuilt it with an actual GPGPU cloth sim. It's now less liquid glass and more jelly glass, to be fair.

Shader Development Studio

13,942 views • 1 month ago

1/ I let Claude use the API, and the result is an effectively infinite G1 locomotion dataset, rendered in a CAD apartment environment. Here's how:

1/ I let Claude use the API, and the result is an effectively infinite G1 locomotion dataset, rendered in a CAD apartment environment. Here's how:

Guy Tevet

19,828 views • 1 month ago

“The scene begins with a man sitting at a table. There is a small glass of orange juice on the table. He picks up the glass, drinks all of the orange juice, and places the empty glass back down on the table.”

“The scene begins with a man sitting at a table. There is a small glass of orange juice on the table. He picks up the glass, drinks all of the orange juice, and places the empty glass back down on the table.”

Find me on bsky @colin-fraser.net

75,323 views • 1 year ago

The Milkmaid live demo is here! At Revelium™ Studio , with Dominik Fojcik, we re-imagined Vermeer’s Milkmaid through WebGPU, and TSL particles in Three.js turning a timeless painting into living data. #ThreeJS #WebGPU #AI #TSL #Particles

The Milkmaid live demo is here! At Revelium™ Studio , with Dominik Fojcik, we re-imagined Vermeer’s Milkmaid through WebGPU, and TSL particles in Three.js turning a timeless painting into living data. #ThreeJS #WebGPU #AI #TSL #Particles

Niccolò Miranda

70,486 views • 1 year ago

Sitting in the back of a self-driving car playing video games and taking in the views through the glass roof. Life with a Tesla is pretty great

Sitting in the back of a self-driving car playing video games and taking in the views through the glass roof. Life with a Tesla is pretty great

Devin Olsen

56,026 views • 3 months ago

A painting reborn as data. At Revelium™ Studio with the partnership of Dominik Fojcik, we took Vermeer’s Milkmaid and transformed it into a living 3D point-cloud painting in Three.js with TSL particles. #ThreeJS #WebGPU #AI #TSL #Particles

A painting reborn as data. At Revelium™ Studio with the partnership of Dominik Fojcik, we took Vermeer’s Milkmaid and transformed it into a living 3D point-cloud painting in Three.js with TSL particles. #ThreeJS #WebGPU #AI #TSL #Particles

Niccolò Miranda

54,804 views • 1 year ago

Aave Glass, our take on Apple's Liquid Glass, now works across mobile and web. We've published a post that breaks down how we built Aave Glass and the family of components it now powers. Read it below.

Aave Glass, our take on Apple's Liquid Glass, now works across mobile and web. We've published a post that breaks down how we built Aave Glass and the family of components it now powers. Read it below.

Aave

92,620 views • 3 months ago

Still one of my fav projects I worked on in the day job – an interactive experience showing low-carbon technology for the home Custom 3D models created in Blender 🔶 and everything is rendered in the browser using Three.js and the awesome react-three-fiber

Still one of my fav projects I worked on in the day job – an interactive experience showing low-carbon technology for the home Custom 3D models created in Blender 🔶 and everything is rendered in the browser using Three.js and the awesome react-three-fiber

Robin Hawkes

26,548 views • 3 years ago

Possibly one of the most impressive Safari bugs I’ve run into lately: Going back (with a swipe) in *any* React app that uses Navigation API freezes the page for three seconds. What’s fun is the main thread is not frozen, only the rendered page is.

Possibly one of the most impressive Safari bugs I’ve run into lately: Going back (with a swipe) in any React app that uses Navigation API freezes the page for three seconds. What’s fun is the main thread is not frozen, only the rendered page is.

Ivan Akulov

51,293 views • 2 months ago

Let's make Android development in React Native great and fun again. This is the official native Material 3 carousel composable rendered using Expo native views. The result is a simple-to-use React component with all native behavior (gestures and transitions) built in.

Let's make Android development in React Native great and fun again. This is the official native Material 3 carousel composable rendered using Expo native views. The result is a simple-to-use React component with all native behavior (gestures and transitions) built in.

Oliver Lopez

19,336 views • 1 year ago

An ice sphere lookdev and a fun R&D that may only be 5% seen on the shot I'll use it on. Handcrafted with Blender, Cycles, and JangaFX Software EmberGen. Rendered with OTOY The Render Network. Glass dispersion made possible by SMOUSE 🔸 🏳️‍🌈🏳️‍⚧️ Shaders Plus. #b3d

An ice sphere lookdev and a fun R&D that may only be 5% seen on the shot I'll use it on. Handcrafted with Blender, Cycles, and JangaFX Software EmberGen. Rendered with OTOY The Render Network. Glass dispersion made possible by SMOUSE 🔸 🏳️‍🌈🏳️‍⚧️ Shaders Plus. #b3d

Reynante Martinez

24,588 views • 1 year ago

TypeGPU 💜 Three.js TypeGPU 0.9 can integrate with Three.js Shading Language (TSL) on a very granular level, thanks to the @typegpu/three package. So now, you can write shaders in TypeScript while leveraging the rich Three.js ecosystem! To showcase the integration, we prepared docs and ported a handful of official Three.js examples 👇

TypeGPU 💜 Three.js TypeGPU 0.9 can integrate with Three.js Shading Language (TSL) on a very granular level, thanks to the @typegpu/three package. So now, you can write shaders in TypeScript while leveraging the rich Three.js ecosystem! To showcase the integration, we prepared docs and ported a handful of official Three.js examples 👇

Software Mansion

42,869 views • 8 months ago

Thanks to an Android app called Liquid Glass, I can finally achieve an almost limitless Liquid Glass lock screen experience on One UI. It supports depth effects, lets you tweak all kinds of glass parameters, and even allows full font customization. You can use virtually any font you download, giving you an incredible level of freedom. The results are genuinely stunning. The biggest downside is that the setup is quite complicated. Adjusting the clock, in particular, takes a lot of steps instead of being something you can edit directly, so the learning curve is fairly steep. I really hope the developer can make the customization process more intuitive in future updates, and add more language options, especially Chinese, so more users can enjoy it.

Thanks to an Android app called Liquid Glass, I can finally achieve an almost limitless Liquid Glass lock screen experience on One UI. It supports depth effects, lets you tweak all kinds of glass parameters, and even allows full font customization. You can use virtually any font you download, giving you an incredible level of freedom. The results are genuinely stunning. The biggest downside is that the setup is quite complicated. Adjusting the clock, in particular, takes a lot of steps instead of being something you can edit directly, so the learning curve is fairly steep. I really hope the developer can make the customization process more intuitive in future updates, and add more language options, especially Chinese, so more users can enjoy it.

Ice Universe

52,006 views • 2 months ago