I rebuilt the NANEX-style 3D Depth Mapper… for crypto.

JS + three.js + WebGL2 + Binance WebSocket streams = a real-time 3D order book & tape you can fly through. Because flat charts are comfy—until you need to see where size is actually hiding. 😉

What it is (at a glance)

• Client-side, zero-install Web app (PWA-ready). Pure JavaScript/TypeScript on the front end.

• 3D market microstructure: price axis, size axis, and a “time/depth” axis, with a golden plane locked to current price.

• Cameras: Orbit / Top / Side / Front / Free with inertia, damping, and keyboard shortcuts.

• Made for flow: liquidity walls (🟢 bids / 🔴 asks), voids/gaps, tape particles, and per-price cumulative depth—all live.

Data Ingest & Synchronization

• Streams: @depth@100ms, @aggTrade, @bookTicker from Binance Spot/Futures over WSS.

• Bootstrapping: seeds L2 from REST snapshot (/depth?limit=1000), aligns with lastUpdateId, then applies incremental diffs.

• Drop/Gap recovery: sequence tracking, checksum verification (when available), automatic resync on out-of-order or missed IDs.

• Backpressure handling: adaptive throttling + coalescing (per-price accumulator) under burst.

• Clock alignment: server timestamp drift correction; monotonic event time for consistent tape decay.

• Symbol normalizer: tick-size & lot-size aware, integerized price grid to avoid float drift.

Rendering Engine (WebGL2 + three.js)

• GPU-accelerated everything:

  • InstancedMesh for thousands of depth bars and volume tiles.

  • Dynamic VBO updates via BufferAttribute.setUsage(DynamicDrawUsage) and sparse region updates.

  • Frustum culling + LOD rules (drop distant micro bars).

• Materials & Shaders:

  • Custom GLSL vertex/fragment shaders for signed volume coloring (green↔red), alpha falloff, and time-decay.

  • Log/linear scaling for size with gamma correction to keep “whales” visible without flattening the book.

  • Optional FXAA pass; MSAA when supported.

• Tape particles:

  • One particle per trade, GPU-instanced quads with size mapped to qty and hue mapped to aggressor side.

  • Time-to-live & fade-out done in shader (no per-frame CPU churn).

• Golden plane:

  • Physical plane anchored to markPrice/indexPrice (configurable), providing context for micro-moves.

Data Structures & Math

• Lock-free ring buffers (typed arrays) for tick/event queues.

• Price ladder as contiguous Float32Array with prefix sums for instantaneous cumulative depth.

• Spatial hashing for price→mesh index, enabling O(1) updates of individual bars.

• Aggregation:

  • Configurable L2/L3: group by n * tickSize buckets.

  • Rolling window order-book imbalance: (bid - ask) / (bid + ask) per slice.

• Derived metrics (overlays):

  • Spread, mid, imbalance heat, absorption score (trade volume vs. resting depth), micro-trend slope, “iceberg suspicion” (rapid refresh at same level).

Concurrency & Latency

• Web Workers for JSON parse & diff application; UI thread reserved for render.

• Optional OffscreenCanvas path (Chrome/Edge) to push all draw calls off the main thread.

• End-to-end latency: sub-100 ms on a normal laptop in burst scenarios; typical steady-state ~40–60 ms.

• Reconnect logic with exponential backoff + state warm-start from last valid snapshot.

UI / UX for Operators

• Camera presets + smooth transitions; gizmo with axes & grid snapping.

• Selection/raycasting: hover any price level to read cumulative depth, recent trades at/near that level, and last change delta.

• Hot keys: toggle overlays, switch aggregation, freeze frame, recenter on price.

• Themeable (dark by default), dpi-aware, and resize-stable.

• Performance HUD: FPS, object counts, particle count, stream status.

Profiling & Stability

• GC-friendly: object pools, typed arrays, minimal allocations per tick.

• Micro-benchmarks in dev mode; frame budget enforcement (drops non-critical updates first).

• Error fences around stream handlers; telemetry events (dropped seq, resyncs, parse spikes).

Tech Stack Shout-outs

• JavaScript/TypeScript, three.js, WebGL2, GLSL

• WebSocket (binary-capable client), Web Workers, OffscreenCanvas

• Vite build, ES modules, PWA manifest, Workbox (optional) for cache

• Zod (schemas for stream payloads) + ts-pattern (exhaustive switching)

• Vitest + Playwright for headless render & input sanity checks

Roadmap (already spiked)

• Multi-venue aggregation (Binance + Bybit + OKX) with per-venue color ribbons.

• Session recording & time-scrub replay.

• Custom shader nodes for adaptive transparency based on micro-volatility.

• RESTful snapshot fallback cache & offline demo mode.

• Simple API for alerts: “ping me when size ≥ X appears within Y ticks of price”.

Why this, why now?

Because “green candle means number go up” is a nice bedtime story. Markets move on liquidity, not feelings. This lets you see the book breathe—spoofs, absorptions, air pockets—while they happen. Screenshots don’t fill bags. 😉

Dropping soon for the fam. 🧠⚡️🚀