Models and textures

Virtual worlds can be vibrant and detailed in structure. Let’s see what we can use to put them together.

Models and Textures
Till now we have been using default shapes (e.g. cubes) and simple colours to populate and colour the virtual worlds. These default shapes are called primitives. Primitives in computer graphics are similar to basic data types in programming languages. They can be used to construct a wide array of artefacts, and are considerably lightweight to create and process. However, primitives can increase the complexity of maintaining and updating the virtual world with complex structures. Just like programming languages offer composite data types as a means to manage complex requirements, we have the option of using 3D models to represent virtual world artefacts.

3D Models
There are many file formats and syntax for storing and representing 3D models. There is no agreement on the use of a single one as a universal standard. You will encounter 3D models available in .fbx, .obj, .dae, .gltf and other file formats. These formats store the same model in different ways and require special software to convert the model for storage in different formats.

GLTF in AFrame
AFrame supports loading a large variety of formats through component libraries. However, AFrame also provides default support for loading the GLTF format. GLTF stands for ‘GL Transmission Format’ and is a royalty-free file format. GLTF models can be specified as a single binary file (.glb) or a set of files including a main “.gltf” file accompanied by textures (.jpg or .png) and a “.bin” file.
Due to CORS restrictions, a GLTF file and the requesting virtual world file (.html) need to be served from a server. If you look at the provided example (BasicModel.html in the ‘See Also’ section below), the following code initializes and loads the model into the scene.

<a-gltf-model id="flames" src="../assets/modelfg/flamegreen.gltf" 
 rotation="0 90 0" scale="2 2 2"> 
</a-gltf-model> 

The GLTF format can also store custom animations for the model. Each available animation is specified with a ‘clip name’. To use these animations in the virtual world, we need to introduce the animation-mixer component. An example of the animated GLTF model is provided (AnimModel.html). We first load the library for the animation-mixer component as a script in the header of the file using the following line:

<script src="../js/aframe-extras.loaders.6.1.0.min.js"></script> 

For our current GLTF file, we know that the clip name is ‘Take*’. We pass this as a value to the ‘animation-mixer’ attribute in the <a-gltf-model> tag. This is shown below:

<a-gltf-model id="flames" src="../assets/modelfg/flamegreen.gltf" 
 rotation="0 90 0" scale="2 2 2" 
 animation-mixer="clip:Take*"> 
</a-gltf-model> 

Textures

Replacing primitives with 3D models is one way to introduce complex artefacts into the virtual world. In the same vein, we can use textures to introduce more complex colour schemes instead of simple single colours. Textures are specified as 2D images which get mapped to the surface of a primitive (or even a model). Defining the mapping is beyond the scope of this course. However, we will explore the use of textures in AFrame through the next example.

Loading Texture Images

The first step is to host the virtual world application and the texture images on a server. To access the image as a texture in the application, AFrame first loads it as an image asset. The designer also has to specify a unique identifier ‘id’ to access the texture. Next, the actual texture can be access by an AFrame entity by referencing this ‘id’. We have provided an example resource (BasicTexture.html in the ‘See Also’ section below). The key snippets from the code related to the texture usage are:

<a-assets> 
 <img id="earth" src="../assets/vw/earth_daymap.jpg"> 
... 
</a-assets> 

The texture loaded from earth_daymap.jpg is available for use by its reference id attribute ‘earth’.

<a-sphere material="src:#earth;" radius="0.5" mixin="rotY" shadow></a-sphere> 

As a designer, you should utilize primitives, textures and models as and when required to populate the virtual world and enhance user immersion and experience.