I have a question about the performance of the loaded mesh. I want to improve my 3d web performance by loading assets (mesh and material) in parallel or asynchronously. I used a promise on Babylon (see this doc: Use Promises - Babylon.js Documentation).
For example, the case is like in the screenshot that I show below. I have a mesh called arm-robot.babylon and a material called yellow.jpg. Material (yellow.jpg) will load after mesh arm-robot.babylon has been successfully loaded.
The problem is that I want the mesh and material to load together, so the material doesn’t have to wait for the mesh to load successfully. Is there a way to solve this?
Promise.all([arrayOfPromises]) (Promise.all() - JavaScript | MDN) will execute all promises “at the same time” and return when they are all fulfilled. Unless they must run one after the other you can put all of your promises into all() call and wait for it to resolve. You will then know when all of your resources are ready to be used.
Yes, you create your two promises – which technically start executing as soon as they are created! so the first one you create has a headstart – and then invoke the following code:
Of course this only works if there are no dependencies between the two promises. If your material loading requires the meshes to exist, you must await the mesh load before the material load, or develop something more clever to interleave the loading of materials.
Also, in general if you have two async operations that are unrelated in semantics but are related temporally (they necessarily must happen close together in time), then you should probably be using Promise.all semantics. That lowers the complexity of your algorithm to max(complexity of promise for all concurrentPromises); if you have n unrelated O(n) promises, you want to use Promise.all to preserve the O(n) runtime; if you run them synchronously, you end up with an ugly O(n^2) complexity.
