Merge branch 'dev' of https://github.com/Orillusion/orillusion into dev

.github/workflows/ci.yml

@@ -27,7 +27,7 @@ jobs:
       run: pnpm install
 
     - name: Test Build
-      run: pnpm run build
+      run: pnpm run build:test
 
     - name: Test in Electron
       run: pnpm run test:ci

package.json

@@ -20,6 +20,7 @@
     "scripts": {
         "dev": "vite",
         "build": "tsc --p tsconfig.build.json && vite build && npm run build:types && npm run minify:es",
+        "build:test": "tsc --p tsconfig.build.json && vite build",
         "build:types": "tsc --emitDeclarationOnly -p tsconfig.build.json",
         "minify:es": "uglifyjs dist/orillusion.es.js -o dist/orillusion.es.js -c -m",
         "test": "electron test/ci/main.js",

samples/base/Sample_InitEngine.ts

@@ -0,0 +1,27 @@
+import { Engine3D, Scene3D, CameraUtil, webGPUContext, View3D, AtmosphericComponent } from "@orillusion/core";
+
+// init engine
+class Sample_InitEngine {
+    async run() {
+        // init engine
+        await Engine3D.init();
+        // create new Scene
+        let scene = new Scene3D();
+        // add atmospheric sky
+        scene.addComponent(AtmosphericComponent);
+
+        // init camera3D
+        let mainCamera = CameraUtil.createCamera3D(null, scene);
+        mainCamera.perspective(60, webGPUContext.aspect, 1, 2000.0);
+
+        // create a view with target scene and camera
+        let view = new View3D();
+        view.scene = scene;
+        view.camera = mainCamera;
+
+        // start render
+        Engine3D.startRenderView(view);
+    }
+}
+
+new Sample_InitEngine().run();

samples/base/Sample_Transform.ts

@@ -0,0 +1,72 @@
+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';
+
+// simple base demo
+class Sample_Transform {
+    async run() {
+        // init engine
+        await Engine3D.init();
+        // create new Scene
+        let scene = new Scene3D();
+
+        // add performance stats
+        scene.addComponent(Stats);
+
+        // add an Atmospheric sky enviroment
+        let sky = scene.addComponent(AtmosphericComponent);
+        sky.sunY = 0.6
+
+        // init camera3D
+        let mainCamera = CameraUtil.createCamera3D(null, scene);
+        mainCamera.perspective(60, webGPUContext.aspect, 1, 2000.0);
+
+        // add a basic camera controller
+        let hoverCameraController = mainCamera.object3D.addComponent(HoverCameraController);
+        hoverCameraController.setCamera(15, -15, 10);
+
+        // create a basic cube
+        let cubeObj = new Object3D();
+        let mr = cubeObj.addComponent(MeshRenderer);
+        mr.geometry = new BoxGeometry();
+        let mat = new LitMaterial();
+        mr.material = mat;
+        scene.addChild(cubeObj);
+
+        // add a basic direct light
+        let lightObj = new Object3D();
+        lightObj.rotationX = 45;
+        lightObj.rotationY = 60;
+        lightObj.rotationZ = 150;
+        let dirLight = lightObj.addComponent(DirectLight);
+        dirLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355);
+        dirLight.intensity = 10;
+        scene.addChild(lightObj);
+
+        // create a view with target scene and camera
+        let view = new View3D();
+        view.scene = scene;
+        view.camera = mainCamera;
+
+        // start render
+        Engine3D.startRenderView(view);
+
+        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();
+    }
+}
+
+new Sample_Transform().run()

samples/base/Sample_UseComponent.ts

@@ -0,0 +1,70 @@
+import { Engine3D, Scene3D, CameraUtil, webGPUContext, View3D, AtmosphericComponent, ComponentBase, Time, AxisObject, Object3DUtil, KelvinUtil, DirectLight, Object3D, HoverCameraController } from "@orillusion/core";
+import { GUIHelp } from "@orillusion/debug/GUIHelp";
+
+// sample use component
+class Sample_UseComponent {
+    async run() {
+        // init engine
+        await Engine3D.init();
+        // create new Scene
+        let scene = new Scene3D();
+        // add atmospheric sky
+        scene.addComponent(AtmosphericComponent);
+
+        // init camera3D
+        let mainCamera = CameraUtil.createCamera3D(null, scene);
+        mainCamera.perspective(60, webGPUContext.aspect, 1, 2000.0);
+        let hoverCameraController = mainCamera.object3D.addComponent(HoverCameraController);
+        hoverCameraController.setCamera(15, -30, 10);
+
+        // create a view with target scene and camera
+        let view = new View3D();
+        view.scene = scene;
+        view.camera = mainCamera;
+
+        // start render
+        Engine3D.startRenderView(view);
+
+
+        // create cube
+        let cube = Object3DUtil.GetSingleCube(2, 4, 1, 0.7, 1, 0.5);
+        cube.name = 'AxisObject';
+        scene.addChild(cube);
+
+        // register a component
+        let component = cube.addComponent(RotateComponent);
+
+        // gui
+        GUIHelp.init();
+        GUIHelp.add(component, 'enable');
+        GUIHelp.open();
+        GUIHelp.endFolder();
+    }
+}
+
+
+class RotateComponent extends ComponentBase {
+    public init(param?: any): void {
+        console.log('RotateComponent init, name : ', this.object3D.name);
+
+    }
+    public start(): void {
+        console.log('RotateComponent start, name :', this.object3D.name);
+    }
+
+    public onUpdate(): void {
+        this.transform.rotationY = Math.sin(Time.time * 0.01) * 90;
+    }
+
+    public onEnable(view?: View3D) {
+        console.log('RotateComponent init, name : ', this.object3D.name);
+        this._enable = true;
+    }
+    public onDisable(view?: View3D) {
+        console.log('RotateComponent init, name : ', this.object3D.name);
+        this._enable = false;
+    }
+}
+
+
+new Sample_UseComponent().run();

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