Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 1 yıl önce •via X (Twitter)

#threejs
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

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

Benzer Videolar

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 görüntüleme • 3 yıl önce

[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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 3 yıl önce

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 görüntüleme • 1 yıl önce

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,628 görüntüleme • 11 ay önce

🚀 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 görüntüleme • 11 ay önce

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 görüntüleme • 4 ay önce

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

111,215 görüntüleme • 3 ay önce

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 görüntüleme • 10 ay önce

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 görüntüleme • 2 ay önce

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,768 görüntüleme • 3 yıl önce

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

173,136 görüntüleme • 9 ay önce

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 görüntüleme • 9 ay önce

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 görüntüleme • 3 yıl önce

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 görüntüleme • 2 yıl önce

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,834 görüntüleme • 8 ay önce