feat(sample): add samples about material

samples/base/Sample_Transform.ts

@@ -1,6 +1,7 @@
 import { GUIHelp } from '@orillusion/debug/GUIHelp';
 import { Stats } from '@orillusion/stats'
 import { Engine3D, Scene3D, AtmosphericComponent, CameraUtil, webGPUContext, HoverCameraController, Object3D, MeshRenderer, BoxGeometry, LitMaterial, DirectLight, KelvinUtil, View3D } from '@orillusion/core';
+import { GUIUtil } from '@samples/utils/GUIUtil';
 
 // simple base demo
 class Sample_Transform {
@@ -54,18 +55,7 @@ class Sample_Transform {
         let transform = cubeObj.transform;
         // debug GUI
         GUIHelp.init();
-        GUIHelp.addFolder('Transform');
-        GUIHelp.add(transform, 'x', -10.0, 10.0, 0.01);
-        GUIHelp.add(transform, 'y', -10.0, 10.0, 0.01);
-        GUIHelp.add(transform, 'z', -10.0, 10.0, 0.01);
-        GUIHelp.add(transform, 'rotationX', 0.0, 360.0, 0.01);
-        GUIHelp.add(transform, 'rotationY', 0.0, 360.0, 0.01);
-        GUIHelp.add(transform, 'rotationZ', 0.0, 360.0, 0.01);
-        GUIHelp.add(transform, 'scaleX', 0.0, 2.0, 0.01);
-        GUIHelp.add(transform, 'scaleY', 0.0, 2.0, 0.01);
-        GUIHelp.add(transform, 'scaleZ', 0.0, 2.0, 0.01);
-        GUIHelp.open();
-        GUIHelp.endFolder();
+        GUIUtil.renderTransform(transform);
     }
 }
 

samples/index.ts

