TbusOS 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 | 对焦面方向 | 斜俯视只有中间一条带清晰 | 移轴:焦平面贴着板面而不是垂直视线(薄透镜 = 平移 + 剪切,焦平面法线可任取) |
其余(材质分金属/非金属、接触阴影、真圆角、表面细节、元件密度)都要,但排在这四条之后。
引擎: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 |
| 一条缓存行 / 矩阵 / 帧缓冲片 | gridObj / tileAlong |
| 一条命令 / 指令 | cardObj / tokenAlong |
| 一条总线 | wires(n 根并行导线,不是一条线) |
| 包 / 粒子 / 光子 | orb / packets |
| 逻辑块"在忙" | blockGlow |
细节见 references/flow-craft.md。
画芯片内部原理:三条规矩
用户 2026-09-06 三次反馈打出来的:
- 数据不能是"点在线上滑"。 数据要有形状:32 位字 = 一行亮/暗格子;缓存行 = 8×4 位块; 指令 = 一张卡;像素 = R/G/B 三行 8 位。看得出搬的是什么。
- 要芯片内部,不是板级。 die 做成一座"城":逻辑块在地面,互连做成架空的铜轨立在铜柱上 ——芯片里晶体管在底层、十几层铜金属层在上面走线,这是真实结构。数据在轨上跑, 路口有路由节点,每个块有匝道。
- 按拍走,可暂停单步。 全局时钟
CLK(拍),说明卡配 ⏸ / ⏭ 一拍 / 速度滑块; 标签显示实时数字(第几拍、在哪一步、已等待多少拍)。延迟就是路程,让人自己数。
颜色纪律:最多三个强调色(命令=琥珀 · 数据=青 · 像素=洋红),几何本体绝不发光。
四类镜头配方
见 references/shots.md。要点:微距用经典对焦(浅景深是有意的),整板/掠射/剖面用移轴。
提交前必须跑
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> # 单采样帧时间上限
做的过程中定机位用这个(不是提交前的检查,是省时间的工具):
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 个视锥平面做球体测试: 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— 踩过的坑,每条都带现象和修法(含取景:说明卡和状态面板占住哪几块、怎么让主体避开)