Put a straw in a glass of water and it breaks.
Not really, obviously. The straw is fine. Your eyes are fine. The world is fine. But somewhere between the air, the water, and your retina, the path of light quietly changes its mind.
That tiny bend is the whole trick.
This is what we’re building in this series: a piece of animated glass in WebGL. Not just a blur slapped over a background, but a shader that bends an image, splits color at the rim, brightens at grazing angles, and starts to feel like something light is actually passing through.
We’ll get there from the ground up. First, we’ll talk about what it means for light to slow down. Then Snell’s law. Then Fresnel. Then dispersion. Then the practical cheats that make “glass” feel convincing on a screen even when there’s no real glass there at all.
By the end, the shader stops looking like magic and starts looking like a set of small, understandable decisions.
What’s coming
Part 1 starts with the physics: why light slows down inside glass, what a refractive index actually measures, and how Snell’s law, Fresnel reflection, total internal reflection, and dispersion all fit together.
Part 2 looks at interface glass: Apple-style blur, translucent panels, why they feel physical, and which parts of the real optics they fake, skip, or exaggerate.
Part 3 builds the WebGL version: texture sampling, distortion, chromatic offsets, rim light, blur mixing, and the GLSL that turns all of that into the object above.
It starts with a straw that looks broken.