本文详解如何在不拆分 mesh 的前提下，对同一几何体中不同子区域（如 pcb 上千个焊盘）实现独立颜色高亮与交互响应，通过顶点属性、自定义着色器与 gpu 实时计算规避海量 draw call 性能瓶颈。
本文详解如何在不拆分 mesh 的前提下，对同一几何体中不同子区域（如 pcb 上千个焊盘）实现独立颜色高亮与交互响应，通过顶点属性、自定义着色器与 gpu 实时计算规避海量 draw call 性能瓶颈。
在 Three.js 中构建高密度可交互场景（如 PCB 查看器、电路板布线系统或大规模建筑构件可视化）时，一个常见误区是：为每个可选中对象创建独立 THREE.Mesh——看似逻辑清晰，实则引发严重性能问题。根本原因并非“Mesh 数量多”，而是Draw Call 次数爆炸式增长：每个 Mesh 默认触发一次 GPU 绘制调用；当 PCB 层包含 5000+ 焊盘/走线时，5000+ Draw Calls 将远超 WebGL 渲染管线吞吐能力，导致帧率骤降、交互卡顿。
所幸，Three.js 提供了更高效、更底层的解决方案：复用单一 Mesh + 自定义顶点属性 + 片元着色器动态着色。核心思路是：将“对象身份”信息编码进几何体顶点数据，在 GPU 着色阶段根据当前选中 ID 实时决定像素颜色，全程仅需 1 次 Draw Call。
✅ 步骤一：为每个子对象分配唯一 ID 并写入顶点属性
假设你已将所有 PCB 形状合并至一个 BufferGeometry（推荐使用 BufferGeometry 而非旧式 Geometry），需为每个形状（如一个矩形焊盘）的所有顶点附加相同 objectID：
vertexColors
-
ID 编码压缩：若对象数 > 65535，可用
vec2存储高位/低位 ID，或改用u16类型纹理作为 ID 查找表（适合超大规模场景）。 -
多状态支持：扩展
uniform支持uHoverId、uDisabledIds（数组或纹理掩码），实现悬停、禁用、多选等复杂交互。 -
与 PBR 兼容：若需保留物理光照（如
MeshStandardMaterial的金属度/粗糙度），可采用onBeforeCompile注入 ID 逻辑到标准材质着色器中（参考ShaderChunk替换技巧），而非完全自定义 Shader——兼顾真实感与性能。 - GPU 加速拾取：对超大规模场景（>100K 对象），避免 CPU 端 raycast，改用 GPU Pick Buffer（渲染 ID 到离屏纹理，读取鼠标坐标像素值）实现亚毫秒级拾取。
✅ 总结
| 方案 | Draw Calls | 内存占用 | 实现复杂度 | 适用规模 |
|---|---|---|---|---|
| 每对象一 Mesh | O(N) | 高（重复材质/UBO） | 低 | |
| 单 Mesh + 顶点颜色 | O(1) | 低 | 中（需预处理顶点色） | ≤ 10K（颜色精度受限） |
| 单 Mesh + objectID + ShaderMaterial | O(1) | 极低 | 中高（需着色器基础） | 10K–1M+ |
真正的性能瓶颈从来不是“对象数量”，而是“GPU 通信频次”。掌握顶点属性驱动的着色器逻辑，你就能在单个 Mesh 中驾驭上万个可交互实体——这正是现代 Web3D 可视化工程的核心能力。
