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.

Fork of an old demo - "Liquid glass" effect using #threejs MeshPhysicalMaterial with a fully ray marched surface made of SDFs Live: Code:

Faraz

4,668 subscribers

25,937 views • 1 year ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

This glass configurator has no custom shaders or geometries. Just MeshPhysicalMaterial and a bunch of standard geometries with rendering order set manually. Not 100% realistic but super simple Live demo & source code: Made with Three.js Hosted on CodePen.IO

This glass configurator has no custom shaders or geometries. Just MeshPhysicalMaterial and a bunch of standard geometries with rendering order set manually. Not 100% realistic but super simple Live demo & source code: Made with Three.js Hosted on CodePen.IO

Ksenia Kondrashova

59,771 views • 3 years ago

[LIVE DEMO] Check out our latest WebGL demo, exploring a fluid cellular particle effect. Full write up and details of what's going on under the hood coming soon 🔍 Live → #webgl #realtime #threejs

[LIVE DEMO] Check out our latest WebGL demo, exploring a fluid cellular particle effect. Full write up and details of what's going on under the hood coming soon 🔍 Live → #webgl #realtime #threejs

Unseen Studio®

12,116 views • 1 year ago

Of course Keita Yamada had a web 'liquid glass' demo in 2019 🐐🇯🇵!

Of course Keita Yamada had a web 'liquid glass' demo in 2019 🐐🇯🇵!

Brotzky

50,520 views • 1 year ago

Draw GLSL flowers with your cursor! 🌺 One full-screen plane, two render targets, and a bit of shader magic Live demo & source code: Made with Three.js Hosted on CodePen.IO Special thanks to The Book of Shaders #webgl #glsl #threejs #shader #drawingtool

Draw GLSL flowers with your cursor! 🌺 One full-screen plane, two render targets, and a bit of shader magic Live demo & source code: Made with Three.js Hosted on CodePen.IO Special thanks to The Book of Shaders #webgl #glsl #threejs #shader #drawingtool

Ksenia Kondrashova

28,620 views • 3 years ago

I wanted to create a broken glass effect with WebGL for a long time! Here it is: interactive, lightweight (around 10KB of GLSL + vanilla JS), and easy to customise (find more controls on codepen) Live demo & source code: Hosted on CodePen.IO

I wanted to create a broken glass effect with WebGL for a long time! Here it is: interactive, lightweight (around 10KB of GLSL + vanilla JS), and easy to customise (find more controls on codepen) Live demo & source code: Hosted on CodePen.IO

Ksenia Kondrashova

43,711 views • 1 year ago

Insane that you can get this with one line of code .glassEffect(.clear.tint(.blue)) I love Liquid Glass so much

Insane that you can get this with one line of code .glassEffect(.clear.tint(.blue)) I love Liquid Glass so much

Jose

93,628 views • 1 year ago

🚀 With Expo Router and iOS 26, you now get the fully native liquid glass search bar, no extra code, no custom setup. Just compile your app with Xcode 26 and it works out of the box.

🚀 With Expo Router and iOS 26, you now get the fully native liquid glass search bar, no extra code, no custom setup. Just compile your app with Xcode 26 and it works out of the box.

Beto

39,513 views • 11 months ago

THIS BOT MADE $1.6M WITH 50,000 TRADES USING JUST 18 LINES OF CODE.

THIS BOT MADE $1.6M WITH 50,000 TRADES USING JUST 18 LINES OF CODE.

0xMarioNawfal

116,225 views • 5 months ago

Speaking of vocals, here's a old version of the chorus with a different vocal and lyric idea. These were temp vocals I made with SynthV for demo purposes.

Speaking of vocals, here's a old version of the chorus with a different vocal and lyric idea. These were temp vocals I made with SynthV for demo purposes.

AJ DiSpirito

111,704 views • 3 months ago

trying out the upcoming ssgi effect (paired with ssr). i guess all i ever wanted out of three is reflections and global illumination. come next three we'll have it. 🫡 live demo link (+ code) below ↓

trying out the upcoming ssgi effect (paired with ssr). i guess all i ever wanted out of three is reflections and global illumination. come next three we'll have it. 🫡 live demo link (+ code) below ↓

☄︎

25,697 views • 10 months ago

A Three.js and GLSL mathematical lattice engine that morphs between four geometric topologies, with a glass dock for shape switching and a live telemetry overlay calculating phase coherence. Demo and code 👇

A Three.js and GLSL mathematical lattice engine that morphs between four geometric topologies, with a glass dock for shape switching and a live telemetry overlay calculating phase coherence. Demo and code 👇

Techartist

14,590 views • 2 months ago

Try making images 3D with the click of a button by using the scene creator 🌄 #threejs #ai

Try making images 3D with the click of a button by using the scene creator 🌄 #threejs #ai

Instorier

312,799 views • 3 years ago

Imagining UI components as jelly is oddly satisfying… this time it’s a “Jelly Switch”, built using TypeGPU without any extra libraries. Live demo & Code: Once again, SDFs gave us a lot of freedom to make the form of the object dynamic and jiggly. Konrad built a great foundation for implementing SDF-based UI components, can’t imagine us stopping here 👀 If you’re interested in WebGPU and are a TypeScript developer, I can’t recommend TypeGPU enough (toootally unbiased opinion)

Imagining UI components as jelly is oddly satisfying… this time it’s a “Jelly Switch”, built using TypeGPU without any extra libraries. Live demo & Code: Once again, SDFs gave us a lot of freedom to make the form of the object dynamic and jiggly. Konrad built a great foundation for implementing SDF-based UI components, can’t imagine us stopping here 👀 If you’re interested in WebGPU and are a TypeScript developer, I can’t recommend TypeGPU enough (toootally unbiased opinion)

Iwo Plaza | TypeGPU

173,136 views • 9 months ago

$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 👇$

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

54,934 views • 11 days ago

New version of @⁠callstack/liquid-glass has been released! This one makes use of the new iOS 26 API for border radius, making it compatible with context menus from Zeego 🔥 You can now achieve this awesome merge effect ⬇️

New version of @⁠callstack/liquid-glass has been released! This one makes use of the new iOS 26 API for border radius, making it compatible with context menus from Zeego 🔥 You can now achieve this awesome merge effect ⬇️

Oskar

23,299 views • 10 months ago

Excited to announce the launch of my new #WebGL performance monitor tool: stats-gl! A minimalist solution for real-time WebGL performance metrics - FPS, CPU, and GPU. Repo: Live demo: An example for #threejs is also available😊

Excited to announce the launch of my new #WebGL performance monitor tool: stats-gl! A minimalist solution for real-time WebGL performance metrics - FPS, CPU, and GPU. Repo: Live demo: An example for #threejs is also available😊

Renaud

34,066 views • 3 years ago

New favorite noise function! I had lots of fun tweaking the yonatan shader and ended up using it as a semi-transparent overlay With color changing on scroll and slight cursor response, the total code size is still <9 kb 🫣 Live demo & source code: Original algorithm:

New favorite noise function! I had lots of fun tweaking the yonatan shader and ended up using it as a semi-transparent overlay With color changing on scroll and slight cursor response, the total code size is still <9 kb 🫣 Live demo & source code: Original algorithm:

Ksenia Kondrashova

20,374 views • 2 years ago