MetallicMaterial

Configures the normal rendered appearance of Meshes using the physically-accurate metallic-roughness shading model.

• Useful for conductive materials, such as metal, but also appropriate for insulators.
• SpecularMaterial is best for insulators, such as wood, ceramics and plastic.
• PhongMaterial is appropriate for non-realistic objects.
• LambertMaterial is appropriate for high-detail models that need to render as efficiently as possible.

Usage

In the example below we'll create a Mesh with MetallicMaterial and ReadableGeometry loaded from OBJ.

Note that in this example we're providing separate Texture for the MetallicMaterial#metallic and MetallicMaterial#roughness channels, which allows us a little creative flexibility. Then, in the next example further down, we'll combine those channels within the same Texture for efficiency.

[Run this example]

import {Viewer, Mesh, loadOBJGeometry, ReadableGeometry, MetallicMaterial, Texture} from "xeokit-sdk.es.js";

const viewer = new Viewer({
     canvasId: "myCanvas"
});

viewer.scene.camera.eye = [0.57, 1.37, 1.14];
viewer.scene.camera.look = [0.04, 0.58, 0.00];
viewer.scene.camera.up = [-0.22, 0.84, -0.48];

loadOBJGeometry(viewer.scene, {
     src: "models/obj/fireHydrant/FireHydrantMesh.obj"
})
.then(function (geometry) {

     // Success

     new Mesh(viewer.scene, {

         geometry: new ReadableGeometry(viewer.scene, geometry),

         material: new MetallicMaterial(viewer.scene, {

             baseColor: [1, 1, 1],
             metallic: 1.0,
             roughness: 1.0,

             baseColorMap: new Texture(viewer.scene, {
                 src: "models/obj/fireHydrant/fire_hydrant_Base_Color.png",
                 encoding: "sRGB"
             }),
             normalMap: new Texture(viewer.scene, {
                 src: "models/obj/fireHydrant/fire_hydrant_Normal_OpenGL.png"
             }),
             roughnessMap: new Texture(viewer.scene, {
                 src: "models/obj/fireHydrant/fire_hydrant_Roughness.png"
             }),
             metallicMap: new Texture(viewer.scene, {
                 src: "models/obj/fireHydrant/fire_hydrant_Metallic.png"
             }),
             occlusionMap: new Texture(viewer.scene, {
                 src: "models/obj/fireHydrant/fire_hydrant_Mixed_AO.png"
             }),

             specularF0: 0.7
         })
     });
}, function () {
         // Error
     });

Background Theory

For an introduction to physically-based rendering (PBR) concepts, try these articles:

• Joe Wilson's Basic Theory of Physically-Based Rendering
• Jeff Russel's Physically-based Rendering, and you can too!
• Sebastien Legarde's Adapting a physically-based shading model

MetallicMaterial Properties

The following table summarizes MetallicMaterial properties:

Combining Channels Within the Same Textures

In the previous example we provided separate Texture for the MetallicMaterial#metallic and MetallicMaterial#roughness channels, but we can combine those channels into the same Texture to reduce download time, memory footprint and rendering time (and also for glTF compatibility).

Here's the Mesh again, with our MetallicMaterial with those channels combined in the MetallicMaterial#metallicRoughnessMap Texture, where the R component multiplies by MetallicMaterial#metallic and G multiplies by MetallicMaterial#roughness.

new Mesh(viewer.scene, {

    geometry: geometry,

    material: new MetallicMaterial(viewer.scene, {

        baseColor: [1, 1, 1],
        metallic: 1.0,
        roughness: 1.0,

        baseColorMap: new Texture(viewer.scene, {
            src: "models/obj/fireHydrant/fire_hydrant_Base_Color.png",
            encoding: "sRGB"
        }),
        normalMap: new Texture(viewer.scene, {
            src: "models/obj/fireHydrant/fire_hydrant_Normal_OpenGL.png"
        }),
        metallicRoughnessMap: new Texture(viewer.scene, {
            src: "models/obj/fireHydrant/fire_hydrant_MetallicRoughness.png"
        }),
        metallicRoughnessMap : new Texture(viewer.scene, {                  // <<----------- Added
            src: "models/obj/fireHydrant/fire_hydrant_MetallicRoughness.png"  // R component multiplies by metallic
        }),                                                                   // G component multiplies by roughness
        occlusionMap: new Texture(viewer.scene, {
            src: "models/obj/fireHydrant/fire_hydrant_Mixed_AO.png"
        }),

        specularF0: 0.7
 })

Although not shown in this example, we can also texture MetallicMaterial#alpha with the A component of MetallicMaterial#baseColorMap's Texture, if required.

Alpha Blending

Let's make our Mesh transparent.

We'll update the MetallicMaterial#alpha and MetallicMaterial#alphaMode, causing it to blend 50% with the background:

hydrant.material.alpha = 0.5;
hydrant.material.alphaMode = "blend";

Alpha Masking

Let's apply an alpha mask to our Mesh.

We'll configure an MetallicMaterial#alphaMap to multiply by MetallicMaterial#alpha, with MetallicMaterial#alphaMode and MetallicMaterial#alphaCutoff to treat it as an alpha mask:

new Mesh(viewer.scene, {

    geometry: geometry,

    material: new MetallicMaterial(viewer.scene, {

        baseColor: [1, 1, 1],
        metallic: 1.0,
        roughness: 1.0,
        alpha: 1.0,
        alphaMode : "mask",  // <<---------------- Added
        alphaCutoff : 0.2,   // <<---------------- Added

        alphaMap : new Texture(viewer.scene{ // <<---------------- Added
             src: "textures/alphaMap.jpg"
        }),
        baseColorMap: new Texture(viewer.scene, {
            src: "models/obj/fireHydrant/fire_hydrant_Base_Color.png",
            encoding: "sRGB"
        }),
        normalMap: new Texture(viewer.scene, {
            src: "models/obj/fireHydrant/fire_hydrant_Normal_OpenGL.png"
        }),
        metallicRoughnessMap: new Texture(viewer.scene, {
            src: "models/obj/fireHydrant/fire_hydrant_MetallicRoughness.png"
        }),
        metallicRoughnessMap : new Texture(viewer.scene, {                  // <<----------- Added
            src: "models/obj/fireHydrant/fire_hydrant_MetallicRoughness.png"  // R component multiplies by metallic
        }),                                                                   // G component multiplies by roughness
        occlusionMap: new Texture(viewer.scene, {
            src: "models/obj/fireHydrant/fire_hydrant_Mixed_AO.png"
        }),

        specularF0: 0.7
 })