Core Architecture
| Component | Technology |
|---|
| 3D Engine | Three.js 0.160.0 (invisible skeleton) |
| Rendering | SVG-based custom pipeline |
| Language | Vanilla JavaScript (ES6) |
| Build System | Python build script (HTML injection) |
| Dependencies | None (zero frameworks) |
Rendering Pipeline
- Three.js Skeleton: Invisible 3D hierarchy for math (IK, raycasting)
- SVG Overlay: Custom hand-drawn rendering
- Depth Sorting: Dynamic layering with paper halos
- Wobble Effect: Seeded pseudo-random jitter for hand-drawn aesthetic
Data Storage
| Key | Purpose |
|---|
strich_poses | Individual poses (localStorage) |
strich_scenes | Complete multi-figure scenes (localStorage) |
Performance Optimizations
- Memory pools for Three.js objects (Vector3, Quaternion, Matrix4)
- Dirty flag pattern (SVG only re-renders when changed)
- DOM pooling (SVG elements reused, not recreated)
- Single raycaster per frame for joint selection
Project Structure
src/ — Source files (HTML, CSS, JS)
html/ — Built output (index.html)
docs/ — End-user documentation
dev_docs/ — Developer notes and plans
scripts/ — Build automation
website/ — Info website (this)
← Back to Home