Tutorial:Away3D TypeScript: Materials – Mulitple Textures

In this semi-quick overview tutorial, we’ll be building upon our previous Away3D TypeScript: Materials – Texture tutorial. We will be demonstrating how to set up an advance asset handler. This will allow you to scale your application with many more assets.

We will be recreating the scene as seen above. You will need the following three images. texture, normal, specular. (You can open it in a new tab, or right-click then select, “Save target as…”).

Building upon our previous tutorial, to make our event handler more dynamic; we’ll assume we do not know what type of file is being loaded nor how many assets are being loaded in the same file.

To update our onResourceComplete() method we’ll need to:

  • Store an array of all the assets being loaded per event.
  • Examine each asset one at a time.
  • Determine if the asset is one that we want.
  • Assign the proper asset to the correct texture node.

This tutorial builds off of the Away3D TypeScript: Materials – Texture. All the new or changed code will be highlighted in the full code block below.

MultipleTextureMaterials.ts

Line 5 renames the class to MultipleTextureMaterials.

Line 49 You’ll notice that this time we’ve initialized our new TextureMaterial object with away.materials.DefaultMaterialManager.getDefaultTexture(). This provides a dummy texture that can react with the scene before our textures have uploaded. Otherwise we’d just have a bright white cube with no distinguishable surfaces.

Lines 80-81 loads two more assets. A normal image, as well as a specular image for our cube. *These two additional textures come greatly into play when we introduce lights to our scene.

Lines 87-105 is where the magic happens. We’ve completely re-written the onResourceComplete() method.

Line 87 creates an array labeled assets. This array will hold and elements of type IAsset. We will then pass the elements of the array event.assets[] into the array assets.

Line 89 will cycle through each element of the array assets. For each element it will run the inner block of code. At this point we are just looking at each asset that was loaded with the load() method. It could be a .jpg file, an .obj file, or even Away3D’s proprietary 3D file .awd. The more complex files can have many assets included in them. Therefore we will need to cycle through each asset and examine them individually.

Line 91 stores the individual asset in a variable labeled asset of type IAsset.

Line 93 creates a switch statement that will test the url of the asset to see if it is one of the images we are looking for. If so, run the next lines of code until a break statement is reached.

Lines 95, 98, 101 tests our switch statement’s condition to see if it is the same as image file we are looking for. If so, run the next two lines of code.

Lines 96, 99, 102 stores the asset image to our material object’s nodes. Our diffuse image is assigned to the texture node. The normal image is assigned to the normalMap node. Finally the specular image assigned to the specularMap node. You’ll also notice that we cast type the incoming image data to Texture2DBase.

Line 130 changes the called class name to MultipleTextureMaterials.

That’s it, our object is fully textured with three separately loaded texture files.

In Closing

Adding a TextureMaterial is relatively easy. Just understanding the constructor and what the parameters are, is the hardest part. Some time and forethought are needed to load multiple assets. But as you can see, it is relatively manageable.

In the tutorial above, we created a loop to cycle through each assets loaded one at a time, and evaluate its URL name to see if it is one of the assets we’re looking for. In an upcoming tutorial on loading objects, we’ll demonstrate other ways to sort the loaded assets.

You can look at the official TextureMaterial documentation here.

If this tutorial helped you, you can follow us on Facebook or Twitter to keep an eye out for more tutorials.

Posted in Away3D TypeScript, HTML, JavaScript Tagged with: , , , , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*