如何为Three.js的Object3D编写顶点着色器批量更新子网格位置？

云上老周

2026-5-15

好问题！当你有数百个独立移动的Object3D时，CPU逐帧更新位置确实会成为性能瓶颈——毕竟每个Object3D的矩阵更新都会触发CPU计算和GPU数据同步的开销。下面我会一步步告诉你怎么用顶点着色器把位置计算转移到GPU，同时覆盖Object3D下所有子网格的需求：

核心思路

Object3D的本质是给所有子节点提供一个基础变换上下文。我们可以把每个Object3D的目标位置作为GPU uniform变量传递给子网格的着色器，让每个顶点在GPU端完成「自身局部位置 + Object3D偏移位置」的计算，彻底绕开CPU端更新整个对象矩阵的开销。

具体实现步骤

1. 封装材质扩展逻辑

首先我们需要给所有子网格的材质注入自定义顶点着色器逻辑，让它们支持接收外部的位置偏移uniform：

// 封装一个工具函数，给材质添加位置偏移的着色器支持
function addPositionOffsetSupport(material) {
    // 初始化uniform，存储当前Object3D的目标位置
    material.uniforms = material.uniforms || {};
    material.uniforms.objectPosition = { value: new THREE.Vector3() };

    // 扩展顶点着色器，修改顶点变换逻辑
    material.onBeforeCompile = (shader) => {
        // 传递自定义uniform到着色器
        shader.uniforms.objectPosition = material.uniforms.objectPosition;

        // 替换默认的顶点变换起始逻辑
        shader.vertexShader = shader.vertexShader.replace(
            '#include <begin_vertex>',
            `
            #include <begin_vertex>
            // 叠加Object3D的位置偏移
            transformed += objectPosition;
            `
        );
    };
}

2. 给子对象的材质应用扩展

在创建Object3D的子网格（包括文本标签）时，给它们的材质添加上述扩展：

const object3d = new THREE.Object3D();

const bodyMaterial = new THREE.MeshLambertMaterial();
const bezelMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
// 给网格的两个材质都添加位置偏移支持
addPositionOffsetSupport(bodyMaterial);
addPositionOffsetSupport(bezelMaterial);

const mesh = new THREE.Mesh(MeshFactory.mesh1, [bodyMaterial, bezelMaterial]);
object3d.add(mesh);

// 处理文本标签（假设TextFactory返回的是THREE.Mesh）
const textLabel = TextFactory.createText("mesh1");
// 文本材质可能是单材质或多材质，统一处理
const textMaterials = Array.isArray(textLabel.material) ? textLabel.material : [textLabel.material];
textMaterials.forEach(mat => addPositionOffsetSupport(mat));
object3d.add(textLabel);

3. 逐帧更新GPU uniform（替代CPU更新Object3D位置）

不再修改Object3D.position，而是直接更新所有子材质的objectPosition uniform：

// 提前缓存所有需要移动的Object3D
const movingObjects = [object3d /* 其他数百个对象 */];

// 初始化时预缓存每个Object3D对应的uniform列表（避免逐帧遍历子对象）
movingObjects.forEach(obj => {
    obj._positionUniforms = [];
    obj.traverse(child => {
        if (child.isMesh) {
            const materials = Array.isArray(child.material) ? child.material : [child.material];
            materials.forEach(mat => {
                if (mat.uniforms?.objectPosition) {
                    obj._positionUniforms.push(mat.uniforms.objectPosition);
                }
            });
        }
    });
});

// 渲染循环
function render() {
    requestAnimationFrame(render);
    
    movingObjects.forEach(obj => {
        const targetPos = calcPosition(); // 你的位置计算逻辑，返回THREE.Vector3
        // 批量更新该Object3D下所有子材质的位置uniform
        obj._positionUniforms.forEach(uniform => {
            uniform.value.copy(targetPos);
        });
    });

    renderer.render(scene, camera);
}

进阶优化建议

用InstancedMesh批量处理同结构对象：如果你的数百个Object3D都是相同网格结构，直接用InstancedMesh替代多个Object3D，通过实例矩阵存储每个对象的位置/旋转/缩放，GPU会一次性处理所有实例，性能提升会更显著。

添加旋转/缩放支持：如果需要同步处理Object3D的旋转和缩放，可以在uniform中添加objectRotation和objectScale，在顶点着色器中用矩阵变换完成完整的空间转换：

// 顶点着色器中扩展逻辑
mat4 objectTransform = mat4(1.0);
objectTransform = translate(objectTransform, objectPosition);
objectTransform = rotateX(objectTransform, objectRotation.x);
objectTransform = rotateY(objectTransform, objectRotation.y);
objectTransform = rotateZ(objectTransform, objectRotation.z);
objectTransform = scale(objectTransform, objectScale);
transformed = (objectTransform * vec4(transformed, 1.0)).xyz;

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