asset management in your project

I've got a confession: this part of the project isn't entirely related to the first two parts. Before we move on to making your WebXR sites interactive with JavaScript, though, I wanted to make sure we got this concept out of the way. So, I'm just sort of shoving it in here and hoping you won't be too mad at me.

Sorry! :) Now, let's get to it.

Previously, to bring assets (files) into your projects you went through the following steps:

1.  drag the file into your Glitch assets folder so that it's hosted online and has a URL
2. copy the URL of the file
3. Create an element and paste that URL as the value of a src attribute like this:
<a-box src="www.yourlongglitchurlhere.com"></a-box>

This works just fine, but it's not ideal because if you have quite a few assets (images, 3D models, sounds, videos, etc) in your project that are loading when your website loads, it may cause a lot of annoying lag and it will affect the performance of your website. Some things will show up while others are still loading and overall it just makes for a crummy experience for the user.

Luckily, A-Frame has a handy way to make sure the loading of all your assets happens all at once in the very beginning, before your website appears. This is called preloading. It also stores these assets in the browser so that they are ready to rock in case you want them to appear quickly when the user clicks a button.

It's called the Asset Management System. I'll show you how it works in 4 simple steps:

1. You still want to drag your assets into the assets folder of your Glitch project. You can find the assets folder in the sidebar on the left of your Glitch project.

2. Now, inside your a-scene element, create an a-assets element. This is where you can store all of the assets that you want to preload:

<a-assets></a-assets>


3. Let's say you're preloading an image file that you've already dragged into your Glitch assets folder. Put an img element inside your a-assets element. Img is an HTML element that doesn't require a closing tag. Give it an id attribute and a src attribute. You can set the id to be anything you want, and for the src, use the URL for the asset that you can find in your Glitch assets folder:

‍<a-assets>   </a-assets>
  <img id="exampleimage" src="theglitchurl.xyz">


4. Step 3 will preload the asset to the Asset Management System and store it in the browser, but it doesn't actually bring the image into your scene so that it's visible to the user. I want to set this image as the src of a box entity, so I'll set up my box like this:

src="#exampleimage">
‍
Notice that for the src of the box, I can use the # sign followed by the id of the asset I set in the Asset Management System!

Here's an example project where I'm using this technique:

Now, let's say you want to store a glTF model in the Asset Management System, the sort we learned how to bring into our sites in Project 1.

It's a similar process, but instead of putting an img in your a-assets element, you can use a-asset-item, and you want to put a response-type="arraybuffer" on it like this:

<a-asset-item id="island" src="yourmodelsurl.xyz" response-type="arraybuffer"></a-asset-item>

The response-type="arraybuffer" just helps the browser understand the specific kind of model you're throwing at it - a unified glTF file. We don't need to get into the technicalities of that just yet.

Then, to make the model actually show up in your scene, use the a-gltf-model as you learned before, but you'll set its src to #island (the # sign + the id of the a-asset-item) to link it to the stored asset.

<a-gltf-model src="#island"></a-gltf-model>

Now I'll add a glTF model to the same project as above using this technique:

I know this process of putting assets into the Asset Management System with a-assets might be a little annoying, but it's really worth it because of the improvements it makes to the performance of your site and the experience of anyone who sees it.

You can also use this system to preload <audio> </audio>and <video></video> elements!