Experiment 01

Refraction Techniques

Screen-space, virtual-plane, and html-to-image refraction

Published: Jun 16, 2026

Updated: Oct 15, 2026

Reset

Glass bends light, so whatever sits behind it shows up shifted. None of these cubes simulate real light: for every pixel, the shader picks which point of the image behind it to show. Screen-space refraction moves that point sideways by however much the surface tilts there, so the picture slides on each face but keeps its size, as if pasted onto the glass. Virtual-plane refraction bends each view ray the way glass would and follows it to an image a set depth behind the cube, which squeezes the picture too, so it reads as something sitting behind the glass. The third cube has no refraction, for reference.

Screen-space

Virtual plane

No refraction

The same grid through each cube, at the demos' default settings. Screen-space moves every point on a face by the same amount, so the grid keeps its size and slides. Virtual plane traces each point to an image behind the cube; the face's near corner is further from it than the rim, so its rays drift further and the grid is squeezed

The cubes above refract an image inside the 3D scene; this one refracts the website itself. The word behind it is ordinary HTML, with the Three.js canvas sitting transparently on top. The html-to-image library rasterises that HTML into a texture for the same screen-space shader as the first cube, so what bends through the glass lines up with the real text behind it. The catch is that it's a snapshot: anything that moves has to be captured again, which is too slow to do every frame. I took the idea further in Liquid Glass, which bends the live page through an SVG filter instead of a picture of it, and in 3D Glass, where a Three.js model drives that filter.