Hi, just what the title says.
I have a small background in blender and more or less know what I’m doing and currently I’m preparing props for a website I’m working on.
Here’s the situation:
I’m making a traffic sign storage website with a 3d viewer.
I’ve prepared most of it, but I’m questioning if the same logic from blender applies to OpenGL. (Probably it does but I’d rather have someone confirm it)
I made a big texture (8mb) that combines all traffic signs textures into one file. All props that would use it could have 1 material and just use the same texture albeit it being huge. Should I go with it? Or should I revamp everything and create 1 texture for every traffic sign decal?
In blender, the first option leaves everything up to putting the UV in the correct place and the material can be reused on most objects. I’m still a beginner in THREEJS and just going around and googling stuff, so I’m not sure if it works similarly.
We’re talking like 600 props like such of different sizes and decals.
Fortunately, website won’t be refreshing too much, if nothing changes, it’s going to be just a ‘one refresh per action’ kind of site.
In general it is best to have as few objects rendering (per frame) as possible in WebGL. More objects means more draw calls, and if you have more than ~100 draw calls or so, this will start to hurt performance. If sharing a texture will allow you to merge objects (the merging can also be done with tools like gltfpack, as long as textures are shared) then that’s probably best. Two exceptions would be: (1) probably don’t let the texture get bigger than 4K by 4K, and (2) if only one sign is visible at any one time, or most users won’t ever see most of the signs, then having many small textures streamed in as-needed could be best.
I guess another question is whether anyone will see all of those signs? It might be more responsive after loading but if people are on average going to only view/use 5 signs of from a texture of hundreds is it worth the 8mb overhead or better to load smaller ones when needed?
I always try to keep textures no bigger than 2k. One of the benefits of using small textures in separate files is that you can benefit from parallel/multiplexed http/2 requests and network performance will be better. For this you need to work with gltf + texture or similar.
With webp images in some OS/browser combinations I have experienced out of memory problems for images larger than 4k. If you are using webp textures keep this in mind.
Thank You for the replies, I’ll go with the main plan but with a reduced texture size, if it behaves somewhat laggy I’ll experiment more. Thanks again!