Vernier

A drafting table in the browser. Draw rectangles on a flat 8px grid and they stay as your plan. Scroll, and the sheet tilts: the camera lifts from plan into perspective and every rectangle stands up into a volume you can sculpt.

The middle of a face is a hand that slides it; an edge is a handle that stretches the footprint or pulls the height. Everything snaps to the grid and every dimension stays live — type a number mid-gesture and the edge goes there, a moving volume reads its clearance to the nearest neighbour, and a plate dropped on a taller one climbs onto it.

Try it live — best on a trackpad: scroll tilts, a sideways swipe orbits, pinch zooms. Left alone on an empty sheet it drafts a city block of its own; click anywhere to take over. Whatever you draw is in the URL, so the address bar is a share link.

Under the hood

• The plan/perspective seam. One camera whose field of view morphs from 2° to 31° while the dolly compensates, so the flat plan stays pixel-true and nothing pops when the sheet starts to tilt.
• Graph paper as a material. The volumes draw their grid on every face in world space from screen-space derivatives, so hairlines stay one pixel wide at any angle and fade before they alias.
• Analytic shadows, baked. The sun is fixed, so soft shadows and contact occlusion render once into a sheet-space texture whenever the model changes. Shadow maps would blur the hairlines; this keeps them crisp and makes orbiting free.
• Render on demand. Zero requestAnimationFrame at idle, measured. The loop runs only while something eases.

It grew out of vernier-gl, a small interactive-grid shader written as the background for my own site — one fragment shader, zero dependencies, plus a three.js edition. There's a write-up on the three.js forum.