Skip to content
本页内容

材质

材质总览

引擎通过 MeshRenderer 组件给物体添加相应的 材质 对象,用来模拟其颜色、光照、纹理等属性。目前引擎内置了2种经典材质模型:

名称描述
UnLitMaterial不计算光照,仅渲染原始颜色与纹理信息
LitMaterialPBR 即基于物理渲染,旨在模拟现实世界光照效果

我们推荐使用的 glTF 格式文件包含了物体材质信息。用户可以通过常用建模软件设计并修改模型文件。引擎解析模型文件后,自动赋予物体相应材质。

基础用法

ts
import {Object3D. MeshRenderer, LitMaterial, SphereGeometry, Color} from '@orillusion/core'

let object = new Object3D();
// 添加 MeshRenderer 组件
let mesh = object.addComponent(MeshRenderer);

// 设置组件 material
mesh.material = new UnLitMaterial();
mesh.material.baseColor = new Color(1, 1, 1, 1);

// 切换 Material
mesh.material = new LitMaterial();

Unlit 材质

引擎提供了 UnLitMaterial 类以进行 Unlit 材质的渲染。

属性描述
baseColor基础颜色
baseMap基础贴图
envMap环境贴图
shadowMap阴影贴图


Orillusion powered by WebGPU on Chrome/Edge 113+
Please upgrade to latest Chrome/Edge

<
ts
import { Camera3D, DirectLight, Engine3D, ForwardRenderJob, HoverCameraController, KelvinUtil, MeshRenderer, Object3D, Scene3D, SphereGeometry, UnLitMaterial, Color } from '@orillusion/core';

export 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, window.innerWidth / window.innerHeight, 1, 5000.0);
        mainCamera.object3D.addComponent(HoverCameraController);

        await this.initScene();

        let renderJob = new ForwardRenderJob(this.scene);
        Engine3D.startRender(renderJob);
    }

    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 材质

我们提倡使用 PBR 材质进行渲染,PBR 全称是Physicallly-Based Rendering,是指基于物理渲染的材质,它更符合真实的物理光照模型。

属性描述
baseColor材质基础颜色
emissiveColor材质发光颜色
emissiveIntensity材质发光强度,需要开启 HDRBloomPost 才能显示发光效果
roughness材质粗糙程度
metallic材料金属度
normalScale法线贴图对材质的影响程度
clearCoat透明涂层强度
envMap环境贴图
envIntensity环境光强度
materialF0材质反射率
aoAmbient Occlussion, 处理环境光对物体遮挡的效果
aoMap环境光遮挡贴图
baseMap基础贴图
normalMap法线贴图
maskMap遮罩贴图
emissiveMap材质发光贴图
brdfLUTBRDF查找表


Orillusion powered by WebGPU on Chrome/Edge 113+
Please upgrade to latest Chrome/Edge

<
ts
import { Camera3D, DirectLight, Engine3D, ForwardRenderJob, GUIHelp, HoverCameraController, MeshRenderer, Object3D, Scene3D, SphereGeometry, LitMaterial } from '@orillusion/core';

export 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, window.innerWidth / window.innerHeight, 1, 5000.0);
        mainCamera.object3D.addComponent(HoverCameraController);

        await this.initScene();
        
        let renderJob = new ForwardRenderJob(this.scene);
        Engine3D.startRender(renderJob);
    }

    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();

材质设置

颜色

ts
let mat = new UnLitMaterial();
mat.baseColor = new Color(1, 0, 0, 1);


Orillusion powered by WebGPU on Chrome/Edge 113+
Please upgrade to latest Chrome/Edge

透明度 & 混合模式

ts
let mat = new UnLitMaterial();
mat.transparent = true;
mat.blendMode = BlendMode.ALPHA;
mat.baseColor = new Color(1, 0, 0, 0.5);


Orillusion powered by WebGPU on Chrome/Edge 113+
Please upgrade to latest Chrome/Edge

混合模式详情请参考 BlendMode

切换剔除模式

为了节省 GPU 性能,Orillusion 默认使用 back 剔除模式,即只渲染物体正面材质,我们可以设置材质 cullMode 属性来切换显示模式

ts
let mat = new LitMaterial();
mat.cullMode = GPUCullMode.none; // 不剔除,双面显示
mat.cullMode = GPUCullMode.front; // 剔除正面,显示后面
mat.cullMode = GPUCullMode.back; // 剔除后面,显示正面


Orillusion powered by WebGPU on Chrome/Edge 113+
Please upgrade to latest Chrome/Edge

UV 变换

模型顶点会存有多组纹理映射坐标,定义了该顶点在纹理中对应的2D坐标,它通常由一个二维变量 (u,v) 表示,所以也被称为 UV坐标
我们可以通过对模型的 uv 坐标进行矩阵变换来自定义纹理的映射关系。比如,设定材质的 uvTransform_1 属性来对原始 uv 进行 位移(offset)缩放(scaling) 的坐标变换:

ts
let mat = new LitMaterial();
// 定义 Vector4, 分别调节 offsetU, offsetV, scalingU, scalingV
mat.uvTransform_1 = new Vector4(0, 0, 1, 1);


Orillusion powered by WebGPU on Chrome/Edge 113+
Please upgrade to latest Chrome/Edge