blender关联复制与Three.js网格和材质共享验证

blender和three.js小白的学习之路。

最近看到Three.js官网上说，模型合并是一个很好的优化性能的方式，因为渲染2000个物体总要比一次性渲染一个模型要来的慢。很有道理！

但此时就不禁思考一个问题，现有的模型进行合并通过blender肯定要比使用代码合并geometry要来的快得多。在blender中通过Alt+D复制出来的模型在blender中是共用一个网格和材质的。如下图所示：

那么导出的gltf/glb模型加载到three.js中是否还依然共享网格和材质呢？

我们可以理所当然的认为是共享的，那么此时如果将这四个立方体合并是否就不太合适呢？

我去问了一下AI，AI说，你的担心是多余的，因为Three.js不支持共享，是为每一个网格都创建了一个实例，所以是不共享的。

我：嗯？？首先我之前使用过，知道材质是共享的，改变其中一个材质，其他所有模型的材质都会跟随变化，难道说网格不是这样？但Three.js的官网明确支持同一个geometry可以被多个Mesh所使用啊。

于是，我决定简单做个实验，来验证一下。

将导出的glb加载Three.js搭建的场景中，然后改变其中一个geometry的position的array，也就是顶点的位置，看是仅当前的mesh改变，还是所有的都改变。

代码如下：

TypeScript 复制代码

const array: number[] = [];
vertices.forEach((item) => {
  array.push(...item.pos);
});
const geometry = new Three.BufferGeometry();
const position = new Three.BufferAttribute(new Float32Array(array), 3);
geometry.setAttribute("position", position);

let geo: Three.BufferGeometry;
new GLTFLoader().load("/cube.glb", (glb) => {
  const mesh = glb.scene;
  scene.add(mesh);
  console.log(mesh.children[0].geometry === mesh.children[1].geometry); // 打印结果是 true
  geo = mesh.children[0].geometry;
});

const changeGeo = () => {
  geo.attributes.position = geometry.attributes.position;
  geo.attributes.position.needsUpdate = true;
};

const loop = () => {
  renderer.render(scene, camera);
  requestAnimationFrame(loop);
};

loop();

vertices是一个记录了pos的数组，可随意写一些，只要不和原始的相同就可以。我先打印了一下两个geometry是否全等，结果打印出来是true。小小AI，妄想骗我？！

为进一步验证，加了一个按钮，来动态改变，DOM如下：

TypeScript 复制代码

  <div id="blender" ref="blenderRef" />
  <button id="btn" @click="changeGeo">click</button>

运行结果如下图所示：

可以比较明显的看出，在我点击了按钮之后，所有的mesh的形状都发生了变化，因此，Three.js是支持blender中的关联复制的。

还有一个问题没有得到解决，就是像这种，虽然是四个模型，但是几何体和材质都是共享的同一个，合并之后，显然模型的几何体会变得很复杂，但是模型的个数减少了。这种情况下，是合并之后整体的渲染性能更佳，还是分开渲染性能更加呢？

求大佬们解答！

(我个人认为 (PPS：不一定对)：不合并，占用的资源会更少一些，但是渲染的帧率可能会降低，合并之后占用的资源会多一些，但是渲染的帧率会有所提升。对简单的模型来说其实无所谓，那如果对于上千万个面的那种模型又当如何选择呢？？)