本文详解如何在不拆分 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：
// 1. 创建 ID 属性（每顶点 1 个 float，足够表示数万对象）
const objectIds = new Float32Array(vertices.length / 3); // vertices.length / 3 = 顶点总数
let currentId = 0;
for (let shape of pcbShapes) {
const vertexCount = shape.vertexCount;
for (let i = 0; i < vertexCount; i++) {
objectIds[currentId + i] = shape.id; // 所有属于该 shape 的顶点共享同一 id
}
currentId += vertexCount;
}
geometry.setAttribute('objectID', new THREE.BufferAttribute(objectIds, 1));⚠️ 注意：确保几何体启用顶点颜色支持（若未使用
vertexColors），且geometry.attributes.position已正确设置。
✅ 步骤二：编写支持对象 ID 分辨的自定义 ShaderMaterial
使用 ShaderMaterial 替代 MeshStandardMaterial，在片元着色器中读取 objectID 并查表着色：
const selectedId = ref(0); // 响应式变量，存储当前选中对象 ID（如通过 raycaster 获取）
const shaderMaterial = new THREE.ShaderMaterial({
uniforms: {
uBaseColor: { value: new THREE.Color(0x4a6fa5) },
uHighlightColor: { value: new THREE.Color(0xff5252) },
uSelectedId: { value: selectedId.value }
},
vertexShader: `
varying float vObjectID;
void main() {
vObjectID = objectID.x; // 传递 objectID 到片元着色器
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
uniform vec3 uBaseColor;
uniform vec3 uHighlightColor;
uniform float uSelectedId;
varying float vObjectID;
void main() {
// 若顶点所属对象 ID 与当前选中 ID 一致，则高亮；否则显示基础色
vec3 color = (abs(vObjectID - uSelectedId) < 0.1) ? uHighlightColor : uBaseColor;
gl_FragColor = vec4(color, 1.0);
}
`,
side: THREE.DoubleSide,
transparent: false
});
const mesh = new THREE.Mesh(geometry, shaderMaterial);
scene.add(mesh);✅ 步骤三：运行时动态更新选中状态（零重绘开销）
无需重建材质或 Mesh，仅需更新 uniform 值即可实时响应：
// 示例：点击后通过射线拾取确定被选中的 shape.id
function onSelect(shapeId) {
selectedId.value = shapeId;
shaderMaterial.uniforms.uSelectedId.value = shapeId;
// 可选：触发光照/法线等其他效果，只需扩展 uniform 和 shader 逻辑
}? 进阶优化建议
-
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 可视化工程的核心能力。
