Materials
Overview of Materials
Our engine adds the corresponding material object to the object through the MeshRenderer component to simulate its color, lighting, texture, etc. Currently, the engine has two built-in classic material models:
| Name | Description |
|---|---|
| UnLitMaterial | Does not calculate lighting, only renders original color and texture information |
| LitMaterial | PBR is based on physical rendering, aiming to simulate the lighting effects of the real world |
We recommend that users use the glTF format file to contain the material information of the object. Users can design and modify the model file through common modeling software. After the engine parses the model file, it automatically assigns the corresponding material to the object.
Basic Usages
import {Object3D. MeshRenderer, LitMaterial, SphereGeometry, Color} from '@orillusion/core'
let object = new Object3D();
// Add MeshRenderer component
let mesh = object.addComponent(MeshRenderer);
// Set material of MeshRenderer
mesh.material = new UnLitMaterial();
mesh.material.baseColor = new Color(1, 1, 1, 1);
// Switch Material
mesh.material = new LitMaterial();Unlit Material
The engine provides the UnLitMaterial class for rendering Unlit materials.
| Attribute | Description |
|---|---|
| baseColor | Base color |
| baseMap | Base map |
import { Camera3D, DirectLight, Engine3D, AtmosphericComponent, View3D, HoverCameraController, KelvinUtil, MeshRenderer, Object3D, Scene3D, SphereGeometry, UnLitMaterial, Color } from '@orillusion/core';
class Sample_Materials {
scene: Scene3D;
lightObj: Object3D;
constructor() {}
async run() {
await Engine3D.init();
this.scene = new Scene3D();
let cameraObj = new Object3D();
let mainCamera = cameraObj.addComponent(Camera3D);
this.scene.addChild(cameraObj);
mainCamera.perspective(60, Engine3D.aspect, 1, 5000.0);
mainCamera.object3D.addComponent(HoverCameraController);
await this.initScene();
// add an Atmospheric sky enviroment
this.scene.addComponent(AtmosphericComponent).sunY = 0.6;
// create a view with target scene and camera
let view = new View3D();
view.scene = this.scene;
view.camera = mainCamera;
// start render
Engine3D.startRenderView(view);
}
async initScene() {
{
this.lightObj = new Object3D();
this.lightObj.x = 0;
this.lightObj.y = 0;
this.lightObj.z = 0;
this.lightObj.rotationX = 0;
this.lightObj.rotationY = 0;
this.lightObj.rotationZ = 0;
let lc = this.lightObj.addComponent(DirectLight);
lc.lightColor = KelvinUtil.color_temperature_to_rgb(5355);
lc.intensity = 1.7;
this.scene.addChild(this.lightObj);
}
{
// UnLitMaterial
let sphere = new Object3D();
let mr = sphere.addComponent(MeshRenderer);
mr.geometry = new SphereGeometry(2.5, 30, 30);
let mat = new UnLitMaterial();
mat.baseColor = new Color(1, 1, 1, 1);
mr.material = mat;
this.scene.addChild(sphere);
sphere.localPosition.set(0, 0, 0);
}
}
}
new Sample_Materials().run();PBR Material
We recommend using the LitMaterial for rendering, also known as PBR material. PBR stands for Physically-Based Rendering, which is a material based on physical rendering. That means to be more in line with the physical lighting model of reality.
| Attribute | Description |
|---|---|
| baseColor | Base color |
| emissiveColor | Emissive color |
| emissiveIntensity | Emissive intensity, need to open BloomPost to display the glow effect |
| roughness | Roughness of the material |
| metallic | Metallic of the material |
| normalScale | The effect of the normal map on the material |
| clearCoat | Clear coat intensity |
| envMap | Environment map |
| envIntensity | Environment light intensity |
| materialF0 | Material reflectance |
| ao | Ambient Occlussion, handles the effect of ambient light on the occlusion of objects |
| aoMap | Ambient light occlusion map |
| baseMap | Base map |
| normalMap | Normal map |
| maskMap | Mask map |
| emissiveMap | Emissive map |
| brdfLUT | BRDF lookup table |
import { Camera3D, DirectLight, Engine3D, AtmosphericComponent, View3D, HoverCameraController, MeshRenderer, Object3D, Scene3D, SphereGeometry, LitMaterial } from '@orillusion/core';
class Sample_Materials {
scene: Scene3D;
lightObj: Object3D;
constructor() {}
async run() {
await Engine3D.init();
this.scene = new Scene3D();
let cameraObj = new Object3D();
let mainCamera = cameraObj.addComponent(Camera3D);
this.scene.addChild(cameraObj);
mainCamera.perspective(60, Engine3D.aspect, 1, 5000.0);
mainCamera.object3D.addComponent(HoverCameraController);
await this.initScene();
// add an Atmospheric sky enviroment
this.scene.addComponent(AtmosphericComponent).sunY = 0.6;
// create a view with target scene and camera
let view = new View3D();
view.scene = this.scene;
view.camera = mainCamera;
// start render
Engine3D.startRenderView(view);
}
async initScene() {
{
this.lightObj = new Object3D();
this.lightObj.x = -20;
this.lightObj.y = 20;
this.lightObj.z = -20;
this.lightObj.rotationX = 45;
this.lightObj.rotationY = 45;
this.lightObj.rotationZ = 0;
let lc = this.lightObj.addComponent(DirectLight);
lc.intensity = 0.2;
this.scene.addChild(this.lightObj);
}
{
// PRB
let sphere = new Object3D();
let mr = sphere.addComponent(MeshRenderer);
mr.geometry = new SphereGeometry(2.5, 30, 30);
let mat = new LitMaterial();
mr.material = mat;
this.scene.addChild(sphere);
sphere.localPosition.set(0, 0, 0);
}
}
}
new Sample_Materials().run();Material Settings
Color
let mat = new UnLitMaterial();
mat.baseColor = new Color(1, 0, 0, 1);Transparency & Blend Mode
let mat = new UnLitMaterial();
mat.transparent = true;
mat.blendMode = BlendMode.ALPHA;
mat.baseColor = new Color(1, 0, 0, 0.5);See more about BlendMode
Switching Cull Mode
In order to save GPU performance, Orillusion uses the back culling mode by default, that is, only the front face material of the object is rendered. Set the material cullMode property to switch the display mode.
let mat = new LitMaterial();
mat.cullMode = GPUCullMode.none; // Do not cull, display both sides
mat.cullMode = GPUCullMode.front; // Cull the front, display the back
mat.cullMode = GPUCullMode.back; // Cull the back, display the frontUV Transform
The model vertex will store multiple sets of texture mapping coordinates, which define the 2D coordinates corresponding to the vertex in the texture. It is usually represented by a two-dimensional variable (u,v), so it is also called UV coordinates.
We can customize the texture mapping relationship by performing matrix transformations on the uv coordinates of the model. For example, set the material transformUV1 shader value to perform coordinate transformations of the original uv for offset and scaling:
let mat = new LitMaterial();
// Get current uv transform - Vector4(offsetU, offsetV, scalingU, scalingV)
let uv:Vector4 = mat.getUniformV4(`transformUV1`)
// set uv trnsform
uv.set(1, 1, 2, 2);
// update uv
mat.setUniformVector4(`transformUV1`, uv);TIP
From v0.8, LitMaterial start using xxxMapOffsetSize to maintain the uv transforms:
let mat = new LitMaterial();
let baseUV = mat.getUniformV4('baseMapOffsetSize');
let normalUV = mat.getUniformV4('normalMapOffsetSize');
let emissiveUV = mat.getUniformV4('emissiveMapOffsetSize');
let roughnessUV = mat.getUniformV4('roughnessMapOffsetSize');
let metallicUV = mat.getUniformV4('metallicMapOffsetSize');
let aoUV = mat.getUniformV4('aoMapOffsetSize');