App web per capire com'è fatto un PC: smonta in 3D i suoi componenti, dal processore all'alimentatore, e li fa lavorare, con temperature, consumi e frequenze che cambiano in tempo reale. Otto componenti, novanta pezzi spiegati uno per uno e, sullo sfondo, la linea di montaggio di ognuno. Gira tutta nel browser, con three.js.
Banco Hardware 3D è un mio progetto personale: un banco da lavoro virtuale dove i componenti di un PC si smontano fino all'ultimo strato e poi si mettono al lavoro. I modelli sono inventati, come il processore NX-9 1490K o la scheda video BH Prisma 7080, ma misure e numeri sono quelli dei componenti di oggi: il formato ATX, la DDR5, il limite di 253 W di un processore desktop.
**Che cosa fa**
- **Otto componenti in 3D**: processore, dissipatore, scheda madre, RAM DDR5, scheda video, alimentatore, SSD NVMe e il PC completo nel case. Si girano, si aprono con l'esploso e si guardano da quattro punti di vista, fino al die del processore. - **Novanta pezzi spiegati**: un clic su un pezzo lo mette a fuoco e apre la sua scheda, con a che cosa serve, i dati tecnici e un dettaglio da sapere. - **La linea di montaggio**: sullo sfondo ogni componente si costruisce passo per passo, 92 fasi in tutto, come la rifusione a 250 °C che salda il die del processore. - **Il funzionamento**: cinque carichi di lavoro, da «Inattivo» a «Stress AVX». Temperatura, potenza, frequenza e tensione si muovono insieme, i 16 core mostrano carico e frequenza, e dentro un core la pipeline in sei stadi esegue un ciclo in assembly. - **Una simulazione per componente**: il calore che passa dal die all'aria, la corrente nelle fasi della scheda madre, i 32 banchi di un chip DRAM, il collo di bottiglia fra processore e scheda video, i 16 die NAND dell'SSD con la cache SLC, l'aria che attraversa il case. Con l'alimentatore da 450 W, un picco della scheda video fa scattare la protezione e l'alimentatore si spegne.
**La parte difficile**
Nel sito non c'è un file 3D né un'immagine: ogni pezzo è costruito dal codice, e le piste dei circuiti, le scritte e la mappa del die sono disegnate su canvas con un generatore casuale a seme fisso, così ogni visita vede gli stessi circuiti. Il codice del sito pesa 110 KB compressi, three.js altri 209. La simulazione dice dove semplifica: la pipeline è rallentata di circa un miliardo di volte, e il dissipatore ha un quarto della massa vera, per non aspettare minuti che si scaldi.
JavaScript senza framework e three.js nel browser; un piccolo server Node senza dipendenze serve le pagine compresse, con una Content Security Policy che elenca gli hash degli script, in un container in sola lettura sul mio server.
Progettazione, sviluppo full-stack e pubblicazione · 2026
three.js, JavaScript, Node.js, HTML, CSS