three.js 加载已经三角化的网格是否比使用四边形的网格性能更高?

Is it more performant for three.js to load a mesh that's already been triangulated than a mesh using quads?

我读到 Three.js 对所有网格面进行三角剖分,对吗?

然后我意识到我一直使用的大多数 gltf 模型都有四面体。在 Blender 中对人脸进行三角剖分非常容易,所以我很好奇预先对人脸进行三角剖分是否会导致更快地加载网格?

提前致谢,如果您有关于 three.js 和 gltf 的任何其他性能提示(除了 https://discoverthreejs.com/tips-and-tricks/ 中列出的那些),那将非常有帮助!

glTF 目前的形式不支持四面体,只支持三角形。当前的 glTF 导出器(包括 Blender)在创建 glTF 文件时对模型进行三角测量。有些会自动尝试在导入时将内容合并回一起。

根据设计,glTF 以与 WebGL 的顶点属性类似的方式存储其数据,这样它就可以高效地渲染,并且 pre-processing。但是在创建模型时您可以做一些事情来帮助它实现这些目标:

  • 尽可能合并材质,以减少绘制调用次数。
  • 尽可能合并 meshes/primitives,同时减少绘图调用。
  • 请注意,不连续 normals/UVs 会增加顶点数(同样是因为顶点属性)。
  • 避免创建充满纯色的纹理。请改用 Blender 的默认 color/value 节点输入。
  • 保持纹理尺寸 web-friendly 和 power-of-two。移动客户端有时无法处理大于 2048x2048 的任何内容。也可以尝试 1024x1024 等