Different number of triangles in a scene with gltf model

Questions
, , , ,
1

Hey, everybody!

I’m currently learning three.js, and I’ve encountered an inconsistency in displaying the number of triangles in a sketchfab model, I’m trying to find the cause.
For study and tests I chose a model from the author Karol Miklas (Karol Miklas (@karolmiklas) - Sketchfab), namely FREE 1975 Porsche 911 (930) Turbo (https://sketchfab.com/3d-models/free-1975-porsche-911-930-turbo-8568d9d14a994b9cae59499f0dbed21e).

In the description the number of triangles is 241.3k.
Also, after downloading I checked the number of triangles in the following services:

  1. three.js editor - 241,260
    Screenshot_3
  2. glTF Viewer - 241,260
    (https://gltf-viewer.donmccurdy.com/)
    Screenshot_4
  3. gltf.report - I couldn’t find the total number, only individually, but ± up to 250k.
    (https://gltf.report)
    Screenshot_2
    Screenshot_21810×945 141 KB

The problem is that in the scene, after outputting console.log(renderer.info), I get 480,202 in the triangles parameter.
After assigning the following parameter to all meshes of the model:
child.material.side = THREE.FrontSide
I get 426,607, which is still a lot.
In the scene and in the model no lights and shadows are used, only environment map (the numbers above are already given with triangles skybox subtracted)

const updateAllMaterials = () =>
{
    scene.traverse((child) =>
    {
        if(child.isMesh && child.material.isMeshStandardMaterial)
        {
            child.material.envMapIntensity = global.envMapIntensity
            child.material.side = THREE.FrontSide
        }
    })
}

gltfLoader.load(
    '/models/Porsche/scene.gltf',
    (gltf) =>
    {
        gltf.scene.position.set(0, -0.08, 0)
        scene.add(gltf.scene)
        updateAllMaterials()
    },
)

I can’t understand why there is such a big gap in the numbers, if anyone has encountered similar and can point out what to look out for or what could be the cause of such a difference, I’d appreciate it).
Thanks!

2

flipping the whole model frontside doesn’t seem like a good idea, things that should not normally render now do. it would be better to fix flipped normals in blender.

lights and shadows will also affect the count because the scene will get rendered double or more, depending on how many lights and which type. Pointlight for instance + castShadow renders the scene 6 additional times.

triangle count also depends on how you’re looking at it and from from angle.

btw you don’t need this anymore, nor will this have any effect

- child.material.envMapIntensity = global.envMapIntensity

in latest three it’s just this

+ scene.environmentIntensity = ???
3

ps, i had a box using the same car, it’s 46.306 triangles (and 202.380 with all the extra stuff, shadows, fisheye, etc).

https://codesandbox.io/p/sandbox/envmap-ground-projection-q48jgy?file=%2Fsrc%2FApp.js

this was most likely gltfjsx, you can try, download the 70mb 4k version from sketchfab, then run

npx gltfjsx free_1975_porsche_911_930_turbo.glb --transform

this will dedupe it and bring it from 74.15MB to 3.13MB. also save tons of triangles and draw calls.

if the resolution is too little

npx gltfjsx free_1975_porsche_911_930_turbo.glb --transform --resolution=2048
4

Hi, thank you very much for your reply.
If I remove all manipulations with the model, and leave only adding it to the scene, like this:

gltfLoader.load(
    '/models/Porsche/scene.gltf',
    (gltf) =>
    {
        scene.add(gltf.scene)
    },
)

it doesn’t affect the amount of triangless.
Also, there is no lighting or shadows in the scene, except for the environment map. But the whole sphere with environment map takes 5780 triangless.

It turns out that such a variation in the number of triangless may be related to the resolution of the model itself?

5

you can lessen the resolution of the env sphere.

sketchfab models are not typically prepared for the web and/or game ready, they are way too complex.

from your code it also looks like you’re using scene.gltf, which means you’re loading a 70-100mb model. the vertex count is the least of your problems in that case because no one is going to wait for your site. a model on the web should be 3-4-5mb max. you can reduce geometry in blender and then use tools like gltf-transform or gltfjsx to compress it into a glb. you need draco loader in that case.

6

I understand that I need to maximize the model initially, and then add it to the scene.
Could you please tell me where I can learn how to properly prepare a model in blender for further use in the web?
Are there any basic rules or restrictions on model size, format and so on?
Maybe there are some verified sources

7

blender is not easily explained. i would start with a couple of beginner tutorials. there is a decimate modifier and edit mode has a couple of cleanup tools. it’s very useful to know if you’re using threejs with models.

1 Like