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, the pane you draft is ticked like a rule, a moving volume reads its clearance to the nearest neighbour, and a plate dropped on a taller one climbs onto it.
Try it: vernier — drafting table × three.js — 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.
A few implementation notes, since that’s what this forum is for:
The plan/perspective seam. One PerspectiveCamera whose fov 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 are BoxGeometry with a ShaderMaterial that draws the grid on every face in world space from dFdx/dFdy footprints, so hairlines stay one pixel wide at any angle and fade before they alias.
Analytic shadows, baked. The sun is fixed, so the ground’s soft shadows and contact occlusion are rendered once into a sheet-space texture whenever the model changes, and each volume tests only the neighbours that can actually shade it. 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 I wrote as the background for my own site. Repo: GitHub - lucasporterbakker/vernier-gl: Interactive drafting table in WebGL — draw a plan on an 8px grid, tilt the sheet, sculpt it in perspective. One fragment shader, zero dependencies, plus a three.js edition. · GitHub
Curious what people make with it — post your links.