Four ways to make a computer drawing look hand‑drawn

Every pane in the lab renders the same cube, torus knot, sphere and floor. What differs is how each one decides where to put ink. No prior graphics knowledge assumed.

Two problems, not one

“Make it look drawn” is really two separate jobs, and every method here solves both. It helps enormously to keep them apart:

• Shading — where the dark bits go. A renderer would smoothly darken a surface as it turns away from the light. An illustrator instead lays down hatching: strokes, and more of them where it needs to be darker.
• Outlines — the line around things. Photographs have no outlines; drawings almost always do. Something has to decide where the edges of an object are and ink them.

The four panes are arranged so that each neighbouring pair changes exactly one thing. B and C share an outline and differ only in the shading. C and D share the shading and differ only in the outline. That is the entire point of the layout.

The idea all four share: the boil

Watch any pane for a few seconds and the ink visibly twitches. That is deliberate, and it is called boil.

In hand-drawn animation every frame is redrawn by hand, so no two frames have identical strokes. The lines shimmer slightly. Our eyes read that shimmer as “a person drew this”. A computer, left alone, produces a perfectly steady image — which instantly reads as machine-made.

So all four panes redraw their ink a few times a second and hold it still in between, exactly like stop-motion animation shooting “on twos”. In the code this is a single shared line: take the clock, multiply by a speed, and throw away the fractional part. Everything downstream then changes only on whole ticks.

Method A — Inverted Hull

The outline: a slightly bigger copy, inside out

Take the object. Make a second copy, slightly inflated, painted solid black, and turned inside out so you only see its back surfaces. Put the real object in front of it. The black copy is hidden everywhere except for a thin rim poking out around the edges — and that rim is your outline.

It is cheap, it is rock steady when the camera moves, and it composites correctly with everything because it is genuinely geometry, not an effect painted on afterwards.

It also cannot draw a line where an object passes in front of itself — look at the torus knot where the tube crosses over. There is no outer edge there, so a hull produces nothing.

The shading: one sheet, faded in

A single crosshatch texture is multiplied over the surface, more strongly where the light does not reach. Like a dimmer switch on the hatching.

The catch is the middle of the range. Fading a drawing halfway gives you grey mush — it loses its clean whites and its solid blacks at the same time. That problem is exactly what method B was built to fix.

Method B — Screen-Space Line Art

The outline: draw a line wherever the colour changes

Think about how an atlas draws borders between countries. The cartographer did not measure a fence. They drew a line wherever the colour changed. That is the whole trick.

This method renders the scene an extra time first, into three fake images you never see:

• a fog image — bright close up, dark far away
• a rainbow image — each colour means “this surface points that way”
• a paint-by-numbers image — every object filled with one flat random colour

Then every pixel on screen turns to its four neighbours and asks three questions:

Each question has a blind spot on its own, which is why all three are needed. Object-identity alone gives clean silhouettes but nothing inside them. Depth alone misses a crease — a cube’s corner has no depth jump, the surface just turns. Direction alone misses a flat object in front of a flat wall, because both face the camera identically.

What this buys over method A is the line where the torus knot crosses itself: same object, so the identity question is useless, but the depth question fires loudly. It also gives a line that is the same thickness in pixels at any distance.

The cost is that the line lives on the screen rather than on the model, so it swims very slightly as the camera moves.

The shading: four pens instead of a dimmer

An illustrator shading a sphere does not press harder on one pen. They reach for a denser pen. So this method keeps four drawings on hand:

• bare paper — the highlight
• sparse lines, one direction — light shading
• crosshatch, two directions crossing — mid-tone
• dense crosshatch, three directions — deep shadow

Lighting picks where you are on that ladder and blends the two nearest pens. Because it never fades a drawing — it swaps to a denser one — pure paper stays pure and dense hatching stays properly black. No grey mush.

Method C — Blender Sketch Shader

This one is a port of a shader built in Blender, and it differs from A and B in three interesting ways.

The marks live on the paper, not on the model

In A and B the strokes are glued to the surface, so they rotate with the object. Here they are fixed to the screen — the page you are looking at. Spin an object and the ink stays put while the shape turns underneath it.

That is much closer to how a real drawing works, and it dodges an awkward problem: strokes glued to a model get stretched wherever the model’s texture layout is stretched. Look at the torus knot in panes A and B and you can see the hatching smeared along the tube like wood grain. Pane C never has that.

Tone comes from the actual lighting

A and B ignore the real lights and shade off a hand-set direction, so an artist can dictate exactly where ink begins. C reads the finished, fully lit image and converts brightness into mark density.

It gets cast shadows for free that way — a shadow makes the surface darker, darker means more marks, so shadows turn into hatching with no extra machinery at all. What it gives up is that fine artistic control.

Strokes appear one at a time

The clever part. Each stroke in the texture is stored with a rank: drawn first, drawn second, drawn last. As an area needs to go darker, strokes appear in that order — arriving in the gaps between the strokes already there, never on top of them.

That is what a real artist does when an area needs more weight, and it means one greyscale image covers the entire range from paper to solid black. Pane C spends that freedom on six different mark styles instead — crosshatch, lines, scribbles, stipples and so on, switchable live.

Method D — Object-Space Line Art

D uses C’s shading unchanged. Only the outline is different, and it is the most ambitious of the four: the same approach Blender’s Grease Pencil “Line Art” uses.

Work out the edges from the shape itself

Instead of hunting for edges in an image, D examines the 3D model directly. A 3D shape is built from thousands of flat triangles. For every edge shared by two of them, it asks one question: do these two triangles disagree about facing the camera? If one faces you and its neighbour faces away, that edge is on the silhouette. Exactly, with no guessing.

Then join them into strokes

This is the step that makes D worth the trouble. The surviving edges are linked end to end into continuous lines — actual strokes with a beginning, an end, and a measurable length.

Once you have that, you can say things the other methods cannot express at all: “lift the pencil forty percent of the way along this stroke”. That is how D does its gaps — the outline breaks up the way a hand lifts off the page, rather than being erased by a pattern that happens to overlap it. It is also why D can round its corners: it smooths the stroke, the way a hand does, rather than modifying the model.

The honest catch: working all this out is done by the CPU, in JavaScript, and the cost grows with how detailed your models are. It is comfortable on four simple shapes and would not be on a whole game level.

Side by side

One last thing

Every texture in the lab — every crosshatch sheet, every mark style, the paper grain itself — is drawn from scratch in your browser when the page loads. Nothing is downloaded. That is the pause on the loading screen: tens of thousands of individual pencil strokes being laid down, one at a time, before the first frame appears.