Skip to content
Stylize · TechniqueIntermediate

Outlines

Draw ink lines around silhouettes and along the edges inside an image.

UVPositionNormalScreenVertexScreen / post

Cards

2 live examples to tweak, learn and copy.

How it works

Lines are what make a render read as a drawing. There are two families of ways to get them, and they fail in opposite places, which is why this technique has two cards.

Geometry: the inverted hull. Draw the mesh a second time, slightly inflated along its normals, in the line color, with its front faces culled. Only the inside of the far side of that shell gets drawn, and the real mesh hides all of it except a rim around the silhouette. It runs in the vertex stage, needs no screen read, and ports to any engine that can draw a second material pass. It only outlines contours, where a surface turns away from the camera, and costs a second draw of every outlined mesh.

Image: edge detection. Render the scene first, then run a post-processing pass that compares each pixel with its neighbours through a small kernel, such as the Sobel operator, and draws ink wherever the image changes sharply. One full-screen pass outlines everything at once, inner edges included, at a cost that doesn’t grow with the number of meshes. It sees only what ended up on the screen, so it misses edges between two surfaces of the same color and finds edges in textures you didn’t want outlined.

Production renderers run the edge detection on the depth buffer and the normals as well as the color, which finds creases and overlaps the color alone can’t. The Sobel card here starts with color only, the simplest version and the one any post pass can do.

Further reading