Performance and Usability Advice for Commercial Site

Questions
1

The files average 3-5 MB (2MB jpeg + 1MB geometry + 2MB morph target information).
Using a GLTF loader with the 5MB file saved as a .glb, orbit controls, and standard webgl renderer, is it possible for 95%-100% of people across most modern devices and browsers (modern as in, within the past 4 years) to be able to use his site? Is what I recommended viable? To reduce bounce rate, the 3D model has to load within 3 seconds. What is an acceptable size or is 5MB acceptable for 3 seconds?

1 Like
2

Just a side question while weā€™re on the topic. How much does lighting affect performance? I donā€™t think itā€™ll affect loading time by more than a sec?

3

Lots and lots of variables. Usually youā€™d pay someone who knows all this for consultation :slight_smile:

But one thing is for sure, lighting should really have no impact on load times.

3 Likes
4

I would say no. A lot of mobile devices will have trouble to download the 5 MB within 3 seconds. A good starting point might be to further reduce the file size of the textures. You are already using JPEG but there might be some room to reduce the resolution or use an aggressive compression rate.

A lot of smartphones support PVRTC or ASTC texture compression. You might want to load specific assets/textures for these devices if they support the respective format. It depends on the texture but in general itā€™s possible to halve the file size with ASTC compared to JPEG without seeing noticeable differences.

1 Like
5

Interestingā€¦ what do you think is a good file size for 3 seconds then? Also, Iā€™d like to know how long you think it would take to load 5MB?
EDIT: The US, ranked 44th, has an average mobile download speed of 26.32 Mbps in 2017 according to https://www.recode.net/2017/12/13/16773062/global-internet-speeds-faster-2017-ookla
If my calculations are right, isnā€™t that a 2.5MB/s download speed? Or are there other factors at play here?

6

What is the actual model? It could be interesting for the compression or (maybe progressive) loading approach

1 Like
7

Iā€™m told theyā€™re custom design water bottles. By ā€œprogressive loadingā€ are you referring to ā€œstreamingā€? My understanding is that it works a little like SketchFab where the model is loaded part by part?

8

There are various things you can do progressively and depends on the case what will fit best. One thing you definitely can do is using low res textures first since that seems to require a lot memory - or using for example a single color only showing the model first can be another approach, in most cases itā€™s just important to show something as fast as possible, not letting people stare at the void.

Maybe a low-poly proxy might suit your needs, but the 1 MB geometry is fine to load entirely. I would definetly separate the morph data though if it isnā€™t required in initial state. As long as you are loading any data i would recommend to show a loading indicator, since especially for low-res stages it can give a wrong impression to non-technical users which might see it as final stage and might quit at this point.

1 Like
9

Great advice! How would I separate the morph data? I think that is the most problematic area.

10

I use a custom modular binary format, i canā€™t tell about gltf since morph data mostly is attached/related to the modelling tool. You could also just extract them though. When the model is loaded just download the buffers as blob so you have a single separate file and export that gltf without morph targets again. Next time you load the blob and add the targets again. But thatā€™s just a quick solution.

You can probably just export a gltf with only geometry, and one with only the targets so they are separated. @donmccurdy can answer that i suppose :smile:

1 Like
11

Is your user in Sweden, USA (near a big city or somewhere i the country side) or Africa? I think there are probably some charts or historical data. For example if youā€™re serving to users who live in city X in country Y using Z service provider, your average transfer rate is some_amount_of_KB / second if you divide your file size (5mb) by this rate you will get the number of seconds it takes to download the asset.

1 Like
12

Average is not really useful here, you need to pick a lower range that you want to support - like 95% of users.

I recommend testing with www.webpagetest.org
You can throttle loading time to see what it will be like to load your site on an old phone using 3G.

Note that youā€™ll never be able to get ā€˜under 3 seconds for all usersā€™. You have to say something like ā€˜under 3 seconds for all users with a Galaxy S5 or better on 4gā€™. Even then, itā€™s very tricky to test this.

1 Like
13

Yeah, each morph target is really just another copy of the mesh vertex positions (and possibly normals and tangents). So if you export N separate meshes, you can always join them together into a single mesh with morph targets in three.js. Something like:

mesh1.geometry.morphAttributes.position = [
  mesh2.geometry.attributes.position,
  mesh3.geometry.attributes.position
];

Itā€™s also technically possible to split the binary data of a glTF file across multiple files, like:

- model.gltf
  - geometry.bin
  - morph.bin

But this would require custom processing of the file ā€“ a modeling tool exporter wonā€™t do that for you. Easier to just use separate meshes in this case.

2 Likes
14

All of this stuff mentioned here is the experience you pay $$$ for, once someone lays out this architecture, you can pay $ for it to actually be developed. ($$/hour)