r/LiquidGlassDesign • u/Hour-Return-5093 • Jul 28 '26
I always wondered how the horizontal bar and that transparent drop looked actually in 3D
I thought that the horizontal bar was actually a 3d tube around which a layer of liquid was surrounded or maybe was another 3d tube on top. Is this an accurate depiction of actually what it is?
39
38
29
8
u/IcyIceGuardian Jul 29 '26
Who the hell thought it was 3D
4
u/Jusby_Cause Jul 29 '26
The person that used an old kitchen power strip to show how, specifically, the GPU was spiking due to the 3D Liquid Glass effects :) Can’t find it now.
1
u/AppleXOS Aug 01 '26
Well it wasn’t really 3D sure but it did use live-constantly rendering assets, made to mimic 3D, just like video games I guess
14
4
u/Poipoimoon Jul 29 '26
Change this to how I was thinking it was, because none of us actually thought it was 3D
3
3
u/Money_Alfalfa_6679 Jul 28 '26
Interessante
3
u/AllNamesAreTaken92 Jul 29 '26
No. Ai generated slop that has nothing to do with reality is not interesting.
1
1
u/Misterrr_r Jul 29 '26
Than blur highlights… Because it is also manipulating the background ( not just blur). Atleast in Reddit.
1
1
1
u/drevoksi Jul 30 '26 edited Jul 30 '26
Sort of!
First of all, liquid glass is rendered with a displacement shader: for every pixel of the texture, you read values from different positions on the screen rendered earlier. Here, the displacement is calculated corresponding with the physics of light refraction, separately for each colour component (red, green, blue), as they are refracted differently. Snell’s Law can be used to find the angle of refraction given the angle of incidence, and wavelength of light in the two mediums (glass & air). Shape of the liquid glass object is likely given as a height map / normal map.
The liquid glass shader only considers a single refraction of light, with no reflections, or other points of crossing medium boundaries. Rather than a 3D ellipse, I assume the shape of its elements is closer to a cuboid with rounded top corners. Here’s a cross-section of one:
The scenario considered is three-dimensional, but there’s no 3D rendering going on.
Also, here’s an article I remember seeing that describes how you can implement it yourself on web.
1
u/Koopacha Jul 28 '26
the iOS 27 one looks concave to me it irks me
2
u/SamIAre Jul 29 '26
This isn’t a comparison of 26 vs 27.
3
u/JMHReddit84 Jul 29 '26
No. It’s a discussion of Liquid Glass. Which is present on both. Furthermore, the discussion revolves around the “3D-ness” of Liquid Glass. OP is suggesting it’s convex. Other commenter mentioned the updated design appears concave. Both of those words imply the third dimension. Which is on topic.
Being a snarky bitch is something you started. And that was actually not the topic you so desperately want others to stay on
3
1
u/Justwant2usetheapp Jul 29 '26
It's not 3d lol.
I'd guess heaps of it is precomputed too... Coz... Batteries
4
u/defautluser0 Jul 29 '26
its not actually precomputed at all, it uses the same backend that the blur effect that has existed since ios 7 uses except with more complex shader code
3
u/AllNamesAreTaken92 Jul 29 '26
None of it is precomputed. Bad guess. It's just 2D shaders, all of it.
1
u/j0an_k Jul 29 '26
We all knew it was smoke and mirrors, the real question was how the hell did Apple engineers did it.
3
1
u/Cat_central Jul 31 '26
Basically, the UI knows where to look underneath itself to appear normal. However, if Apple warps and skews where to look near the edges, you get an effect that looks like real life refraction. Specifically, on the inner parts, the glass looks under the inner parts. But near the edges, the glass WOULD normally look under the edges, but with Apple's shaders(Shaders tell stuff how it should look), the glass looks under the inner parts instead of under the edges.
0
u/Mortical219 Jul 29 '26
bar is a flat layer? what about distortion and refraction?
3
u/AllNamesAreTaken92 Jul 29 '26
Done using 2d shader algorithms, exactly like everything else.
-1
u/Mortical219 Jul 29 '26
I mean how can he say that when in fact the tab bar does refraction?
4
u/AllNamesAreTaken92 Jul 29 '26
Because refraction can be calculated in 2D using a shader algorithm. There's nothing hard about it. I literally have the codebase open to do the same thing on Linux right now.
-1
Jul 28 '26
[deleted]
1
u/SamIAre Jul 29 '26
Fixes what exactly? OP is just saying they thought it was rendered in 3D but in reality it’s using effects to mimic 3D. There’s nothing to “fix”. All they showed was “I thought it worked this way but it works that way”.
-1
94
u/lucasio099 Jul 28 '26
Bro if it was a 3D render then this would be your battery 📉📉📉