release v0.6.5

CHANGELOG.md

@@ -1,5 +1,12 @@
-## [0.6.4](https://github.com/Orillusion/orillusion/compare/v0.6.3...v0.6.4) (2023-06-06)
+## [0.6.5](https://github.com/Orillusion/orillusion/compare/v0.6.4...v0.6.5) (2023-06-12)
+
+### Features
 
+* **GI:** Add GI ([#215](https://github.com/Orillusion/orillusion/issues/215)) ([775ebbc](https://github.com/Orillusion/orillusion/commit/775ebbcee2ff801af931d2e626c8f4f5a4c5c09f))
+* **GUI:** Add color transition mode to the UIButton ([#212](https://github.com/Orillusion/orillusion/issues/212)) ([56e5f03](https://github.com/Orillusion/orillusion/commit/56e5f034ea180c41cb6e97cb143e1822c497bdd1))
+
+
+## [0.6.4](https://github.com/Orillusion/orillusion/compare/v0.6.3...v0.6.4) (2023-06-06)
 
 ### Bug Fixes
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orillusion/core",
-    "version": "0.6.4",
+    "version": "0.6.5",
     "author": "Orillusion",
     "description": "Orillusion WebGPU Engine",
     "main": "./dist/orillusion.umd.js",

packages/particle/README.md

@@ -0,0 +1,19 @@
+A particle system for [Orillusion](https://www.orillusion.com)
+
+## Usage
+```bash
+npm install @orillusion/core --save
+npm install @orillusion/particle --save
+```
+```ts
+import { Scene3D } from "@orillusion/core"
+import { ParticleSysteam } from "@orillusion/particle"
+```
+
+Or access Global build from CDN
+```html
+<script src="https://unpkg.com/@orillusion/core/dist/orillusion.umd.js"></script>
+<script src="https://unpkg.com/@orillusion/particle/dist/particle.umd.js"></script>
+```
+
+More doc from [Orillusion](https://www.orillusion.com/guide/particle/Readme.html)

samples/gi/Sample_GI.ts

@@ -0,0 +1,120 @@
+import { createExampleScene, createSceneParam } from "@samples/utils/ExampleScene";
+import { Object3D, Scene3D, Engine3D, GlobalIlluminationComponent, Object3DUtil, GTAOPost, HDRBloomPost, PostProcessingComponent, TAAPost } from "@orillusion/core";
+import { GUIUtil } from "@samples/utils/GUIUtil";
+import { GUIHelp } from "@orillusion/debug/GUIHelp";
+
+class Sample_GI {
+    scene: Scene3D;
+    async run() {
+
+        Engine3D.setting.material.materialChannelDebug = true;
+        Engine3D.setting.material.materialDebug = false;
+
+        Engine3D.setting.gi.enable = true;
+        Engine3D.setting.gi.debug = true;
+
+        Engine3D.setting.gi.probeYCount = 3;
+        Engine3D.setting.gi.probeXCount = 6;
+        Engine3D.setting.gi.probeZCount = 6;
+        Engine3D.setting.gi.probeSpace = 60;
+        Engine3D.setting.gi.offsetX = 0;
+        Engine3D.setting.gi.offsetY = 60;
+        Engine3D.setting.gi.offsetZ = 0;
+        Engine3D.setting.gi.indirectIntensity = 1;
+        Engine3D.setting.gi.probeSize = 64;
+        Engine3D.setting.gi.octRTSideSize = 64;
+        Engine3D.setting.gi.octRTMaxSize = 2048;
+        Engine3D.setting.gi.ddgiGamma = 1;
+        Engine3D.setting.gi.autoRenderProbe = true;
+
+        Engine3D.setting.shadow.shadowBound = 200;
+        Engine3D.setting.shadow.shadowBias = 0.001;
+        Engine3D.setting.shadow.debug = true;
+
+        Engine3D.setting.shadow.autoUpdate = true;
+        Engine3D.setting.shadow.updateFrameRate = 1;
+
+        Engine3D.setting.render.postProcessing.bloom = {
+            enable: true,
+            debug: false,
+            blurX: 4,
+            blurY: 4,
+            luminosityThreshold: 0.9,
+            radius: 4,
+            strength: 1.2
+        };
+
+        await Engine3D.init({});
+        GUIHelp.init();
+        let param = createSceneParam();
+        param.camera.distance = 200;
+        let exampleScene = createExampleScene(param);
+        exampleScene.atmosphericSky.exposure = 0.5;
+        this.scene = exampleScene.scene;
+        Engine3D.startRenderViews([exampleScene.view]);
+        let job = Engine3D.getRenderJob(exampleScene.view);
+        await this.initScene();
+        this.addGIProbes();
+        GUIUtil.renderAtomosphericSky(exampleScene.atmosphericSky);
+        GUIUtil.renderDirLight(exampleScene.light);
+
+        let postProcessing = this.scene.addComponent(PostProcessingComponent);
+        postProcessing.addPost(TAAPost);
+        // postProcessing.addPost(GTAOPost);
+        postProcessing.addPost(HDRBloomPost);
+
+    }
+
+    private addGIProbes() {
+        let probeObj = new Object3D();
+        let component = probeObj.addComponent(GlobalIlluminationComponent);
+        this.scene.addChild(probeObj);
+        setTimeout(() => {
+            GUIUtil.renderGIComponent(component);
+        }, 2000);
+    }
+
+    async initScene() {
+        {
+            let floorHeight = 20;
+            let floor = Object3DUtil.GetSingleCube(1000, floorHeight, 1000, 0.6, 0.6, 0.6);
+            floor.y = -floorHeight;
+            this.scene.addChild(floor);
+        }
+
+
+        {
+            let greenBall = Object3DUtil.GetSingleSphere(30, 0.1, 0.8, 0.2);
+            this.scene.addChild(greenBall);
+            greenBall.x = -70;
+            greenBall.y = 40;
+        }
+
+        {
+            let chair = await Engine3D.res.loadGltf('PBR/SheenChair/SheenChair.gltf') as Object3D;
+            chair.scaleX = chair.scaleY = chair.scaleZ = 100;
+            chair.rotationZ = chair.rotationX = 130;
+            chair.z = -120;
+            this.scene.addChild(chair);
+        }
+
+        {
+            let Duck = await Engine3D.res.loadGltf('PBR/Duck/Duck.gltf') as Object3D;
+            Duck.scaleX = Duck.scaleY = Duck.scaleZ = 0.3;
+            Duck.transform.y = 0;
+            Duck.transform.x = 0;
+            Duck.transform.z = 80;
+            this.scene.addChild(Duck);
+        }
+
+
+        {
+            let car = await Engine3D.res.loadGltf('gltfs/pbrCar/pbrCar.gltf');
+            car.scaleX = car.scaleY = car.scaleZ = 1.5;
+            this.scene.addChild(car);
+            car.x = 20;
+        }
+    }
+}
+
+new Sample_GI().run();

samples/gi/Sample_GICornellBox.ts

@@ -0,0 +1,84 @@
+import { createExampleScene, createSceneParam } from "@samples/utils/ExampleScene";
+import { Object3D, Scene3D, Engine3D, GlobalIlluminationComponent, Vector3, GTAOPost, PostProcessingComponent, HDRBloomPost } from "@orillusion/core";
+import { GUIHelp } from "@orillusion/debug/GUIHelp";
+import { GUIUtil } from "@samples/utils/GUIUtil";
+
+class Sample_GICornellBox {
+    scene: Scene3D;
+    async run() {
+
+        Engine3D.setting.material.materialChannelDebug = true;
+        Engine3D.setting.material.materialDebug = false;
+
+        Engine3D.setting.gi.enable = true;
+        Engine3D.setting.gi.debug = true;
+        Engine3D.setting.gi.probeYCount = 6;
+        Engine3D.setting.gi.probeXCount = 6;
+        Engine3D.setting.gi.probeZCount = 6;
+        Engine3D.setting.gi.offsetX = 0;
+        Engine3D.setting.gi.offsetY = 10;
+        Engine3D.setting.gi.offsetZ = 0;
+        Engine3D.setting.gi.indirectIntensity = 1;
+        Engine3D.setting.gi.lerpHysteresis = 0.004;//default value is 0.01
+        Engine3D.setting.gi.maxDistance = 16;
+        Engine3D.setting.gi.probeSpace = 6;
+        Engine3D.setting.gi.normalBias = 0;
+        Engine3D.setting.gi.probeSize = 32;
+        Engine3D.setting.gi.octRTSideSize = 16;
+        Engine3D.setting.gi.octRTMaxSize = 2048;
+        Engine3D.setting.gi.ddgiGamma = 2.2;
+        Engine3D.setting.gi.depthSharpness = 1;
+        Engine3D.setting.gi.autoRenderProbe = true;
+
+        Engine3D.setting.shadow.shadowBound = 50;
+        Engine3D.setting.shadow.shadowBias = 0.001;
+        Engine3D.setting.shadow.debug = true;
+
+        Engine3D.setting.shadow.autoUpdate = true;
+        Engine3D.setting.shadow.updateFrameRate = 1;
+
+        Engine3D.setting.render.debug = true;
+        Engine3D.setting.render.postProcessing.bloom = {
+            enable: true,
+            debug: false,
+            blurX: 4,
+            blurY: 4,
+            luminosityThreshold: 0.9,
+            radius: 4,
+            strength: 1.2
+        };
+
+        await Engine3D.init({});
+        let param = createSceneParam();
+        param.camera.distance = 40;
+
+        let exampleScene = createExampleScene(param);
+        this.scene = exampleScene.scene;
+        this.addGIProbes();
+        Engine3D.startRenderViews([exampleScene.view]);
+
+        let postProcessing = this.scene.addComponent(PostProcessingComponent);
+        postProcessing.addPost(GTAOPost);
+        postProcessing.addPost(HDRBloomPost);
+
+        await this.initScene();
+    }
+
+    private addGIProbes() {
+        let probeObj = new Object3D();
+        GUIHelp.init();
+        let component = probeObj.addComponent(GlobalIlluminationComponent);
+        this.scene.addChild(probeObj);
+        setTimeout(() => {
+            GUIUtil.renderGIComponent(component);
+        }, 2000);
+    }
+
+    async initScene() {
+        let box = await Engine3D.res.loadGltf('gltfs/cornellBox/cornellBox.gltf') as Object3D;
+        box.localScale = new Vector3(10, 10, 10);
+        this.scene.addChild(box);
+    }
+}
+
+new Sample_GICornellBox().run();

samples/gui/Sample_UIButton.ts

@@ -1,6 +1,6 @@
 import { GUIHelp } from "@orillusion/debug/GUIHelp";
 import { createExampleScene } from "@samples/utils/ExampleScene";
-import { Engine3D, Object3DUtil, Object3D, GUISpace, WorldPanel, ViewPanel, UIButton, UITextField, Color, TextAnchor, PointerEvent3D, UIImage, ImageType, ComponentBase, View3D, UITransform, UIPanel } from "@orillusion/core";
+import { Engine3D, Object3DUtil, Object3D, GUISpace, WorldPanel, ViewPanel, UIButton, UITextField, Color, TextAnchor, PointerEvent3D, UIImage, ImageType, ComponentBase, View3D, UITransform, UIPanel, UIInteractiveStyle, UIButtonTransition } from "@orillusion/core";
 
 export class Sample_UIButton {
     button: UIButton;
@@ -55,6 +55,8 @@ export class Sample_UIButton {
 
             button.uiTransform.resize(200, 60);
             button.uiTransform.y = -100;
+            button.transition = UIButtonTransition.SPRITE;
+
             this.button = button;
 
             let buttonLabel = quad.addComponent(UITextField);
@@ -69,6 +71,28 @@ export class Sample_UIButton {
             quad.addEventListener(PointerEvent3D.PICK_DOWN_GUI, this.onDown, this);
         }
 
+        {
+            let quad = new Object3D();
+            panelRoot.addChild(quad);
+            let button: UIButton = quad.addComponent(UIButton);
+            button.normalSprite = Engine3D.res.getGUISprite('button-up');
+
+            button.uiTransform.resize(200, 60);
+            button.uiTransform.y = 200;
+
+            let buttonLabel = quad.addComponent(UITextField);
+            buttonLabel.text = 'Color Button';
+            buttonLabel.fontSize = 24;
+            buttonLabel.color = new Color(1, 0.8, 0.4);
+            buttonLabel.alignment = TextAnchor.MiddleCenter;
+
+            button.setStyleColor(UIInteractiveStyle.NORMAL, new Color(1, 0.5, 0.5, 1));
+            button.setStyleColor(UIInteractiveStyle.DOWN, new Color(0.5, 0.5, 1, 1));
+            button.setStyleColor(UIInteractiveStyle.OVER, new Color(0.5, 1, 0.5, 1));
+            button.setStyleColor(UIInteractiveStyle.DISABLE, new Color(0.5, 0.5, 0.5, 1));
+            button.transition = UIButtonTransition.COLOR;
+        }
+
         {
             let imageQuad = new Object3D();
             panelRoot.addChild(imageQuad);

samples/gui/panel/GUIPanelPOI.ts

@@ -93,8 +93,8 @@ export class GUIPanelPOI {
         {
             let iconNode = uiChild.addChild(new Object3D()) as Object3D;
             let icon = this.addImage(iconNode, '', 100, 100, 1, 1, 1);
-            icon.uiTransform.x = 30;
-            icon.uiTransform.y = -30;
+            icon.uiTransform.x = -75;
+            icon.uiTransform.y = 25;
             this._icon = icon;
             this.updateFrame();
         }

samples/particle/Sample_CandleFlame.ts

@@ -9,11 +9,10 @@ import {
 export class Sample_CandleFlame {
     async run() {
         Engine3D.setting.shadow.enable = true;
-        Engine3D.setting.shadow.pointShadowBias = 0.6;
+        Engine3D.setting.shadow.pointShadowBias = 0.001;
         Engine3D.setting.shadow.autoUpdate = true;
         Engine3D.setting.shadow.updateFrameRate = 1;
-        Engine3D.setting.material.materialChannelDebug = true;
-        await Engine3D.init({});
+        await Engine3D.init();
 
         let scene = new Scene3D();
         scene.addComponent(AtmosphericComponent);

samples/utils/ExampleScene.ts

@@ -67,9 +67,9 @@ export function createSceneParam(): ExampleSceneParam {
                 z: -40,
             },
             euler: {
-                x: 0,
-                y: 200,
-                z: 135,
+                x: 20,
+                y: 160,
+                z: 0,
             },
 
             kelvin: 5355,