Imported Model Size and Performance

Questions
1

I was hoping to display in my app as many as 3,000 instances of the same model at the same time - but it’s really slowing down my computer. It’s just too much.

I know InstancedMesh is the way to go for something like this so I’ve been following THREE.js’s examples here: three.js docs

The examples are fantastic, but they seem to use really small models which makes it really hard to get a good feel for what the model size-limits should be.

For example:
-The Spheres used here aren’t imported custom 3D models, they’re just instances of IcosahedronGeometry
-The Flower.glb model used in this example is tiny: it only has 218 Vertices on it.
-And the “Flying Monkeys” here come from a “.json” file so I can’t tell how many vertices that model has.

My model by comparison has 4,832 Vertices - which by the way, was listed in the “low-poly” category where I found it, so it’s not really considered particularly big.
In terms of file-size, it’s exactly 222kb.
I tried scaling it down in Blender and re-exporting it - still came out at 222kb.

Obviously I can take some “drastic measures”, like:
-Try to re-design my 3D model and make it smaller - but that would greatly reduce it’s beauty and the overall aesthetics of the project
-I can re-imagine or re-architect the project to display maybe 1,000 models at the same time instead of 3,000

etc.

But being that I’m new to THREE.js - and 3D modeling in general, I just wanted to first ask the community if there are any suggestions or tricks to try out first before making such radical changes.

-The model I’m importing is in the .glTF format - is that the best format to use or should I try something else?
-All the meshes in it come into the browser as instances of BufferGeometry which I believe is the lightest in terms of memory demands - is that correct?

Are there any other things I need to be aware of to optimize performance?
Some setting in Blender or other 3D modeling software that can reduce model-size?
Some general rules of thumb to follow when embarking on something like this?

Would really appreciate any and all help.
Thanks!

2

/cc

3

We do recommend using glTF, yes. But, just exporting to glTF does not necessarily mean the model is optimized — there are many ways available to simplify or optimize it (RapidCompact, gltfpack, Blender, …) by reducing vertex count, draw calls, and textures. As a general rule of thumb, aim to have <100,000 vertices rendered at any given time.

If you are rendering 1,000 meshes with 100 vertices, without instancing, you’re right at the 100K vertex goal but probably have too many draw calls. If you can instance those 1,000 meshes you are still right at the 100K vertex goal, but should now be OK on draw calls. Much more than this and you may need to look for ways to optimize further. This is just a rule of thumb, and depending on the devices you need to support and your framerate goals, you can increase these numbers.

One other note — using smooth normals in Blender, or not exporting normals at all, can often reduce the vertex count when exporting to glTF.

1 Like
4

ok, that’s really good info.
I just downloaded “gltfpack” and will give it a spin - then probably move on to some of the other options you mentioned till I hopefully find something that works.

How exactly do you not export Normals in Blender? (my google searches haven’t turned up anything useful thus far) - any clue how to do that?

5

It’s an export option under the Geometry section:

Screen Shot 2021-03-02 at 3.27.02 PM
Screen Shot 2021-03-02 at 3.27.02 PM1284×971 149 KB

6

OK thanks!
I found it and just tried exporting without Normals, and while the file’s size did go from 222kb down to 162kb - there was no noticeable difference in performance. My browser still “stutters” and struggles to display even 800 instances of my object.

“gltfpack” meanwhile keeps giving me “file not found” errors.
I installed it - globally - using npm, following their instructions - nothing. I just keep getting these “file
not found” errors (and frankly, I don’t know if it’s not finding the “gltfpack” folder I just installed, or the “.obj” file I’m asking it to convert…)

7

A couple of important points about my project:
-I’m not using any textures in my model. No jpg’s, no png’s, no images at all.
-All my “textures” will simply be created using HSL and RGB colors - which is to say that is how I’m “coloring” and “texturizing” my model: I’m simply taking the Geometry, and applying regular HTML colors to it programmatically, at run-time.
-Each instance of my model is made up of different gradient colors. Just two colors.
-As far as the Material goes, its just MeshPhong (I think.)

I don’t know if reading any of this makes you go "oh, well in that case you should just _ _ _ _ " but I figured I’d share what I’m doing.

Asides from that, what are folks like me - who are Programmers/Coders, and not designers or visual artists - supposed to do in a case like this? In other words: I bought this model, I love it, really want to use it in my project (it was in the “low-poly” category, so I thought it’d be fine) - but I’m not having much success optimizing it.
Is there some “model optimization” service I can use? Should I be looking for some 3D Modeling pros out there who could take a crack at this and let me know if this is even doable?

Would love and advice or suggestions you might have.

Thanks!

8

RapidCompact is one easy-to-use option for simplifying the model. It has a free tier but you may need to pay depending on how much you are doing.

On the free side, it doesn’t take too much know-how in Blender to import a glTF file, apply a Decimate modifier, and export it again. A tutorial or two on the basic mouse and keyboard controls and you should be all set. If the Decimate modifier doesn’t work well on this particular model then that might take some more 3D art studies to figure out. :wink:

1 Like
9

“Decimate Modifier”?
What a spectacular name! Violent and civil at the same time.

Awright, I’ll look into it and let you know how it goes - in about 24hrs (just cause “real life” beckons.)

Thanks again - I’ll share my results as soon as I have 'em!

1 Like