Hidden-Line Wireframe Screensaver
The Hidden-Line Wireframe screensaver draws rotating solids as edges only, but with the rear edges correctly hidden behind the faces in front of them. It runs in the browser with nothing to install; press ESC to exit.
Live preview
Press ESC to leave fullscreen. Settings are saved in your browser only.
How the Hidden-Line Wireframe screensaver works
The saver renders with three.js on your GPU. The library is vendored into this site rather than fetched from a CDN, and is loaded only when a 3D screensaver actually runs.
It reads nothing external — generated and rendered in the browser with three.js.
The scene resizes with the window and releases its WebGL context when the saver stops, so shuffle mode and Multi-view can cycle 3D savers without exhausting the browser's context limit.
If WebGL is unavailable the saver says so on screen rather than showing an empty black box.
The hidden-line problem in computer graphics
Hidden-line removal is one of the earliest problems in computer graphics; the first known solution was devised by L. G. Roberts in 1963, in his MIT PhD thesis, and it was restricted to convex objects. A wireframe drawing shows only edges, so it is ambiguous. The Necker cube, first published by Louis Albert Necker in 1832, is a wire-frame cube with no visual cues to its orientation, so perception flips between two readings of which face is nearer.
Later approaches work on the geometry or the pixels. The painter's algorithm sorts polygons by their barycentre and draws them back to front, so nearer ones cover distant ones, though it can fail for intersecting surfaces. Modern hardware uses a depth buffer, or Z-buffer: each pixel's depth is compared with the stored value, and a fragment that is further away is rejected, otherwise it is shaded and its depth replaces the stored one.
A common trick for this look is to render the faces in the background colour and then draw the edges on top. The faces write depth values but are invisible, so edges lying behind them fail the depth test and vanish, while edges in front stay visible. A small depth offset on the faces helps avoid flicker where depths are nearly equal.
A worked example
Each shape is drawn twice: once as opaque faces in exactly the background colour, and once as its edges. The invisible fill writes to the depth buffer, so any edge behind a surface fails the depth test and never appears. The result is a wireframe that reads as a solid object rather than a transparent cage, and it cycles through a knot, an icosahedron, a torus and others.
Settings & tips
- Accent and Background recolour the scene; Speed changes the pace of both the motion and the camera.
- Add it to a Multi-view grid, though 3D savers are heavier than the 2D ones and a few per screen is plenty.
- Press ESC at any time to leave fullscreen.
Frequently asked questions
- Why is hiding lines hard?
- Because it is a visibility problem, not a drawing problem. Sorting shapes back-to-front works for separate objects but fails for a single object whose own front hides its own back. Using a depth buffer solves it per pixel.
- Why does the fill match the background?
- So it is invisible while still occupying depth. You see only the edges, but the solid is genuinely there as far as the renderer is concerned.
- Does this need a special browser or plugin?
- No. It uses WebGL, which every current desktop and mobile browser supports. Nothing is installed and no plugin is required.
- Does it cost anything or need an account?
- No. Every screensaver here is free, runs in the browser and needs no sign-up.
- What is a Z-buffer?
- It is an image-sized array holding the depth of the nearest surface drawn at each pixel. A new fragment is shaded only if it is closer than the stored value, which then replaces it.
- What is the Necker cube?
- It is a wire-frame cube drawing with no cues to its orientation, first published by Louis Albert Necker in 1832. Either of two faces can be seen as the front, which shows why hidden edges matter.