PC Anatomy

PC Anatomy is an open-source 3D explorer that takes a desktop computer apart from the assembled ATX tower down to a single GPU streaming multiprocessor.

Explore the live demo →

Every polygon is generated in TypeScript with three.js. There are no imported models, image textures, or other runtime asset files. The roughly 300 selectable components each carry a name, a description, an explanation of their purpose, specifications, and citations instead of stopping at a label.

Press Auto at the left end of the bottom bar to watch the machine take itself apart, or drag the timeline to move through the sequence by hand.

Scale tree

Desktop PC
├── Motherboard
│   ├── Ryzen 9 9950X
│   │   └── Ryzen I/O die
│   └── Core Ultra 9 285K
│       └── Core Ultra I/O tile
├── Power supply
├── Cooling
│   ├── Case fan
│   ├── CPU cooler
│   └── Liquid cooling
├── SATA SSD
└── RTX 5090
    └── GB202 processor
        └── Graphics processing cluster (GPC)
            └── Texture processing cluster (TPC)
                └── Streaming multiprocessor (SM)

The slider moves each scale from its assembled state to a laid-out inventory. Search can jump directly to a component at any depth, while breadcrumbs and the scale navigator move back through the machine.

Descending into a part rebuilds it at its own scale with its own timeline, so the graphics card that was installed in the tower comes apart into its shroud, fans, fin banks, heat pipes, vapor chamber, board and backplate.

The interface

The rail on the left carries the scale tree and per-system visibility. The bar along the bottom is the disassembly timeline, with the Auto key at its left-hand end, the named phases above the slider, and a reset on the right. Left-click an explorable component to open it; right-click to inspect it and use the detail, hide, isolate and focus controls. Hidden components remain available from the stage tracker until they are restored, the scale changes, or the explorer is reset. The corner expand control toggles browser fullscreen.

Quick start

PC Anatomy requires Node.js 22.13 or newer.

git clone https://github.com/Yoosseph/gpu_anatomy.git
cd gpu_anatomy
npm install
npm run dev

Vite prints the local development URL. To create and preview a production build:

npm run build
npm start

The project is entirely static. The production output is written to dist/ and needs no backend.

Project layout

Adding a component

A component joins the written catalogue to selectable geometry through its concept ID.

1. Add the concept to the relevant file in lib/concepts/. Follow a neighboring entry and provide its unique id, scale, parent, category, representation type, explanation, specifications, accuracy note, and source IDs.
2. In that scale's builder, create the geometry and pass the same concept ID to the shared add or instances helper. The helper supplies selection identity, explode placement, inventory layout, and counting.
3. Add any new references to lib/sources.ts and document them in SOURCES.md.
4. If the concept lives in a new catalogue file, export its array and compose it into lib/manifest.ts.
5. Run the checks below. The tests reject anonymous geometry, duplicate concept IDs, broken parent links, and scales with nothing to render.

Do not introduce delayed reveal thresholds for assembled geometry. A component that exists in the assembled product should exist at slider position zero and move continuously as the product comes apart.

Adding a scale

A new scale has five integration points:

1. Add its ID and definition to lib/levels.ts, including its parent, kind, concept, phases, and navigation text.
2. Implement its geometry builder and register that builder in lib/models.ts.
3. Add its written catalogue in lib/concepts/.
4. Put open: '<new-level-id>' on the concept in the parent scale that leads into it.
5. Export and compose the new concepts in lib/manifest.ts.

The scale tree drives navigation, breadcrumbs, lighting, and the disassembly timeline. Avoid adding a second hand-written route table. When a model is rebuilt, lib/scene.ts must also clear its cached layoutSignature so the new inventory is packed from its own pieces.

Accuracy and sources

The machine follows published ATX dimensions where those dimensions are standardized. Three products are named and modeled as specific subjects: the GeForce RTX 5090, AMD Ryzen 9 9950X, and Intel Core Ultra 9 285K. The rest is an illustrative desktop build that explains representative construction and relationships rather than reproducing a particular bill of materials.

Processor and GPU floorplans are explanatory diagrams of documented logical architecture. They are not semiconductor mask layouts and do not claim exact transistor-level placement. See SOURCES.md for standards, product documentation, architecture references, and the scope of each source.

Product and company names are used nominatively to identify the hardware being described. PC Anatomy is not affiliated with or endorsed by NVIDIA, AMD, Intel, or any other named company.

Contributing

Issues and focused pull requests are welcome. Keep written claims cited, preserve the distinction between physical models and logical diagrams, and run the full local checks before opening a change:

npm run check
npm run lint
npm test
npm run build

PC Anatomy is available under the MIT License.