THREE.js中ID缓冲区实现：用于边缘检测与物体拾取

我来帮你梳理下问题，并且给出可行的解决方案——其实用overrideMaterial实现ID缓冲区是完全可行的，你代码里的问题主要出在onBeforeRender的逻辑和Uniform更新的方式上，直接操作WebGL上下文很容易触发程序切换错误，咱们换一种更贴合Three.js封装逻辑的方式来实现。

核心思路 #

ID缓冲区的本质是给每个物体分配唯一的RGB颜色，渲染时用全局覆盖材质强制渲染这个颜色，不需要考虑物体原本的漫反射材质/纹理。我们可以让专用的ID材质从物体的userData中读取唯一颜色，借助Three.js的材质生命周期自动处理Uniform更新，避免直接操作底层WebGL API。

完整实现步骤 #

1. 创建专用的ID着色器材质 #

先写一个极简的ShaderMaterial，它的唯一作用就是渲染物体的ID颜色：

const idMaterial = new THREE.ShaderMaterial({
  uniforms: {
    idColor: { value: new THREE.Color(0xffffff) }
  },
  vertexShader: `
    void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform vec3 idColor;
    void main() {
      gl_FragColor = vec4(idColor, 1.0);
    }
  `,
  name: "id" // 用于后续判断当前覆盖材质是否为ID材质
});

2. 给每个物体分配唯一ID颜色 #

初始化物体时，给每个物体的userData存入一个唯一颜色，这里用索引转Hex的方式确保唯一性：

initPieces = function(geometry) {
  // 假设你要创建N个物体
  const totalPieces = 100;
  for (let i = 0; i < totalPieces; i++) {
    // 生成唯一颜色，+1避免黑色（0x000000），黑色和透明区域难以区分
    const uniqueIdColor = new THREE.Color();
    uniqueIdColor.setHex(i + 1);

    // 创建物体的原始漫反射材质
    const originalMaterial = new THREE.MeshStandardMaterial({
      color: 0x888888,
      map: 你的纹理资源 // 保留原材质的纹理/属性
    });

    const mesh = new THREE.Mesh(geometry, originalMaterial);
    mesh.userData.idColor = uniqueIdColor; // 把唯一颜色存入物体的userData
    Viewer._scene.add(mesh);

    // 给原始材质绑定onBeforeRender钩子
    originalMaterial.onBeforeRender = handleIdMaterialUpdate;
  }
};

3. 实现onBeforeRender钩子逻辑 #

这个钩子的作用是：当全局启用ID覆盖材质时，把当前物体的唯一颜色传递给ID材质的Uniform：

function handleIdMaterialUpdate(renderer, scene, camera, geometry, object) {
  // 仅当当前覆盖材质是我们的ID材质时才执行逻辑
  if (!scene.overrideMaterial || scene.overrideMaterial.name !== "id") return;
  
  const idMat = scene.overrideMaterial;
  const targetColor = object.userData.idColor;
  
  // 优化：如果颜色和上一次一致，跳过更新
  if (!idMat.userData.lastColor) {
    idMat.userData.lastColor = new THREE.Color(0x000000);
  }
  if (!idMat.userData.lastColor.equals(targetColor)) {
    idMat.uniforms.idColor.value.copy(targetColor);
    idMat.userData.lastColor.copy(targetColor);
  }
}

4. 渲染ID缓冲区与漫反射缓冲区 #

在渲染循环中，先切换到ID材质渲染到目标缓冲区，再恢复正常渲染：

function render(scene, camera) {
  // 第一步：渲染ID缓冲区到指定目标
  scene.overrideMaterial = idMaterial;
  renderer.render(scene, camera, getTarget("id"));
  
  // 第二步：恢复正常渲染，渲染漫反射缓冲区（到屏幕或另一个目标）
  scene.overrideMaterial = null;
  renderer.render(scene, camera); // 若需要渲染到漫反射目标，替换为对应参数
}

为什么你的代码会报错？ #

你之前尝试直接调用gl.useProgram和手动更新Uniform，这违反了Three.js的封装逻辑——Three.js在渲染过程中会自动切换WebGL程序，当你手动操作程序时，很可能和Three.js当前的渲染状态冲突，导致抛出WebGL INVALID_OPERATION: uniformMatrix4fv: location is not from current program错误。

上面的方案完全依托Three.js的材质系统处理Uniform更新，避免了直接操作底层API，自然不会出现这类问题。

内容的提问来源于stack exchange，提问作者Nick Gimbal