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

Question

I've read that Three.js triangulates all mesh faces, is that correct?

Then I realized that most of the gltf models I've been using have quad faces. It's very easy to triangulate faces in Blender so I'm curious if pre-triangulating the faces will result in quicker load of the mesh?

Thanks in advance, and if you have any other performance tips on three.js and gltf's (besides those listed at https://discoverthreejs.com/tips-and-tricks/ ) that would be super helpful!

Answer 1

glTF, in its current form, does not support quad faces, only triangles. Current glTF exporters (including Blender) triangulate the model when creating the glTF file. Some will automatically try to merge things back together on import.

By design, glTF stores its data in a similar manner to WebGL's vertex attributes, such that it can render efficiently, with minimal pre-processing. But there are some things you can do when creating a model, to help it reach these goals:

• Combine materials when possible, to reduce the number of draw calls.
• Combine meshes/primitives when possible, also to reduce draw calls.
• Be aware that discontinuous normals/UVs increase vertex count (again because of vertex attributes).
• Avoid creating textures filled with solid colors. Use Blender's default color/value node inputs instead.
• Keep texture sizes web-friendly, and power-of-two. Mobile clients sometimes can't handle anything larger than 2048x2048. Might also try 1024x1024, etc.