@@ -5,9 +5,10 @@
     // create menu
     let title = '', list = ''
     for (const path in modules) {
+        if (!path.includes('Sample_')) continue
         const arr = path.split('/')
         const _title = arr[1]
-        const _demo = arr[2].replace(/Sample_|Sample|\.ts/g, '')
+        const _demo = arr[2].replace(/Sample_|\.ts/g, '')
         if (_title != title) {
             list += `<p>${_title}</p>`
             title = _title

samples/loader/Sample_FlightHelmet.ts

@@ -0,0 +1,104 @@
+import { GUIHelp } from "@orillusion/debug/GUIHelp";
+import { Object3D, Camera3D, Scene3D, HoverCameraController, Engine3D, CameraUtil, webGPUContext, View3D, SSRPost, HDRBloomPost, AtmosphericComponent, DirectLight, KelvinUtil, Time } from "@orillusion/core";
+import { GUIUtil as GUIUtil } from "@samples/utils/GUIUtil";
+
+class Sample_FlightHelmet {
+    lightObj3D: Object3D;
+    scene: Scene3D;
+    autoRotate: boolean = false;
+    flightHelmetObj: Object3D;
+
+    async run() {
+        await Engine3D.init({
+            canvasConfig: {
+                alpha: true,
+                zIndex: 0,
+                backgroundImage: '/logo/bg.webp'
+            },
+            renderLoop: () => this.loop(),
+        });
+
+        Engine3D.setting.material.materialChannelDebug = true;
+        Engine3D.setting.shadow.debug = true;
+        Engine3D.setting.shadow.autoUpdate = true;
+        Engine3D.setting.shadow.shadowBound = 10;
+        Engine3D.setting.shadow.shadowBias = 0.00001;
+
+        Engine3D.setting.render.postProcessing.ssao.radius = 0.018;
+        Engine3D.setting.render.postProcessing.ssao.aoPower = 1;
+        Engine3D.setting.render.postProcessing.gtao.debug = false;
+
+        Engine3D.setting.render.postProcessing.bloom = {
+            enable: true,
+            blurX: 4,
+            blurY: 4,
+            intensity: 0.5,
+            brightness: 1.25,
+            debug: false
+        };
+
+
+        this.scene = new Scene3D();
+        this.scene.hideSky();
+        let camera = CameraUtil.createCamera3DObject(this.scene);
+        camera.perspective(60, webGPUContext.aspect, 1, 5000.0);
+
+        camera.object3D.addComponent(HoverCameraController).setCamera(-45, -30, 15);
+
+        let view = new View3D();
+        view.scene = this.scene;
+        view.camera = camera;
+
+        Engine3D.startRenderView(view);
+
+        await this.initScene();
+    }
+
+    async initScene() {
+        /******** auto rotate *******/
+        {
+            GUIHelp.init();
+            GUIHelp.add(this, 'autoRotate');
+            GUIHelp.open();
+        }
+
+        /******** sky *******/
+        {
+            let atmospheric = this.scene.addComponent(AtmosphericComponent);
+            atmospheric.sunY = 0.73;
+            atmospheric.sunRadiance = 47;
+        }
+        /******** light *******/
+        {
+            this.lightObj3D = new Object3D();
+            this.lightObj3D.rotationX = 53.2;
+            this.lightObj3D.rotationY = 220;
+            this.lightObj3D.rotationZ = 5.58;
+            let directLight = this.lightObj3D.addComponent(DirectLight);
+            directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355);
+            directLight.castShadow = true;
+            directLight.intensity = 44;
+            this.scene.addChild(this.lightObj3D);
+            GUIUtil.renderDirLight(directLight);
+        }
+
+        /******** load model *******/
+        {
+            let model = (await Engine3D.res.loadGltf('PBR/FlightHelmet/FlightHelmet.gltf', {})) as Object3D;
+            model.transform.scaleX = 10;
+            model.transform.scaleY = 10;
+            model.transform.scaleZ = 10;
+            model.transform.y = -2;
+            this.scene.addChild(model);
+            this.flightHelmetObj = model;
+        }
+    }
+
+    loop() {
+        if (this.flightHelmetObj && this.autoRotate) {
+            this.flightHelmetObj.rotationY += Time.delta * 0.05;
+        }
+    }
+}
+
+new Sample_FlightHelmet().run();

samples/loader/Sample_LoadGLTF.ts

@@ -0,0 +1,100 @@
+import { GUIHelp } from "@orillusion/debug/GUIHelp";
+import { Object3D, Scene3D, Engine3D, CameraUtil, webGPUContext, HoverCameraController, View3D, AtmosphericComponent, DirectLight, KelvinUtil } from "@orillusion/core";
+import { GUIUtil } from "@samples/utils/GUIUtil";
+
+//Samples to show models, they are using PBR material
+class Sample_LoadGLTF {
+    lightObj3D: Object3D;
+    scene: Scene3D;
+    async run() {
+        //config settings
+        Engine3D.setting.material.materialChannelDebug = true;
+        Engine3D.setting.shadow.shadowBound = 5;
+        Engine3D.setting.shadow.shadowBias = 0.002;
+        Engine3D.setting.render.postProcessing.bloom = {
+            enable: true,
+            blurX: 4,
+            blurY: 4,
+            intensity: 5,
+            brightness: 0.86,
+            debug: true
+        };
+
+        //init engine
+        await Engine3D.init();
+
+        this.scene = new Scene3D();
+
+        let camera = CameraUtil.createCamera3DObject(this.scene);
+        camera.perspective(60, webGPUContext.aspect, 0.01, 5000.0);
+        camera.object3D.addComponent(HoverCameraController).setCamera(25, -5, 100);
+
+        let view = new View3D();
+        view.scene = this.scene;
+        view.camera = camera;
+
+        Engine3D.startRenderView(view);
+
+        await this.initScene();
+    }
+
+    async initScene() {
+        /******** sky *******/
+        {
+            let atmospheric = this.scene.addComponent(AtmosphericComponent);
+            atmospheric.sunY = 0.62;
+            atmospheric.sunRadiance = 47;
+            this.scene.exposure = 1;
+            this.scene.roughness = 0.56;
+        }
+
+        /******** light *******/
+        {
+            this.lightObj3D = new Object3D();
+            this.lightObj3D.rotationX = 57;
+            this.lightObj3D.rotationY = 148;
+            this.lightObj3D.rotationZ = 10;
+            let directLight = this.lightObj3D.addComponent(DirectLight);
+            directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355);
+            directLight.castShadow = true;
+            directLight.intensity = 18;
+            GUIHelp.init();
+            GUIUtil.renderDirLight(directLight);
+            this.scene.addChild(this.lightObj3D);
+        }
+
+        {
+            /******** player1 *******/
+            let player1 = (await Engine3D.res.loadGltf('gltfs/anim/Minion_Lane_Super_Dawn/Minion_Lane_Super_Dawn.glb', {})) as Object3D;
+            player1.transform.x = -10;
+            player1.transform.z = 20;
+            player1.transform.scaleX = 10;
+            player1.transform.scaleY = 10;
+            player1.transform.scaleZ = 10;
+            player1.transform.y = 5;
+            this.scene.addChild(player1);
+
+            /******** player2 *******/
+            let player2 = (await Engine3D.res.loadGltf('gltfs/anim/Minion_Lane_Super_Dawn/Prime_Helix.glb', {})) as Object3D;
+            player2.transform.x = 10;
+            player2.transform.scaleX = 10;
+            player2.transform.scaleY = 10;
+            player2.transform.scaleZ = 10;
+            player2.transform.y = 5;
+            this.scene.addChild(player2);
+
+            /******** player3 *******/
+            let player3 = (await Engine3D.res.loadGltf('gltfs/anim/Minion_Lane_Super_Dawn/Minion_Lane_Ranged_Dusk.glb', {})) as Object3D;
+            player3.transform.x = 10;
+            player3.transform.z = 20;
+            player3.transform.scaleX = 10;
+            player3.transform.scaleY = 10;
+            player3.transform.scaleZ = 10;
+            player3.transform.y = 5;
+            this.scene.addChild(player3);
+        }
+    }
+
+}
+
+new Sample_LoadGLTF().run();

