Part 3: Meshes & Materials (WebXR with Babylon.js)

👀 Stumbled here on accident? Start with the first part!

Welcome back to the next article in our WebXR series. In this article, we take a look at some helpful features implemented in Babylon.js, specifically related to creating objects.

ℹ️ Remember - you can always run the code associated with this article and follow along.

npm start --part=3

What is Material?

ℹ️ Materials give your meshes color and texture.

They can be displayed as a wireframe, scaled and offset across a mesh, have degrees of transparency and be blended.

What is a Mesh?

ℹ️ In the 3D virtual world shapes are built from meshes, lots of triangular facets joined together, each facet made from three vertices.

Babylon.js splits meshes into 4 broader categories.

1. Set Shapes - which usually have names in everyday use and their forms are well known and recognized. Examples include the box, sphere, cone and plane.

1. Parametric Shapes - these have no everyday names and are formed through data sets and tend to have irregular shapes. Examples include ribbons, extrusions, and irregular convex or concave polygons.

1. Polyhedra - three dimensional regular solids including octahedron, dodecahedron, icosahedron and icosphere. The method of creating these is createPolyhedron along with a number for the basic shapes and an array of vertices for a wider range of shapes or createIcoSphere.

1. Custom - those you design yourself and build from your own set of vertices connected into triangular facets as you choose.

📚 More about Meshes can be found here.

✅ For the simplicity of this series we’re going to create a simple Box with the help of the Meshbuilder and give it a color using a StandardMaterial.

Creating a Box Mesh

The function createBox() illustrates how easily a 3D object can be created in Babylon.js.
In this example, a simple box is created.

createBox() {
    const material = new StandardMaterial("material", this._scene);

    material.diffuseColor = Color3.Random();

    this._box = MeshBuilder.CreateBox("box", { width: 0.5, height: 0.5, depth: 0.5 }, this._scene);
    this._box.material = material;
    this._box.rotation.y = Math.PI / 4;
    this._box.position = new Vector3(0, 1.5, 1.5);
}

First, a standard material is created, calling StandardMaterial("material", this._scene). Then, the material's diffuse color is set to a random color by calling Color3.Random().

The box itself is created with MeshBuilder.CreateBox("box", { width: 0.5, height: 0.5, depth: 0.5 }, this._scene). This method creates a cube-shaped mesh with the specified dimensions.

The box is then rotated by 45 degrees Math.PI / 4 and positioned at (-1, 1.5, 1.5) in 3D space.
This will place the box a little to the front left relative to us.

Adding the box to the scene

async createScene(): Promise<Scene> {
  ...
  this.createBox();

  return this._scene;
}

Finally, we have to add this.createBox() to the scene.

Conclusion

In wrapping up this article, we've touched on the fundamentals of creating 3D objects in Babylon.js within the WebXR framework. Through the simple box mesh example, we've seen how materials and meshes work together in 3D modeling.

The fourth part of this series will be about Hit Testing.