Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

CantBeFaraz's profile picture

Faraz

4,668 subscribers

25,937 Aufrufe • vor 1 Jahr •via X (Twitter)

#threejs
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche 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
0:16

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

[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
0:12

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

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

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

Brotzky

50,520 Aufrufe • vor 1 Jahr

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
0:13

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

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
0:18

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

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

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

Jose

93,598 Aufrufe • vor 11 Monaten

🚀 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.
0:12

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

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

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

0xMarioNawfal

116,225 Aufrufe • vor 4 Monaten

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.
0:17

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

110,756 Aufrufe • vor 2 Monaten

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 ↓
0:18

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

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 👇
0:15

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

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

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

Instorier

312,547 Aufrufe • vor 3 Jahren

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)
0:16

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

171,894 Aufrufe • vor 8 Monaten

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 ⬇️
0:11

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

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😊
0:11

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

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:
0:13

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

the ux of this ikea hack tool is so cool a minimal real time preview of your 3d part before printing. made with threejs
0:15

the ux of this ikea hack tool is so cool a minimal real time preview of your 3d part before printing. made with threejs

Aurelien

219,442 Aufrufe • vor 7 Monaten