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:不一定对):不合并,占用的资源会更少一些,但是渲染的帧率可能会降低,合并之后占用的资源会多一些,但是渲染的帧率会有所提升。对简单的模型来说其实无所谓,那如果对于上千万个面的那种模型又当如何选择呢??)

相关推荐
GitCode官方3 小时前
腾讯混元 3D 系列两大模型正式于 GitCode 开源:首个原生3D部件生成+多条件控制模型免费开放
3d·开源·gitcode·混元·hunyuan
dami_king3 小时前
RTX4090算力应用-3D
人工智能·深度学习·3d·ai
_JinHao4 小时前
Cesium Viewer对象详解——Cesium基础笔记(快速入门)
前端·javascript·笔记·3d·webgl
灰太狼不爱写代码6 小时前
3DGS输入的三个bin文件的作用
数码相机·计算机视觉·3d
DDC楼宇自控与IBMS集成系统解读6 小时前
DDC 楼宇自控系统 + 3D 可视化运维管理平台融合解决方案
运维·3d
YAY_tyy7 小时前
Three.js 开发实战教程(五):外部 3D 模型加载与优化实战
前端·javascript·3d·three.js
杀生丸学AI7 小时前
【无标题】SceneSplat:基于视觉-语言预训练的3DGS场景理解
3d·aigc·slam·语义分割·三维重建·视觉大模型·空间智能
Zuckjet_10 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_8638014610 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
航Hang*19 小时前
Kurt-Blender零基础教程:第3章:材质篇——第1节:材质基础~原理化BSDF,添加有纹理材质与用蒙版做纹理叠加
笔记·blender·材质·建模