Label a prototype so readers can evaluate the real work
Use AXON to separate live interface behavior, simulated data, design targets, and unavailable actions, with a practical copy and review method.
Build it. Understand it.
Practical notes from a browser-software workshop. Rendering decisions, failure paths, and interface details you can inspect and try.
Published by Joel Ryan, with AI assistance. Sources, methods & corrections
Start with the problem you are solving
Render a scene
Understand camera motion, draw calls, and the cost of every pixel.
Compare camera responsesCalculate a pixel budgetKeep the browser usable
Plan for failed loading, sound permissions, and unreliable connections.
Build a reading fallbackFollow a multiplayer updateExplain an interface
Make actions, evidence, and prototype limits clear to the reader.
Review a prototype’s claimsDesign an action recordAll field notes
12 field notes
Subscribe by RSS / AtomNo notes match these filters. Try a shorter phrase or choose another topic.
Camera smoothing: exponential damping or a spring?
Compare two camera-follow models with a working response plot, a frame-rate-independent damping formula, and an exact critically damped spring step.
Browser multiplayer with Supabase: transport, state, and trust
Follow Signal Strike’s relay and browser-host design, work through snapshot interpolation and message counts, and identify which guarantees the architecture cannot provide.
Three.js instancing: what one draw call actually means
Build a valid instance batch, use per-instance attributes, and account for geometry families, shadows, and animated bounds when counting rendering work.
A WebGL quality governor that measures its own limits
Inspect the Lab’s real quality thresholds, calculate the pixel cost of DPR, and distinguish frame pacing from GPU time before changing rendering quality.
Ship compressed 3D assets without breaking colour or coordinates
Follow the repository’s Blender, Draco, and KTX2 pipeline, inspect actual file sizes, and avoid double colour conversion, axis errors, and misleading compression claims.
A browser chime with a real start, stop, and voice limit
Build an opt-in Web Audio chime with an envelope, explicit cleanup, and bounded overlap, using the Lab’s actual sound graph as a reference.
Test a WebGL page without mistaking a hook for proof
Use browser diagnostics, bounded polling, rendered inspection, and recorded source versions to distinguish a successful build from a working WebGL experience.
Make a WebGL page useful when the scene cannot run
Build the reading page first, enhance it after a real frame, and handle disabled scripts, reduced motion, failed assets, and lost graphics contexts.
Design an action record that can explain an uncertain outcome
Work through a proposed publishing action, distinguish intent from execution, and design an audit record that handles timeouts, retries, redaction, and verification.
Turn a latency headline into a testable budget
Define a hand-off boundary, allocate a hypothetical 40 ms budget, and plan percentile measurements without presenting a design target as a production result.
Make an approval mean one specific action
Design an approval contract around a resource, revision, scope, and expiry; then handle changed inputs, revocation, duplicate requests, and uncertain execution.