渲染 instancedMesh 边线

WebGL

官方文档并没有提供渲染 instancedMesh 边线的方法。翻阅官方论坛，找不到现成的解决方案。能找到的代码要么因为年代久远失效了，要么过于复杂难以复用。最终，答案很简单：

const eGeom = new THREE.InstancedBufferGeometry();
eGeom.setAttribute("position", geom.getAttribute("position"));
// 将 instancedMesh 的矩阵属性绑定到边线元素
eGeom.setAttribute("matrix", iMesh.instanceMatrix);
eGeom.instanceCount = iMesh.instanceMatrix.array.length / 16;
const eMat = new THREE.LineBasicMaterial({
  color: "#fff",
  onBeforeCompile: (shader) => {
    // shader 按绑定的矩阵属性计算顶点坐标，让边线与 instancedMesh 保持一致
    shader.vertexShader = `
    attribute mat4 matrix;
    void main() {
      gl_Position = projectionMatrix * modelViewMatrix * matrix * vec4( position, 1.0 );
    }`;
  },
});

const edges = new THREE.LineSegments(eGeom, eMat);
scene.add(edges);

渲染效果：

在线预览作品《instancedEdges》，作者（@周狮虎）创作于笔.COOL。

WebGPU

Threejs v.0.180 更新了一大波对 WebGPU 的支持，开始考虑把之前的项目移植到 WebGPU。但 TSL 的文档依然停留在几年前，很多新特性都没有介绍，如何渲染 instancedMesh 边线还需自行摸索。以下是答案之一：

/** 根据 instancedMesh 重新定义 vertexShader，结合 InstancedBufferGeometry 渲染每个实例的边线 */
function renderInstancedEdge(
  edgeMaterial: THREE_WEBGPU.LineBasicNodeMaterial,
  model: THREE_WEBGPU.InstancedMesh,
) {
  edgeMaterial.vertexNode = TSL.Fn(() => {
    // 根据 instancedMesh 新建全部实例的矩阵缓存
    const buffer = TSL.instancedArray(model.instanceMatrix.array, "mat4");
    // 从缓存中提取当前实例的矩阵
    const matrix = buffer.element(TSL.instanceIndex);
    // 应用矩阵变换，计算顶点坐标
    const worldPos = matrix.mul(TSL.positionGeometry);
    const viewPos = TSL.modelViewMatrix.mul(worldPos);
    const clipPos = TSL.cameraProjectionMatrix.mul(viewPos);
    return clipPos;
  })();
}

// 重构 vertexShader
renderInstancedEdge(MATERIAL_EDGE, instancedModel);
// 将 instancedMesh.geometry 中的相关数据复制到新的 InstancedBufferGeometry
const edgeIBG = new THREE_WEBGPU.InstancedBufferGeometry();
const edgeGeom = new THREE_WEBGPU.EdgesGeometry(instancedModel.geometry);
edgeIBG.setAttribute("position", edgeGeom.getAttribute("position"));
edgeIBG.instanceCount = total;
edgeGeom.dispose();
// LineSegments 通过 InstancedBufferGeometry 与自定义 vertexShader 的材质渲染每个实例的边线
const edges = new THREE_WEBGPU.LineSegments(edgeIBG, MATERIAL_EDGE);
edges.frustumCulled = false;

渲染 instancedMesh 边线

WebGL ​

WebGPU ​

WebGL

WebGPU