Accelerator Visualizer

An interactive Three.js visualization of hardware accelerators. Two generic teaching models plus a series of NVIDIA chips, each drawn as its full die and labeled by chip codename; real products built on each chip (which usually enable a subset of the die) are listed in the hover text. Switch between:

• GPU — a generic consumer card: board hardware down to the die microarchitecture (SMs, cores, L1/L2 cache). Illustrative, not a specific model.
• TPU — Google's first Tensor Processing Unit: the 256×256 Matrix Multiply Unit (systolic array), 24 MB Unified Buffer, accumulators, activation unit, weight FIFO, control logic, and DDR3 weight memory.
• CUDA — a 2D (SVG) execution & memory-hierarchy diagram (not a chip): host + PCIe, global/local memory, L2, an SM (registers, shared/L1, cores), and the thread → block → grid hierarchy. A pausable 4-phase animation shows a kernel run — H2D copy → block dispatch → warp execution → D2H copy. Use the ▶/⏸ control.
• GP100 (Pascal) — 60 SMs in 6 GPCs, single 4 MB L2, HBM2, NVLink 1. The last generation before Tensor Cores. (e.g. Tesla P100, Quadro GP100)
• GV100 (Volta) — 84 SMs in 6 GPCs, 6 MB L2, HBM2, NVLink 2; High Speed Hub on the die. (e.g. Tesla V100, Titan V, Quadro GV100)
• GA100 (Ampere) — 128 SMs in 8 GPCs, split 48 MB L2, HBM2 (6144-bit), NVLink 3. A pure compute die — no raster/RT. (e.g. A100)
• GH100 (Hopper) — 144 SMs in 8 GPCs, split 60 MB L2, HBM3, NVLink 4. Compute-focused; only two graphics-capable TPCs. (e.g. H100, H100 NVL)
• AD102 (Ada Lovelace) — 144 SMs in 12 GPCs, single 96 MB L2, GDDR6X (384-bit); raster + RT Cores. (e.g. RTX 4090, RTX 6000 Ada)
• GB202 (Blackwell) — 192 SMs in 12 GPCs, single 128 MB L2, GDDR7 (512-bit); raster + RT Cores. (e.g. RTX 5090, RTX PRO 6000 Blackwell)

Every number is a chip property (full-die counts, full L2, the memory interface); per-product capacities and enabled-SM counts appear as examples.

Hover to inspect parts, toggle component visibility, switch devices with the device buttons (GPU/TPU/CUDA/GP100/GV100/GA100/GH100/AD102/GB202), and toggle light/dark. The generic GPU card has animated cooling fans; the CUDA view has a play/pause animation.

Getting started

npm install
npm run dev      # start the Vite dev server
npm run build    # production build into dist/
npm run preview  # preview the production build

Then open the URL Vite prints (default port 5173).

Project structure

index.html              # markup + mount points (UI is generated per device)
src/
  main.js               # entry point — wires scene, devices and features
  styles.css            # all UI styling + theme variables
  devices/
    index.js            # device registry
    gpu.js              # GPU descriptor (data + filters + build steps)
    tpu.js              # TPU descriptor
    cuda.js             # CUDA execution-model view (2D; is2D + render2D, returns a controller)
    volta.js            # Volta GV100 descriptor
    a100.js h100.js     # data-center floorplan cards (config only)
    ad102.js blackwell.js # consumer floorplan cards (config only)
  data/
    componentData.js    # GPU component titles/descriptions
    tpuComponentData.js # TPU component titles/descriptions
    voltaComponentData.js # Volta component titles/descriptions
    floorplanData.js    # factories: per-card hover text + filter groups
  scene/
    scene.js            # renderer, camera, controls, lighting, theme colors
    materials.js        # shared Three.js materials
    meshFactory.js      # createMesh + mesh/fan registries + clear()
  builders/
    board.js            # GPU: PCB, VRAM, VRM, power, PCIe, IO shield
    microarchitecture.js# GPU: die, L2 cache, memory controllers, SMs/cores
    cooling.js          # GPU: heatsink, heatpipes, fins, shroud, fans
    common/
      fan.js            # reusable animated axial fan (rim, hub, pitched blades)
    tpu/
      board.js die.js cooling.js   # TPU: MXU, unified buffer, heatsink…
    volta/
      board.js fullDie.js          # Volta: Figure 4 floorplan
    cuda/
      diagram2d.js       # CUDA 2D SVG schematic + 4-phase animation controller
    floorplan/
      dieFloorplan.js   # generic GPC/SM/L2/memctrl die diagram (param-driven)
      package.js        # generic package: HBM stacks or GDDR modules + power
  features/
    theme.js            # light/dark toggle (UI + scene)
    interaction.js      # raycaster hover/highlight + info panel (device-aware)
    filters.js          # checkbox visibility filtering
    filterPanel.js      # generates device switcher + filter checkboxes

Adding a new device

Create a descriptor in src/devices/ with componentData, defaultInfo, view, filterGroups and a build(createMesh, ctx) function, then register it in src/devices/index.js. The switcher button, filter checkboxes and info panel are all generated from the descriptor.

To animate a device, return a controller { update(dt, playing), reset() }. update is called each frame (returning a phase label for the on-screen play/pause panel, which only appears for devices that return one).

For a 2D device, set is2D: true and provide render2D(ctx) instead of build; it renders into the SVG overlay (#overlay-2d), handles its own hover (ctx.setInfo) and filters (controller.applyFilters), and the host hides the 3D canvas — see devices/cuda.js + builders/cuda/diagram2d.js.

Roadmap

Planned work — more NVIDIA generations, AMD (RDNA/CDNA), Apple Silicon and the Apple Neural Engine, Google TPU v2+, and other vendors — is tracked in ROADMAP.md.