release v0.8.2

CHANGELOG.md

@@ -1,3 +1,20 @@
+## [0.8.2](https://github.com/Orillusion/orillusion/compare/v0.8.1...v0.8.2) (2024-07-21)
+
+
+### Bug Fixes
+
+* **doc:** fix TextureCube order ([#388](https://github.com/Orillusion/orillusion/issues/388)) ([#421](https://github.com/Orillusion/orillusion/issues/421)) ([7e4e15d](https://github.com/Orillusion/orillusion/commit/7e4e15d1500d1e16e5a780123f78d602be9a9708))
+* **MeshRenderer:** replace geometry error ([#415](https://github.com/Orillusion/orillusion/issues/415)) ([c79e287](https://github.com/Orillusion/orillusion/commit/c79e2878c61480583ea4a73188e0e81c395d0dcb))
+* **PCF:** PCF shadow error ([#371](https://github.com/Orillusion/orillusion/issues/371)) ([c47257c](https://github.com/Orillusion/orillusion/commit/c47257c47d65c1e5c3ee4f0eae0b2bf42295561c))
+* **pick:** fix undefined values ([#416](https://github.com/Orillusion/orillusion/issues/416)) ([5548467](https://github.com/Orillusion/orillusion/commit/55484676627198c1b646c3944f4077e0b639adb0))
+* **pick:** fix gui pick events ([#422](https://github.com/Orillusion/orillusion/issues/422)) ([367f469](https://github.com/Orillusion/orillusion/commit/367f46904325e87b3f8a257d5cc3e44f96510132))
+* **pick:** fix right click ([#418](https://github.com/Orillusion/orillusion/issues/418)) ([b248c45](https://github.com/Orillusion/orillusion/commit/b248c455c428edc4b4c7233d39c6449e31322b12))
+
+
+### BREAKING CHANGES
+* **PointerEvent3D:** simplified `event.data` with `{worldPos, screenUv, meshID, worldNormal}`
+
+
 ## [0.8.1](https://github.com/Orillusion/orillusion/compare/v0.7.2...v0.8.1) (2024-07-10)
 
 

README.md

@@ -9,6 +9,30 @@
 ## Need to know
 Beta version,  **NOT**  recommended for any commercial application.
 
+## Contributing (ongoing)
+
+`WebGPU` is the latest technology in the web domain and will play a crucial role in terms of 3D rendering as well as `AI/LLM` scenarios. 
+
+We aim to create a dedicated technical community for the `WebGPU` field, bringing together outstanding developers. 
+
+Hope more and more `front-end` developers could stay updated with the latest Web technologies `NOT ONLY` image slicing for web design.
+
+Specifically, we will continuously update the excellent samples provided by open-source contributors, allowing everyone to see better works. 
+
+Hope it could help highlight the very talented individual developers within the community!
+
+<a href="https://www.youtube.com/@orillusion7225"><img src="https://raw.githubusercontent.com/Orillusion/assets/main/sample_src/light_city.gif" height="140"></a>
+<a href="https://github.com/ID-Emmett"><img src="https://raw.githubusercontent.com/Orillusion/assets/main/sample_src/physical_car.gif" height="140"></a>
+<a href="https://github.com/ID-Emmett"><img src="https://raw.githubusercontent.com/Orillusion/assets/main/sample_src/movie_camera.gif" height="140"></a>
+<a href="https://github.com/ID-Emmett"><img src="https://raw.githubusercontent.com/Orillusion/assets/main/sample_src/helicopter.gif" height="140"></a>
+<a href="https://www.youtube.com/@orillusion7225"><img src="https://raw.githubusercontent.com/Orillusion/assets/main/sample_src/shooting.gif" height="140"></a>
+<a href="https://github.com/OriIIusion"><img src="https://github.com/Orillusion/assets/blob/main/sample_src/beijing_subway.gif" height="140"></a>
+<a href="https://github.com/mate-h"><img src="https://github.com/Orillusion/assets/blob/main/sample_src/volumetric_clouds.gif" height="140"></a>
+<a href="https://github.com/ID-Emmett"><img src="https://raw.githubusercontent.com/Orillusion/assets/main/sample_src/track_camera.gif" height="140"></a>
+<a href="https://github.com/ID-Emmett"><img src="https://github.com/Orillusion/assets/blob/main/sample_src/pentagram.webp" height="140"></a>
+<a href="https://github.com/OriIIusion"><img src="https://raw.githubusercontent.com/Orillusion/assets/main/sample_src/light_box.gif" height="140"></a>
+<a href="https://github.com/seven1031"><img src="https://github.com/Orillusion/assets/blob/main/sample_src/rabbit_box.webp" height="140"></a>
+<a href="https://github.com/seven1031"><img src="https://github.com/Orillusion/assets/blob/main/sample_src/fluid_mouse.webp" height="140"></a>
 ## Install
 
 ### NPM

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orillusion/core",
-    "version": "0.8.1",
+    "version": "0.8.2",
     "author": "Orillusion",
     "description": "Orillusion WebGPU Engine",
     "type": "module",

samples/compute/Sample_Fluid.ts

@@ -52,9 +52,9 @@ export class Demo_Fluid {
         obj.addComponent(ColliderComponent);
         let pickFire = scene.view.pickFire;
         pickFire.addEventListener(
-            PointerEvent3D.PICK_MOVE, 
+            PointerEvent3D.PICK_MOVE,
             function (e: PointerEvent3D) {
-                let point = e.data.pickInfo.worldPos;
+                let point = e.data.worldPos;
                 if (point.y >= 0 && (this.mLastPoint.x != point.x && this.mLastPoint.y != point.y && this.mLastPoint.z != point.z)) {
                     point.subtract(this.mLastPoint, this.mVelocity);
                     this.mLastPoint.copy(point);

samples/compute/Sample_FluidOptimize.ts

@@ -51,18 +51,18 @@ export class Demo_FluidOptimize {
         obj.addComponent(ColliderComponent);
         let pickFire = scene.view.pickFire;
         pickFire.addEventListener(
-            PointerEvent3D.PICK_MOVE, 
+            PointerEvent3D.PICK_MOVE,
             function (e: PointerEvent3D) {
-                let point = e.data.pickInfo.worldPos;
+                let point = e.data.worldPos;
                 if (point.y >= 0 && (this.mLastPoint.x != point.x && this.mLastPoint.y != point.y && this.mLastPoint.z != point.z)) {
-                    try{
-                    point.subtract(this.mLastPoint, this.mVelocity);
-                    this.mLastPoint.copy(point);
-                    let r = scene.view.camera;
-                    let ray = r.screenPointToRay(Engine3D.inputSystem.mouseX, Engine3D.inputSystem.mouseY);
-                    emulation.updateInputInfo(scene.view.camera.transform.localPosition, ray.direction, this.mVelocity);
+                    try {
+                        point.subtract(this.mLastPoint, this.mVelocity);
+                        this.mLastPoint.copy(point);
+                        let r = scene.view.camera;
+                        let ray = r.screenPointToRay(Engine3D.inputSystem.mouseX, Engine3D.inputSystem.mouseY);
+                        emulation.updateInputInfo(scene.view.camera.transform.localPosition, ray.direction, this.mVelocity);
                     }
-                    catch(e){
+                    catch (e) {
                         console.error(e);
                     }
 

samples/compute/fluid/FluidRenderShader.ts

@@ -57,7 +57,7 @@ export let FluidRenderShader = /* wgsl */ `
         //ORI_VertexOut.fragCoord = normalize(vertex.position.xy) + vec2<f32>(0.5, 0.5);
         ORI_VertexOut.varying_Color = particleColor[vertex.index];
         ORI_VertexOut.varying_WNormal = worldNormal ; 
-
+        ORI_VertexOut.index = f32(particleGlobalData.instance_index) ;
         return ORI_VertexOut;
     }
 

samples/compute/fluid/FluidRenderShaderOpt.ts

@@ -69,6 +69,7 @@ export let FluidRenderShaderOpt = /* wgsl */ `
 
         ORI_VertexOut.varying_WPos = worldPos;
         ORI_VertexOut.varying_WPos.w = f32(particleGlobalData.instance_index);
+        ORI_VertexOut.index = f32(particleGlobalData.instance_index) ;
 
         var clipPosition = globalUniform.projMat * viewPosition ;
 

samples/geometry/Sample_ReplaceGeometry.ts

@@ -0,0 +1,73 @@
+import { BoxGeometry, Engine3D, GeometryBase, LitMaterial, MeshRenderer, Object3D, Object3DUtil, Scene3D, SphereGeometry, TorusGeometry, Vector3 } from "@orillusion/core";
+import { createExampleScene, createSceneParam } from "@samples/utils/ExampleScene";
+import { GUIHelp } from "@orillusion/debug/GUIHelp";
+
+// An sample to replace geometry of meshRenderer
+class Sample_ReplaceGeometry {
+    scene: Scene3D;
+    geometries: GeometryBase[];
+    renderer: MeshRenderer;
+    index = 0;
+    async run() {
+        let param = createSceneParam();
+        param.light.intensity = 1;
+        param.camera.distance = 40;
+        await Engine3D.init();
+        let exampleScene = createExampleScene(param);
+
+        Engine3D.setting.shadow.shadowBound = 100;
+        Engine3D.setting.shadow.shadowSize = 2048;
+        Engine3D.setting.shadow.shadowBias = 0.04;
+
+        this.scene = exampleScene.scene;
+
+        Engine3D.startRenderView(exampleScene.view);
+
+
+        GUIHelp.init();
+        this.initGeometries();
+
+        let duck = await (await Engine3D.res.loadGltf('PBR/Duck/Duck.gltf')) as Object3D;
+        let duckGeometry = duck.getComponents(MeshRenderer)[0].geometry;
+        this.geometries.push(duckGeometry);
+
+        this.initRenderer();
+        let scale = new Vector3(1, 1, 1);
+        GUIHelp.add(this, 'index', 0, 4, 1).onChange((value) => {
+            this.renderer.geometry = this.geometries[value];
+            if (value == this.geometries.length - 1) {
+                scale.set(0.03, 0.03, 0.03);
+            } else {
+                scale.set(1, 1, 1);
+            }
+            this.renderer.object3D.localScale = scale;
+        })
+
+        GUIHelp.open();
+        this.initFloor();
+    }
+
+    initFloor() {
+        let floorHeight = 20;
+        let floor = Object3DUtil.GetSingleCube(1000, floorHeight, 1000, 0.5, 0.5, 0.5);
+        floor.y = -floorHeight;
+        this.scene.addChild(floor);
+    }
+
+    initGeometries() {
+        this.geometries = [];
+        this.geometries.push(new SphereGeometry(2, 20, 20));
+        this.geometries.push(new BoxGeometry(2, 8, 4));
+        this.geometries.push(new TorusGeometry(2, 0.4));
+    }
+
+    initRenderer() {
+        let obj = new Object3D();
+        this.renderer = obj.addComponent(MeshRenderer);
+        this.renderer.material = new LitMaterial();
+        this.renderer.geometry = this.geometries[0];
+        this.scene.addChild(obj);
+    }
+}
+
+new Sample_ReplaceGeometry().run();

samples/lights/Sample_MovebleLight.ts

@@ -97,8 +97,8 @@ class Sample_MovebleLight {
     }
     private onMove(e: PointerEvent3D) {
         //set pick position as light position
-        this.light.transform.x = e.data.pickInfo.worldPos.x;
-        this.light.transform.y = e.data.pickInfo.worldPos.y;
+        this.light.transform.x = e.data.worldPos.x;
+        this.light.transform.y = e.data.worldPos.y;
     }
 }
 //rotate component

samples/pick/Sample_BoxColliderPick.ts

@@ -54,10 +54,9 @@ class Sample_BoxColliderPick {
     }
 
     private onMousePick(e: PointerEvent3D) {
-        let pick = e.data.pick;
-        if (pick && pick.object3D) {
-            let obj = pick.object3D;
-            let meshRenderer = obj.getComponent(MeshRenderer);
+        let pick = e.target;
+        if (pick) {
+            let meshRenderer = pick.getComponent(MeshRenderer);
             //modify base color
             meshRenderer.material.baseColor = new Color(Math.random(), Math.random(), Math.random())
         }

samples/pick/Sample_MeshColliderPick.ts

@@ -55,10 +55,9 @@ class Sample_MeshColliderPick {
     }
 
     private onMousePick(e: PointerEvent3D) {
-        let pick = e.data.pick;
-        if (pick && pick.object3D) {
-            let obj = pick.object3D;
-            let meshRenderer = obj.getComponent(MeshRenderer);
+        let pick = e.target;
+        if (pick) {
+            let meshRenderer = pick.getComponent(MeshRenderer);
             //modify base color
             meshRenderer.material.baseColor = new Color(Math.random(), Math.random(), Math.random())
         }

samples/pick/Sample_PixelPick.ts

@@ -84,8 +84,7 @@ class Sample_PixelPick {
     }
 
     private getPickObject(e: PointerEvent3D): Object3D {
-        let pick = e.data.pick;
-        return pick ? pick.object3D : null;
+        return e.target || null;
     }
 
     private onMouseUp(e: PointerEvent3D) {

src/assets/Res.ts

@@ -357,7 +357,7 @@ export class Res {
     /**
      * load texture data from array of web url.
      * make sure there are six images in a group,
-     * and the order is: nx, px, py, ny, nz, pz
+     * and the order is: [+X, -X, +Y, -Y, +Z, -Z]
      * @param urls 
      */
     public async loadTextureCubeMaps(urls: string[]) {

src/assets/shader/materials/program/ShadowMapping_frag.ts

@@ -173,7 +173,8 @@ export let ShadowMapping_frag: string = /*wgsl*/ `
                     }
                   }
                 }
-                shadow = min(max(shadow / (samples * samples * samples), 0.0), 1.0);
+              }
+              shadow = min(max(shadow / (samples * samples * samples), 0.0), 1.0);
             #endif
 
           #if USE_SOFT_SHADOW

src/components/gui/GUIPick.ts

@@ -4,7 +4,6 @@ import { MouseCode } from '../../event/MouseCode';
 import { webGPUContext } from '../../gfx/graphics/webGpu/Context3D';
 import { Ray } from '../../math/Ray';
 import { Vector2 } from '../../math/Vector2';
-import { Vector3 } from '../../math/Vector3';
 import { Time } from '../../util/Time';
 import { IUIInteractive, UIInteractiveStyle } from './uiComponents/IUIInteractive';
 import { UITransform } from './uiComponents/UITransform';
@@ -63,20 +62,37 @@ export class GUIPick {
         this._mouseCode = e.mouseCode;
         this.collectEntities();
         let ret = this.pick(this._colliderOut);
-        ret && e.stopImmediatePropagation();
-        let target = ret ? ret.collider : null;
-        if (target != this._lastOverTarget) {
-            if (this._lastOverTarget && this._lastOverTarget.enable) {
+        if(ret){
+            e.stopImmediatePropagation();
+            let _target = ret.collider;
+            if(_target != this._lastOverTarget){
+                _target.mouseStyle = UIInteractiveStyle.OVER;
+                Object.assign(this._overEvent, e);
+                this._overEvent.type = PointerEvent3D.PICK_OVER_GUI;
+                this._overEvent.target = _target.object3D;
+                this._overEvent.data = ret;
+                _target.object3D.dispatchEvent(this._overEvent);
+
+                if (this._lastOverTarget) {
+                    this._lastOverTarget.mouseStyle = UIInteractiveStyle.NORMAL;
+                    Object.assign(this._outEvent, e);
+                    this._outEvent.type = PointerEvent3D.PICK_OUT_GUI;
+                    this._outEvent.target = _target.object3D;
+                    this._outEvent.data = ret;
+                    this._lastOverTarget.object3D.dispatchEvent(this._outEvent);
+                }
+            }  
+            this._lastOverTarget = _target;
+        }else{
+            if (this._lastOverTarget) {
                 this._lastOverTarget.mouseStyle = UIInteractiveStyle.NORMAL;
-                this._outEvent.data = this._lastOverTarget;
+                Object.assign(this._outEvent, e);
+                this._outEvent.type = PointerEvent3D.PICK_OUT_GUI;
+                this._outEvent.target = this._lastOverTarget.object3D;
+                this._outEvent.data = ret;
                 this._lastOverTarget.object3D.dispatchEvent(this._outEvent);
+                this._lastOverTarget = null
             }
-            if (target) {
-                target.mouseStyle = UIInteractiveStyle.OVER;
-                this._overEvent.data = target;
-                target.object3D.dispatchEvent(this._overEvent);
-            }
-            this._lastOverTarget = target;
         }
     }
 
@@ -94,13 +110,16 @@ export class GUIPick {
         this.collectEntities();
         let ret = this.pick(this._colliderOut);
         ret && e.stopImmediatePropagation();
-        let target = ret ? ret.collider : null;
-        if (target) {
-            target.mouseStyle = UIInteractiveStyle.DOWN;
-            this._overEvent.data = target;
-            target.object3D.dispatchEvent(this._overEvent);
+        let collider = ret ? ret.collider : null;
+        if (collider) {
+            collider.mouseStyle = UIInteractiveStyle.DOWN;
+            Object.assign(this._downEvent, e);
+            this._downEvent.type = PointerEvent3D.PICK_DOWN_GUI;
+            this._downEvent.target = collider.object3D;
+            this._downEvent.data = ret;
+            collider.object3D.dispatchEvent(this._downEvent);
         }
-        this._lastDownTarget = target;
+        this._lastDownTarget = collider;
     }
 
     private onTouchUp(e: PointerEvent3D) {
@@ -111,17 +130,20 @@ export class GUIPick {
         let ret = this.pick(this._colliderOut);
         ret && e.stopImmediatePropagation();
 
-        let target = ret ? ret.collider : null;
+        let collider = ret ? ret.collider : null;
         if (this._lastDownTarget && this._lastDownTarget.enable) {
             this._lastDownTarget.mouseStyle = UIInteractiveStyle.NORMAL;
         }
 
-        if (target && target == this._lastDownTarget) {
+        if (collider && collider == this._lastDownTarget) {
             if (Time.time - this._lastDownTime <= this._clickTimeSpan) {
                 this._calcDistanceVec2.set(e.mouseX, e.mouseY);
                 if (this._calcDistanceVec2.distance(this._lastDownPosition) <= this._clickDistanceSpan) {
-                    this._clickEvent.data = { pick: target, pickInfo: ret, mouseCode: this._mouseCode };
-                    target.object3D.dispatchEvent(this._clickEvent);
+                    Object.assign(this._clickEvent, e);
+                    this._clickEvent.type = PointerEvent3D.PICK_CLICK_GUI;
+                    this._clickEvent.target = collider.object3D;
+                    this._clickEvent.data = ret;
+                    collider.object3D.dispatchEvent(this._clickEvent);
                 }
             }
         }

src/components/gui/uiComponents/IUIInteractive.ts

@@ -1,4 +1,4 @@
-import { CEventDispatcher } from "../../../event/CEventDispatcher";
+import { Object3D } from "../../../core/entities/Object3D";
 import { Ray } from "../../../math/Ray";
 import { Vector2 } from "../../../math/Vector2";
 
@@ -13,7 +13,7 @@ export interface IUIInteractive {
     interactive: boolean;
     enable: boolean;
     visible: boolean;
-    object3D?: CEventDispatcher;
+    object3D?: Object3D;
 
     get interactiveVisible(): boolean;
 

src/components/gui/uiComponents/UIPanel.ts

@@ -96,7 +96,6 @@ export class UIPanel extends UIImage {
     public set billboard(type: BillboardType) {
         if (this.space == GUISpace.View) {
             type = BillboardType.None;
-        } else {
             console.warn('Cannot enable billboard in view space');
         }
         if (type == BillboardType.BillboardXYZ || type == BillboardType.BillboardY) {