feat(sample): Sample blend mode (Orillusion#98)

Add samples of renderMode or renderState. Update docs of Sample_ChangeTexture
miqbit · May 5, 2023 · 4688f06 · 4688f06
1 parent d91d10f
commit 4688f06
Show file tree

Hide file tree

Showing 2 changed files with 181 additions and 0 deletions.
diff --git a/samples/render/Sample_BlendMode.ts b/samples/render/Sample_BlendMode.ts
@@ -0,0 +1,91 @@
+import { GUIHelp } from "@orillusion/debug/GUIHelp";
+import { Object3D, Scene3D, HoverCameraController, Engine3D, AtmosphericComponent, webGPUContext, View3D, DirectLight, KelvinUtil, MeshRenderer, BoxGeometry, LitMaterial, Color, BlendMode, GPUCullMode, CameraUtil } from "@orillusion/core";
+
+//sample of change BlendMode and CullMode
+class Sample_BlendMode {
+    lightObj: Object3D;
+    scene: Scene3D;
+
+    async run() {
+
+        Engine3D.setting.material.materialChannelDebug = true;
+        await Engine3D.init({});
+
+        this.scene = new Scene3D();
+        this.scene.addComponent(AtmosphericComponent);
+
+        let mainCamera = CameraUtil.createCamera3DObject(this.scene, 'camera');
+        mainCamera.perspective(60, webGPUContext.aspect, 1, 5000.0);
+
+        mainCamera.object3D.addComponent(HoverCameraController).setCamera(-125, 0, 120);
+
+        await this.initScene(this.scene);
+
+        let view = new View3D();
+        view.scene = this.scene;
+        view.camera = mainCamera;
+
+        this.initLight();
+        // 
+        Engine3D.startRenderView(view);
+    }
+
+    private initLight(): void {
+        this.lightObj = new Object3D();
+        this.lightObj.x = 0;
+        this.lightObj.y = 30;
+        this.lightObj.z = -40;
+        this.lightObj.rotationX = 46;
+        this.lightObj.rotationY = 62;
+        this.lightObj.rotationZ = 360;
+        let lc = this.lightObj.addComponent(DirectLight);
+        lc.lightColor = KelvinUtil.color_temperature_to_rgb(5355);
+        lc.castShadow = false;
+        lc.intensity = 200;
+        lc.debug();
+        this.scene.addChild(this.lightObj);
+    }
+
+    async initScene(scene: Scene3D) {
+
+        //create a box into scene
+        let box = new Object3D();
+        scene.addChild(box);
+
+        //register a mesh renderer
+        let meshRenderer = box.addComponent(MeshRenderer);
+        meshRenderer.geometry = new BoxGeometry(20, 20, 20);
+        let material = meshRenderer.material = new LitMaterial();
+        material.baseColor = new Color(0.1, 0.3, 0.6, 0.5);
+        material.blendMode = BlendMode.ADD;
+
+        // blend mode
+        let blendMode = {
+            NONE: BlendMode.NONE,
+            NORMAL: BlendMode.NORMAL,
+            ADD: BlendMode.ADD,
+            ALPHA: BlendMode.ALPHA,
+        }
+        GUIHelp.init();
+        // change blend mode by click dropdown box
+        GUIHelp.add({ blendMode: material.blendMode }, 'blendMode', blendMode).onChange((v) => {
+            material.blendMode = BlendMode[BlendMode[parseInt(v)]];
+        });
+
+        //cull mode
+        let cullMode = {};
+        cullMode[GPUCullMode.none] = GPUCullMode.none;
+        cullMode[GPUCullMode.front] = GPUCullMode.front;
+        cullMode[GPUCullMode.back] = GPUCullMode.back;
+
+        // change cull mode by click dropdown box
+        GUIHelp.add({ cullMode: GPUCullMode.none }, 'cullMode', cullMode).onChange((v) => {
+            material.cullMode = v;
+        });
+
+        GUIHelp.open();
+        GUIHelp.endFolder();
+    }
+}
+
+new Sample_BlendMode().run();
diff --git a/samples/render/Sample_ChangeTexture.ts b/samples/render/Sample_ChangeTexture.ts
@@ -0,0 +1,90 @@
+import { Object3D, Scene3D, Engine3D, AtmosphericComponent, webGPUContext, HoverCameraController, View3D, DirectLight, KelvinUtil, MeshRenderer, BoxGeometry, LitMaterial, Vector3, Color, BlendMode, CameraUtil } from "@orillusion/core";
+
+class Sample_ChangeTexture {
+    lightObj: Object3D;
+    scene: Scene3D;
+
+    async run() {
+
+        Engine3D.setting.material.materialChannelDebug = true;
+        Engine3D.setting.material.materialDebug = true;
+        Engine3D.setting.shadow.autoUpdate = true;
+        Engine3D.setting.shadow.debug = true;
+        Engine3D.setting.shadow.shadowBound = 100
+        Engine3D.setting.shadow.shadowBias = 0.00192;
+        await Engine3D.init({});
+
+        this.scene = new Scene3D();
+        this.scene.addComponent(AtmosphericComponent);
+
+        //camera
+        let mainCamera = CameraUtil.createCamera3DObject(this.scene, 'camera');
+        mainCamera.perspective(60, webGPUContext.aspect, 1, 5000.0);
+        mainCamera.object3D.addComponent(HoverCameraController).setCamera(-125, -10, 10);
+
+        await this.initScene();
+
+        let view = new View3D();
+        view.scene = this.scene;
+        view.camera = mainCamera;
+
+        this.initLight();
+        // 
+        Engine3D.startRenderView(view);
+    }
+
+    private initLight(): void {
+        this.lightObj = new Object3D();
+        this.lightObj.x = 0;
+        this.lightObj.y = 30;
+        this.lightObj.z = -40;
+        this.lightObj.rotationX = 46;
+        this.lightObj.rotationY = 62;
+        this.lightObj.rotationZ = 360;
+        let lc = this.lightObj.addComponent(DirectLight);
+        lc.lightColor = KelvinUtil.color_temperature_to_rgb(5355);
+        lc.castShadow = false;
+        lc.intensity = 20;
+        this.scene.addChild(this.lightObj);
+    }
+
+    async initScene() {
+        //create first box
+        let box1 = new Object3D();
+        this.scene.addChild(box1);
+
+        let render1 = box1.addComponent(MeshRenderer);
+        render1.geometry = new BoxGeometry(2, 2, 2);
+        let material1 = render1.material = new LitMaterial();
+        material1.maskMap = Engine3D.res.maskTexture;
+
+        //create second box
+        let box2 = new Object3D();
+        box2.transform.z = 4;
+        this.scene.addChild(box2);
+
+        let render2 = box2.addComponent(MeshRenderer);
+        render2.geometry = new BoxGeometry(2, 2, 2);
+        let material2 = render2.material = new LitMaterial();
+        material2.maskMap = Engine3D.res.maskTexture;
+
+        //load 2 textures for switching display
+        let texture_0 = await Engine3D.res.loadTexture('textures/diffuse.jpg');
+        let texture_1 = await Engine3D.res.loadTexture('textures/KB3D_NTT_Ads_basecolor.png');
+
+        //auto change texture per 2 second
+        let count = 0;
+        setInterval(() => {
+            if (count % 2 == 0) {
+                material2.baseMap = texture_0;
+            } else {
+                material2.baseMap = texture_1;
+            }
+            count++;
+        }, 2000);
+
+    }
+
+}
+
+new Sample_ChangeTexture().run();