# Hardware 3d

> 做「照片级真实感」的硬件 / 芯片原理 3D 讲解页(单文件 HTML + WebGL2,零外部依赖)。PBR + 程序化棚拍 IBL + SSAO + 真圆角几何 + 相机静止后累积收敛出真软阴影/真景深;数据流用"按拍走 + 有形状的数据"画芯片内部总线。TRIGGER 当用户说 写实 3D / 真实的芯片效果 / 硬件原理动画 / 芯片内部数据流 / die 内部 / 总线怎么走 / 做成视频那种真实感 / hardware-3d,或要给技术文档配可交互的硬件 3D 图解时使用。DO NOT TRIGGER:2D 页面风格(用 anthropic/apple/glass 等 *-design)、纯图表(用 dataviz)。

- Skill: `tbusos/hardware-3d` (Agent Skill, multi-file: 20 files)
- Install (CLI): `npx skillmds@latest add tbusos/hardware-3d`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tbusos/hardware-3d/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: TbusOS (https://skillmd.com/u/tbusos)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tbusos/hardware-3d

---


# hardware-3d · 写实硬件 3D 讲解页

## 这套东西分三层,别只抄一层

| 层 | 管什么 | 资产 |
|---|---|---|
| **渲染** | 像不像照片 | `assets/hw3d.js` · `references/materials.md` · `shots.md` |
| **画风** | 页面长什么样、文案怎么写 | `assets/hw3d-ui.css` · `hw3d-ui.js` · `references/visual-language.md` |
| **画法** | 数据流怎么画才看得懂 | `assets/hw3d-flow.js` · `references/flow-craft.md` |

**只做第一层的话,能做出好看的硬件,但做不出"看得懂原理"的页。**
第三层才是这套东西真正值钱的部分 —— 数据要有形状、按拍走、画芯片内部而不是板级。

直接从 `templates/station-page.html` 起步(三层都接好了,开箱能跑,四个检查全过)。
**成品长什么样看 `demos/hardware-3d/index.html`**(本仓 demo 目录):「一条数据从内存颗粒到 CPU 寄存器」,5 站,三层齐用 —— 主板棚拍 · DRAM 颗粒微距 · 颗粒内部的行列寻址 · 板上 64 根数据线 · CPU die 内部一路排队到寄存器。

## 一句话

浏览器里手写 WebGL2,把 PCB / 封装 / die / 显示屏做成**看着像照片**的 3D,再在上面讲原理。
参照物是离线渲染的硬件科普视频;实时渲染够不着的部分靠「相机一停就累积采样」补回来。

## 先读这条:真实感的四个来源,按重要性排

排在前面的没做对,后面做得再好也白搭。**2026-09-06 实测顺序,不是想当然。**

| # | 来源 | 做错的样子 | 做对的做法 |
|---|---|---|---|
| 1 | **光比** | 黑塑封芯片顶面是灰的 | 柔光箱强度 6~7,不是 16。4% 反射率的塑料被强光一打就变灰,**调材质颜色没用** |
| 2 | **美术方向** | 深蓝虚空 + 霓虹描边 = 一眼动画 | 中性灰棚拍 + 真实元件配色 + **几乎零自发光**;发光只留给数据流叠加层 |
| 3 | **抗锯齿的重建核** | 全画面发软,焦点上也软 | 亚像素抖动用**高斯 σ≈0.32px**,不是 ±0.5px 均匀。均匀抖动累积 = 1px 盒式模糊 |
| 4 | **对焦面方向**<!-- bw-ok:对焦=相机对焦,摄影术语 --> | 斜俯视只有中间一条带清晰 | **移轴**:焦平面贴着板面而不是垂直视线(薄透镜 = 平移 + 剪切,焦平面法线可任取) |

其余(材质分金属/非金属、接触阴影、真圆角、表面细节、元件密度)都要,但排在这四条之后。

## 引擎:`assets/hw3d.js`

单文件内联进页面。渲染链:

```
开机一次:程序化烘棚拍 cubemap(3 块矩形柔光箱 + 背景纸渐变)
        → 6 级 GGX 预过滤 + 32² 辐照度 + 128² BRDF LUT
        → Canvas 2D 现画丝印图集
每采样:  阴影深度 → G-buffer(MRT:albedo+metallic / normal+roughness / depth)
        → SSAO(前 6 帧双边模糊,之后靠累积)
        → IBL 光照(GGX split-sum,阴影当方向遮挡,不做解析光避免双重计光)
        → 累积平均(RGBA32F,权重 1/(i+1))
显示帧:  数据流叠加层(单独 HDR 缓冲,复用 G-buffer 深度只测不写)
        → 与累积结果相加 → 泛光 → ACES + 轻锐化 + 颗粒 + 暗角
```

**累积收敛是这套的核心**:相机一停,每帧抖动
亚像素(高斯)· 光圈盘(真景深)· 柔光箱面积(真软阴影)· AO 核旋转,
200 帧后接近离线渲染。动的时候是快速档,停下就变电影档。

页面要自己提供:`cv` · `buildScene()` · `SCENE` · `cam` · `STATE` · `reset()` · `CHK()`。
起步用 `templates/station-page.html`(完整站点页,三层都接好,四个检查全过);
只要引擎不要外壳的话用 `templates/starter.html`。

## 页面外壳:`assets/hw3d-ui.css` + `hw3d-ui.js`

62 / 63 两页共用同一套:标题 + 章节条 + 站点圆点 + 说明卡 + 3D 标签层 + 术语表 + 时钟控件。
DOM 骨架在 `templates/shell-body.html`。**换配色只动 `#5aa0eb` 和面板底色两处。**

说明卡的文案**必须**按三问写,顺序不能换:
**是什么**(本质,不是字面翻译) → **没有它会怎样**(去掉它系统在哪一步失效) → **为什么这么设计**(取舍:替代方案是什么、为什么没选)。
篇幅不够时**砍机制细节,不砍这三问** —— 机制查代码就有,设计意图查不到。

细节见 `references/visual-language.md`。

## 数据流:`assets/hw3d-flow.js`

写实底层照常累积收敛;数据流每个显示帧**单独画**到自己的 HDR 缓冲(深度复用 G-buffer、只测不写),
再与累积结果相加进泛光。不这么分开,流动的东西会被累积平均成一条拖影。

原语一览(照题目组合,不用重新发明):

| 概念 | 原语 |
|---|---|
| 一个 n 位字 | `wordRow` / `wordOnWires` |
| 一条缓存行 / 矩阵 / 帧缓冲片<!-- bw-ok:矩阵=数学矩阵 --> | `gridObj` / `tileAlong` |
| 一条命令 / 指令 | `cardObj` / `tokenAlong` |
| 一条总线 | `wires`(n 根并行导线,**不是一条线**) |
| 包 / 粒子 / 光子 | `orb` / `packets` |
| 逻辑块"在忙" | `blockGlow` |

细节见 `references/flow-craft.md`。

## 画芯片内部原理:三条规矩

用户 2026-09-06 三次反馈打出来的:

1. **数据不能是"点在线上滑"。** 数据要有形状:32 位字 = 一行亮/暗格子;缓存行 = 8×4 位块;
   指令 = 一张卡;像素 = R/G/B 三行 8 位。看得出搬的是什么。
2. **要芯片内部,不是板级。** die 做成一座"城":逻辑块在地面,**互连做成架空的铜轨**立在铜柱上
   ——芯片里晶体管在底层、十几层铜金属层在上面走线,这是真实结构。数据在轨上跑,
   路口有路由节点,每个块有匝道。
3. **按拍走,可暂停单步。** 全局时钟 `CLK`(拍),说明卡配 ⏸ / ⏭ 一拍 / 速度滑块;
   标签显示实时数字(第几拍、在哪一步、已等待多少拍)。**延迟就是路程**,让人自己数。

颜色纪律:最多三个强调色(命令=琥珀 · 数据=青 · 像素=洋红),**几何本体绝不发光**。

## 四类镜头配方

见 `references/shots.md`。要点:微距用经典对焦(浅景深是有意的),整板/掠射/剖面用移轴。<!-- bw-ok:对焦=相机对焦,摄影术语 -->

## 提交前必须跑

```bash
S=~/.claude/skills/hardware-3d/scripts
$S/check_selfcontained.sh <页面.html>     # 外部引用只允许 Google Fonts
node $S/check_pipeline.mjs <页面.html>     # 管线齐全 / 无 GL 错误 / 能收敛
node $S/check_realism.mjs  <页面.html>     # 防霓虹回潮:高亮高饱和占比 + 饱和度中位数
node $S/check_perf.mjs     <页面.html>     # 单采样帧时间上限
```

做的过程中定机位用这个(不是提交前的检查,是省时间的工具):

```bash
node $S/try_cameras.mjs <页面.html> <站号(0 起)> '[{"tgt":[0,2,0],"az":-1.0,"el":0.8,"dist":260,"fov":28}, ...]'
```

一次出几张对比着挑。**改文件重开来试机位一轮要几分钟,这样一轮几十秒** ——
2026-09-07 做 demo 时取景来回调了八轮,大部分时间花在等页面重开上。
页面要有 `window.__setCam`,模板里已经接好。

四个都过才算完。`check_realism` 专门拦「做着做着又变回深蓝加霓虹」——
实测正常页面霓虹像素 0.42%、饱和度中位数 0.10;把材质染成霓虹青之后是 44.76% / 0.63,当场拦下。

站点统计一类的有意外链用 `ALLOW_HOSTS=host1,host2` 放行。

**页面要进公开站点的 `demos/`,还要过那边的设计检查链**
(`bin/design-review <页面>`)。2026-09-07 实测它抓到三条真问题,都不是 3D 相关的:
① 页面必须中英双语(公开站点的 `demos/` 下没有例外);
② 术语表面板靠 `translateX` 移出视口时,里面的关闭按钮仍然可点可 Tab —— 要加 `visibility:hidden`;
③ 十九个可聚焦元素没有任何 `:focus-visible` 样式。
这三条现在都在模板里修好了,照模板起步就不会再撞。

**性能要靠视锥剔除。** 几个"世界"(板 / SM 放大模型 / 显示器 / die 内部城)离得很远,
不剔除等于每帧白画几十万三角形。给每个实例组算包围球,用 VP 矩阵取 6 个视锥平面做球体测试:<!-- bw-ok:矩阵=view-projection 矩阵 -->
62 号加上之后最慢帧 45.3ms → 36.1ms,三角形 653K → 446K,大部分站只画 10~20%。
碎元件(焊点 / 贴片 / 锡球)倒角段数用 2 就够,3 段会让三角形数翻倍。

## 参考

- `references/visual-language.md` — **画风**:页面骨架、三问文案模板、配色纪律、叙事结构
- `references/flow-craft.md` — **画法**:数据要有形状、按拍走、"城"的建法、原语速查
- `references/materials.md` — 材质表(目测调的,不是实测光谱)
- `references/shots.md` — 镜头配方 + **定机位的顺序**(先定讲什么 → 再定张角 → 最后避开面板)
- `references/pitfalls.md` — 踩过的坑,每条都带现象和修法(含**取景**:说明卡和状态面板占住哪几块、怎么让主体避开)