Application web pour comprendre comment est fait un PC : elle démonte ses composants en 3D, du processeur à l'alimentation, et les fait travailler, avec températures, consommation et fréquences en temps réel. Huit composants, quatre-vingt-dix pièces expliquées une à une et, en arrière-plan, la chaîne de montage de chacun. Tout tourne dans le navigateur, avec three.js.
**Banco Hardware 3D** (« établi du hardware » en italien) est un projet personnel : un établi virtuel où les composants d'un PC se démontent jusqu'à la dernière couche, puis se mettent au travail. Les modèles sont inventés, comme le processeur NX-9 1490K ou la carte graphique BH Prisma 7080, mais les dimensions et les chiffres sont ceux du matériel actuel : le format ATX, la DDR5, la limite de 253 W d'un processeur de bureau.
**Ce qu'il fait**
- **Huit composants en 3D** : processeur, ventirad, carte mère, RAM DDR5, carte graphique, alimentation, SSD NVMe et le PC complet dans son boîtier. On les fait tourner, on les ouvre en vue éclatée et on les regarde sous quatre angles, jusqu'au die du processeur. - **Quatre-vingt-dix pièces expliquées** : un clic sur une pièce la met au point et ouvre sa fiche, avec son rôle, ses caractéristiques et un détail à connaître. - **La chaîne de montage** : en arrière-plan, chaque composant se construit étape par étape, 92 en tout, comme la refusion à 250 °C qui soude le die du processeur. - **Le fonctionnement** : cinq charges de travail, de « Inattivo » (au repos) à « Stress AVX ». Température, puissance, fréquence et tension évoluent ensemble, les 16 cœurs montrent leur charge et leur fréquence, et dans un cœur le pipeline à six étages exécute une boucle en assembleur. - **Une simulation par composant** : la chaleur qui passe du die à l'air, le courant dans les phases de la carte mère, les 32 bancs d'une puce DRAM, le goulot d'étranglement entre processeur et carte graphique, les 16 dies NAND du SSD avec leur cache SLC, l'air qui traverse le boîtier. Avec l'alimentation de 450 W, un pic de la carte graphique déclenche la protection et l'alimentation se coupe.
**La partie difficile**
Le site ne contient ni fichier 3D ni image : chaque pièce est construite par le code, et les pistes des circuits, les inscriptions et le plan du die sont dessinés sur canvas avec un générateur aléatoire à graine fixe, si bien que chaque visite voit les mêmes circuits. Le code du site pèse 110 Ko compressé, three.js 209 de plus. La simulation dit où elle simplifie : le pipeline est ralenti environ un milliard de fois, et le ventirad n'a que le quart de sa masse réelle, pour ne pas attendre des minutes qu'il chauffe.
JavaScript sans framework et three.js dans le navigateur ; un petit serveur Node sans dépendances sert les pages compressées, avec une Content Security Policy qui liste les empreintes des scripts, dans un conteneur en lecture seule sur mon serveur.
Conception, développement full-stack et mise en ligne · 2026
three.js, JavaScript, Node.js, HTML, CSS