PANELS

Panels builds high-contrast, toon-shaded reference images for drawing comics. You stage simple 3D figures and props, light them with a single key light, frame the shot at a comic panel aspect ratio, and export a PNG that sits next to your drawing board. It is a blocking and lighting reference generator — not a renderer, not a drawing tool. Everything renders in three grayscale values (white, mid, black) with hard band edges, in the spirit of Wally Wood's spotted blacks.

The loop: build → light → frame → export. A scene takes a few minutes; the drawing it supports takes as long as it takes.

1 · Scenes

Every composition is a scene, stored in your browser (IndexedDB) — your work never leaves your machine, and the server stores nothing. The left sidebar lists your saved scenes as thumbnails — actual renders of each panel — newest first. On launch, your most recent scene opens automatically — and on a first visit, a starter scene (“Happy Walker”) is seeded so there’s something to play with immediately.

Because scenes live in the browser, a different browser or profile has its own separate library. To back up a scene or move it between machines, use Dev mode’s Serialize (copies the scene as JSON) and Load JSON.

• New starts a blank stage and saves it immediately (Untitled, Untitled 2, …) — its tile appears in the panel right away.
• The name field in the top bar names the current scene. Save overwrites it (so renaming = edit the name, hit Save). Save As creates a copy under the current name and switches to it.
• A ● unsaved dot appears next to the name whenever the scene has unsaved changes.
• Hover a thumbnail for its ★ pin and × delete buttons. Pinned scenes always sit at the top of the list.
• Drag tiles to arrange them. Dragging a tile into the pinned block pins it; dragging it below unpins it.
• Destructive actions never use browser popups — the first click arms the action (dashed outline + status-bar explanation), the second click confirms. This applies to loading over unsaved changes, New over unsaved changes, and delete.

2 · Building a scene

Figures

• Two posable figures: Male (Y Bot) and Female (X Bot) mannequins.
• Pose dropdown: named poses (stand-neutral, stand-casual, walk, run, sprint, sit, reach…).
• Clip + Frame scrubber: pick any animation clip (Idle, Walk, Run, Sprint, Sit, Reach) and freeze it at any instant. Scrubbed frames save with the scene exactly; the Pose dropdown shows — scrubbed frame — when you're off the named list.
• Look at: aim a figure’s gaze at the camera, another figure, or any object — eyelines are the currency of dialogue panels. The head follows moving targets live, clamped to anatomical range, and saves with the scene.
• Height slider (0.8–1.2×) sizes a figure without distorting it.
• Figures stay upright by design — they rotate around Y only.

Props

Box, Plank, and Cylinder cover tables, walls, doors, lamps, phones, newspapers — anything at a squint. Exact W / H / D fields plus free gizmo scaling.

Assemblies

Prebuilt multi-part props that behave as a single object everywhere: window-frame (mullioned), doorframe, vehicle-mass (car massing), sill-clutter. Click any part and the whole assembly selects; it moves, rotates, scales (uniformly), duplicates, and deletes as one.

3 · Selecting & editing

• Click an object to select it; Esc deselects.
• Rename: click the selected object’s name in the inspector and type — "Hero" beats "fig-1". Names save with the scene; empty reverts to the auto id.
• Move / Rotate / Scale buttons (or G R S) switch the gizmo. Figures have no Scale — use the Height slider.
• Drop to floor rests the object on the ground plane.
• F re-centers the orbit on the selected object — orbit around the thing you're posing.
• ⌘D duplicates (including pose/frame); Del deletes.
• Silhouette (per object) renders it flat black regardless of lighting — it still casts shadows. The workhorse for value composition.
• ⌘Z undo, ⌘⇧Z redo — 50 steps, covering transforms, deletes, poses, lighting, panel settings. Slider drags count as one step, and undo never moves your camera.

4 · Camera

• Orbit: drag. Dolly: scroll. Pan: right-drag.
• View gizmo (top-right of the stage): T / L / F / R / B buttons swing the camera (a short eased arc — grab the orbit to cancel) to top, left, front, right, or back views around the orbit target, keeping the current distance.
• Focal length 20–200mm (35mm-equivalent).
• Maintain framing (default on): changing focal length dollies the camera so your subject keeps its size — the slider becomes perspective compression. Wide + close exaggerates depth; long + far flattens it. Untick for plain FOV zoom.
• Dutch angle: roll the camera ±30° — the classic unease tool. Serialized with the scene; Reset Camera levels it.
• Reset camera (or Home) restores position, target, focal length, and roll to the values from when the scene loaded. Only the camera resets.
• Setups (coverage): save the current camera as a named bookmark — stage a scene once, then keep "Master", "OTS on A", "CU B"… and click between them like film coverage. Double-click a chip to rename. Export all renders a PNG per setup — a whole dialogue page from one staging. (Allow multiple downloads when the browser asks.)
• 180° axis guide: select a figure who is looking at another figure and an editor-only overlay appears — the axis of action between them, with a shaded half-disc on the camera’s current side. Keep your coverage on one side and the eyelines stay consistent across panels; if the disc flips, you’ve crossed the line.

5 · Lighting & the look

Convention over configuration: the visible controls are the one key light — azimuth, elevation, intensity. Everything else follows smart defaults: hard-edged cast shadows always on, black background, ground plane present, elevation runs negative for underlighting (horror/campfire light), no fill light, 5-step value shading (the art-class value scale), and editor-only edge guides that keep same-value objects readable (never in exports).

The full machinery is still inside, just tucked away for now — toon band shading with a threshold slider, natural smooth shading, background values (white/mid/black/split), fill light, and per-control toggles. Scenes saved with those settings load faithfully, and Dev mode’s Load JSON can set any of them. A future expert mode may surface them again.

6 · Panel & export

• Aspect: 3:4, 4:3, 1:1, 2:1, 1:2, or custom w:h.
• Grid: thirds (default) or center-cross composition guides on the frame overlay — editor-only, never exported.
• Borders: per-side checkboxes (T/R/B/L) — open-panel compositions drop specific edges; borderless "floating" panels drop all four.
• Export PNG renders exactly the frame region at 2048px long edge, supersampled, named panel-<scene-name>-<timestamp>.png, straight to Downloads. What you frame is what you get — and the framing is independent of your window size or shape: the focal length defines the panel’s view, and exports are identical on any screen.

7 · Dev mode

The Dev button reveals plumbing: Serialize scene copies the current scene as formatted JSON to the clipboard, and Load JSON applies pasted scene JSON. Useful for backing up scenes as text, hand-tweaking values, or moving a scene between machines.

Keyboard reference

Under the hood

ASP.NET Core + vanilla three.js ES modules — no build step, no frameworks. Scenes are a single JSON document (schema v1) stored in the browser via IndexedDB — the server is fully stateless and serves only the app itself; the dev serializer speaks the same format. Figures are Mixamo's X Bot / Y Bot mannequins with retargeted clips, toon-shaded by a shared gradient-map material so a threshold change is one cheap update. Run it with dotnet run (or dotnet watch) in Panels.Web/ and open http://localhost:5099.

This manual was generated from the live tool — the screenshots are real captures of a real scene ("Happy Walker").