samples/material/Sample_CustomMaterial.ts

@@ -0,0 +1,106 @@
+import { Object3D, Scene3D, Engine3D, AtmosphericComponent, CameraUtil, webGPUContext, HoverCameraController, View3D, DirectLight, KelvinUtil, UnLitMaterial, Color, MeshRenderer, Object3DUtil } from "@orillusion/core";
+import { GUIUtil } from "@samples/utils/GUIUtil";
+
+//Display UnLit shaders unaffected by light
+class Sample_CustomMaterial {
+    lightObj3D: Object3D;
+    scene: Scene3D;
+
+    async run() {
+        Engine3D.setting.material.materialChannelDebug = true;
+
+        Engine3D.setting.shadow.shadowBound = 200;
+        Engine3D.setting.shadow.shadowBias = 0.002;
+        Engine3D.setting.shadow.debug = true;
+        Engine3D.setting.shadow.autoUpdate = true;
+        Engine3D.setting.shadow.updateFrameRate = 1;
+
+        await Engine3D.init();
+
+        this.scene = new Scene3D();
+        this.scene.addComponent(AtmosphericComponent);
+
+        let mainCamera = CameraUtil.createCamera3DObject(this.scene);
+
+        mainCamera.perspective(60, webGPUContext.aspect, 1, 2000.0);
+        mainCamera.object3D.addComponent(HoverCameraController).setCamera(45, -45, 20);
+
+        await this.initScene(this.scene);
+
+        let view = new View3D();
+        view.scene = this.scene;
+        view.camera = mainCamera;
+
+        Engine3D.startRenderView(view);
+    }
+
+    async initScene(scene: Scene3D) {
+        //create light
+        {
+            this.lightObj3D = new Object3D();
+            this.lightObj3D.x = 0;
+            this.lightObj3D.y = 30;
+            this.lightObj3D.z = -40;
+            this.lightObj3D.rotationX = 77;
+            this.lightObj3D.rotationY = 77;
+            this.lightObj3D.rotationZ = 41;
+            let lc = this.lightObj3D.addComponent(DirectLight);
+            lc.lightColor = KelvinUtil.color_temperature_to_rgb(5355);
+            lc.castShadow = true;
+            lc.intensity = 10;
+            GUIUtil.renderDirLight(lc);
+            scene.addChild(this.lightObj3D);
+        }
+        {
+            //create floor
+            let floor = Object3DUtil.GetCube();
+            floor.scaleX = 1000;
+            floor.scaleY = 1;
+            floor.scaleZ = 1000;
+            this.scene.addChild(floor);
+
+            //center
+            let centerCube = Object3DUtil.GetCube();
+            centerCube.scaleX = 1;
+            centerCube.scaleY = 1;
+            centerCube.scaleZ = 1;
+            centerCube.x = 2.5;
+            centerCube.y = 2.5;
+            this.scene.addChild(centerCube);
+
+            //left
+            let leftCube = Object3DUtil.GetCube();
+            leftCube.scaleX = 4;
+            leftCube.scaleY = 4;
+            leftCube.scaleZ = 1;
+            leftCube.x = 4;
+            leftCube.y = 2;
+            this.scene.addChild(leftCube);
+
+            //right
+            let rightCube = Object3DUtil.GetCube();
+            rightCube.scaleX = 4;
+            rightCube.scaleY = 4;
+            rightCube.scaleZ = 1;
+            rightCube.x = -4;
+            rightCube.y = 2;
+            this.scene.addChild(rightCube);
+
+            //ulit material
+            let unlitObj = new Object3D();
+            let unlitMat = new UnLitMaterial();
+            unlitMat.baseColor = Color.random();
+            let mr = unlitObj.addComponent(MeshRenderer);
+            mr.geometry = Object3DUtil.CubeMesh;
+            mr.material = unlitMat;
+            unlitObj.scaleX = 2;
+            unlitObj.scaleY = 2;
+            unlitObj.scaleZ = 2;
+            unlitObj.y = 2;
+            this.scene.addChild(unlitObj);
+        }
+        return true;
+    }
+}
+
+new Sample_CustomMaterial().run();