Material Workflows
See also:
- Scene Graphs - how to construct scene content
xeokit supports several types of material workflow, from physically-based materials for realism, to non-realistic Phong and Lambertian materials for low memory usage and efficient rendering for high-detail models.
Physically based rendering, or PBR, is a shading model in computer graphics that seeks to render graphics in a way that more accurately models the flow of light in the real world. PBR uses real world values for material attributes, to provide results that are more accurate and consistent under all lighting conditions.
For an introduction to PBR concepts, check out the Allegorithmic PBR Guide.
xeokit supports both the metallic-roughness and specular-glossiness PBR workflows, within the same scenes. Metallic-roughness is best for rendering conductors, while specular-glossiness is best for rendering dielectric materials, such as glass and plastic. In practice, however, metallic-roughness is usually expressive enough for all purposes.
Click the image below for a live demo of xeokit's physically-based metallic material workflow.
At the lowest level within the SDK, xeokit's 3D engine supports these workflows with its MetallicMaterial and SpecularcMaterial components.
At a higher level, xeokit loads glTF 2.0 models containing these workflows via its GLTFLoaderPlugin.
Physically-based materials are overkill for models that focus on describing structure (eg. MEP), and are inefficient for models that contain huge numbers of unique objects.
For a lower memory footprint for models that need to show shiny smoothly-shaded surfaces or textures, xeokit supports the non-realistic Blinn/Phong rendering model.
At the lowest level within the SDK, xeokit's 3D engine supports Blinn/Phong with its PhongMaterial component, while at a higher level most of its model loading plugins support Blinn/Phong either by default, or as specified by the model data.
Click the image below for a live demo of a CAD model with Blinn/Phong materials.
Use xeokit's Lambertian materials when you require low memory footprint and high rendering efficiency for high-detail models.
While the PBR and Blin/Phong material types specify a collection of attributes for each material, a Lambertian material has only an RGBA color. These use less memory, and a very simple shader within xeogl's core 3D engine.
At the lowest level within the SDK, xeokit's 3D engine supports Lambertian materials with its LambertMaterial component, while at the higher level most of its model loading plugins are able to override the materials specified by model data with Lambert materials.
Click the image below for a live demo of a BIM model with Lambertian materials.
When models have many objects, and we only care about what they represent in terms of structure, we can optionally replace their materials with LambertMaterials as we load them, in order to save memory and render them more efficiently.
Here's a portion of the example from Importing Models, this time with materials replaced by LambertMaterials:
import {Viewer} from "../src/viewer/Viewer.js";
import {Node} from "../src/scene/nodes/Node.js";
import {OBJLoaderPlugin} from "../src/viewer/plugins/OBJLoaderPlugin/OBJLoaderPlugin.js";
import {GLTFLoaderPlugin} from "../src/viewer/plugins/GLTFLoaderPlugin/GLTFLoaderPlugin.js";
const viewer = new Viewer({
canvasId: "myCanvas"
});
const objLoader = new OBJLoaderPlugin(viewer);
const gltfLoader = new GLTFLoaderPlugin(viewer);
new Node(viewer.scene, {
scale: [.5, .5, .5], // Scale the whole scene down a bit
children: [
// Car
objLoader.load({
id: "myCarModel",
src: "./models/obj/sportsCar/sportsCar.obj",
position: [-5, -1, 0],
lambertMaterial: true // <<--- Replace materials with LambertMaterial
}),
// House
gltfLoader.load({
id: "myHouseModel",
src: "./models/gltf/schependomlaan/scene.gltf",
rotation: [0, 50, 0],
edges: true,
lambertMaterial: true // <<--- Replace materials with LambertMaterial
})
]
});TODO