SpecularMaterial

Configures the normal rendered appearance of Meshes using the physically-accurate specular-glossiness shading model.

• Useful for insulators, such as wood, ceramics and plastic.
• MetallicMaterial is best for conductive materials, such as metal.
• 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 a buildTorusGeometry and a SpecularMaterial.

Note that in this example we're providing separate Texture for the SpecularMaterial#specular and SpecularMaterial#glossiness 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.

import {Viewer, Mesh, buildTorusGeometry, SpecularMaterial, Texture} from "xeokit-sdk.es.js";

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

const myMesh = new Mesh(viewer.scene,{

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

     material: new SpecularMaterial(viewer.scene,{

         // Channels with default values, just to show them

         diffuse: [1.0, 1.0, 1.0],
         specular: [1.0, 1.0, 1.0],
         glossiness: 1.0,
         emissive: [0.0, 0.0, 0.0]
         alpha: 1.0,

         // Textures to multiply some of the channels

         diffuseMap: new Texture(viewer.scene, { // RGB components multiply by diffuse
             src: "textures/diffuse.jpg"
         }),
         specularMap: new Texture(viewer.scene, { // RGB component multiplies by specular
             src: "textures/specular.jpg"
         }),
         glossinessMap: new Texture(viewer.scene, { // R component multiplies by glossiness
             src: "textures/glossiness.jpg"
         }),
         normalMap: new Texture(viewer.scene, {
             src: "textures/normalMap.jpg"
         })
     })
});

Combining Channels Within the Same Textures

In the previous example we provided separate Texture for the SpecularMaterial#specular and SpecularMaterial#glossiness 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 our SpecularMaterial again with those channels combined in the SpecularMaterial#specularGlossinessMap Texture, where the RGB component multiplies by SpecularMaterial#specular and A multiplies by SpecularMaterial#glossiness.

const myMesh = new Mesh(viewer.scene,{

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

     material: new SpecularMaterial(viewer.scene,{

         // Channels with default values, just to show them

         diffuse: [1.0, 1.0, 1.0],
         specular: [1.0, 1.0, 1.0],
         glossiness: 1.0,
         emissive: [0.0, 0.0, 0.0]
         alpha: 1.0,

         diffuseMap: new Texture(viewer.scene, {
             src: "textures/diffuse.jpg"
         }),
         specularGlossinessMap: new Texture(viewer.scene, { // RGB multiplies by specular, A by glossiness
             src: "textures/specularGlossiness.jpg"
         }),
         normalMap: new Texture(viewer.scene, {
             src: "textures/normalMap.jpg"
         })
     })
});

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

Alpha Blending

Let's make our Mesh transparent. We'll redefine SpecularMaterial#alpha and SpecularMaterial#alphaMode, causing it to blend 50% with the background:

const myMesh = new Mesh(viewer.scene,{

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

     material: new SpecularMaterial(viewer.scene,{

         // Channels with default values, just to show them

         diffuse: [1.0, 1.0, 1.0],
         specular: [1.0, 1.0, 1.0],
         glossiness: 1.0,
         emissive: [0.0, 0.0, 0.0]
         alpha: 0.5,         // <<----------- Changed
         alphaMode: "blend", // <<----------- Added

         diffuseMap: new Texture(viewer.scene, {
             src: "textures/diffuse.jpg"
         }),
         specularGlossinessMap: new Texture(viewer.scene, { // RGB multiplies by specular, A by glossiness
             src: "textures/specularGlossiness.jpg"
         }),
         normalMap: new Texture(viewer.scene, {
             src: "textures/normalMap.jpg"
         })
     })
});

Alpha Masking

Now let's make holes in our Mesh. We'll give its SpecularMaterial an SpecularMaterial#alphaMap and configure SpecularMaterial#alpha, SpecularMaterial#alphaMode, and SpecularMaterial#alphaCutoff to treat it as an alpha mask:

const myMesh = new Mesh(viewer.scene,{

    geometry: buildTorusGeometry(viewer.scene, ReadableGeometry, {}),

     material: new SpecularMaterial(viewer.scene, {

         // Channels with default values, just to show them

         diffuse: [1.0, 1.0, 1.0],
         specular: [1.0, 1.0, 1.0],
         glossiness: 1.0,
         emissive: [0.0, 0.0, 0.0]
         alpha: 1.0,         // <<----------- Changed
         alphaMode: "mask",  // <<----------- Changed
         alphaCutoff: 0.2,   // <<----------- Added

         alphaMap: new Texture(viewer.scene, { // <<---------- Added
             src: "textures/diffuse/crossGridColorMap.jpg"
         }),
         diffuseMap: new Texture(viewer.scene, {
             src: "textures/diffuse.jpg"
         }),
         specularGlossinessMap: new Texture(viewer.scene, { // RGB multiplies by specular, A by glossiness
             src: "textures/specularGlossiness.jpg"
         }),
         normalMap: new Texture(viewer.scene, {
             src: "textures/normalMap.jpg"
         })
     })
});

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

SpecularMaterial Properties

The following table summarizes SpecularMaterial properties: