HOME
Sajjad Portfolio
2026
Blog A shader that fakes depth 1 MIN

WebGL

A shader that fakes depth

You do not need real geometry to make a flat image read as a volume. A blurred copy of the image is enough.

You do not need real geometry to make a flat image read as a volume. A blurred copy of the image is enough to tell you roughly how far inside the subject each pixel sits.

The trick

Generate mipmaps for the source texture and sample a heavily blurred level. Bright areas of that blur are the interior of the shape; edges fall away. Use it to push points along the view axis and the silhouette gains thickness.

Keeping the edges

The blur alone loses all the detail. Subtracting it from a sharp sample gives you the relief, which can be layered back on at a much smaller amplitude.

What it costs

Two texture reads per point and no extra geometry at all. On a mid-range phone that is the difference between shipping the effect and cutting it.

This is sample article content. Replace it with your own writing.

Filed under WebGL
ALL POSTS

Leave a reply

Your email address will not be published. Required fields are marked *