# How to load mesh and material asynchronously to increase the web performance?

**URL:** <https://forum.babylonjs.com/t/how-to-load-mesh-and-material-asynchronously-to-increase-the-web-performance/13382>\
**Category:** Questions\
**Created:** [August 14, 2020, 1:26pm UTC](https://forum.babylonjs.com/t/how-to-load-mesh-and-material-asynchronously-to-increase-the-web-performance/13382 "2020-08-14T13:26:34Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ilhamachmada](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ilhamachmada/32/7045_2.png) [@ilhamachmada](https://forum.babylonjs.com/u/ilhamachmada)\
**Post date:** [August 14, 2020, 1:26pm UTC](https://forum.babylonjs.com/t/how-to-load-mesh-and-material-asynchronously-to-increase-the-web-performance/13382/1 "2020-08-14T13:26:34Z")

</div>

Hi all,

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](https://doc.babylonjs.com/how_to/promises)).

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?

Thank you

 ![Screenshot_22](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/4/4e392320304d5ea14950e0718c6d730db52ee390.png)

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [August 14, 2020, 1:57pm UTC](https://forum.babylonjs.com/t/how-to-load-mesh-and-material-asynchronously-to-increase-the-web-performance/13382/2 "2020-08-14T13:57:41Z")

</div>

`Promise.all([arrayOfPromises])` ([Promise.all() - JavaScript | MDN](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)) 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.

---

<div class="post-metadata">

**Author:** ![ilhamachmada](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ilhamachmada/32/7045_2.png) [@ilhamachmada](https://forum.babylonjs.com/u/ilhamachmada)\
**Post date:** [August 15, 2020, 2:13am UTC](https://forum.babylonjs.com/t/how-to-load-mesh-and-material-asynchronously-to-increase-the-web-performance/13382/3 "2020-08-15T02:13:08Z")

</div>

So do I have to make two different promises? The first is a promise for mesh and the second is a promise for materials.

---

<div class="post-metadata">

**Author:** ![jkeys](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jkeys/32/9127_2.png) [@jkeys](https://forum.babylonjs.com/u/jkeys)\
**Post date:** [August 15, 2020, 2:24am UTC](https://forum.babylonjs.com/t/how-to-load-mesh-and-material-asynchronously-to-increase-the-web-performance/13382/4 "2020-08-15T02:24:33Z")

</div>

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:

`await Promise.all([myMeshLoadPromise, myMaterialsLoadPromise]);`

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.

---

<div class="post-metadata">

**Author:** ![jkeys](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jkeys/32/9127_2.png) [@jkeys](https://forum.babylonjs.com/u/jkeys)\
**Post date:** [August 15, 2020, 2:28am UTC](https://forum.babylonjs.com/t/how-to-load-mesh-and-material-asynchronously-to-increase-the-web-performance/13382/5 "2020-08-15T02:28:11Z")

</div>

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.