@needle-tools/engine 3.8.0-alpha → 3.9.0-alpha

package/src/engine-components/export/usdz/extensions/USDZUI.ts

@@ -0,0 +1,120 @@
+import { IUSDExporterExtension } from "../Extension";
+import { USDObject, USDZExporterContext } from "../ThreeUSDZExporter";
+import { GameObject } from "../../../Component";
+import { Canvas } from "../../../ui/Canvas";
+import { CanvasGroup } from "../../../ui/CanvasGroup";
+import { $shadowDomOwner } from "../../../ui/BaseUIComponent";
+import { RectTransform } from "../../../ui/RectTransform";
+import { Color, Mesh, MeshBasicMaterial, Object3D } from "three";
+import { TextExtension } from "./USDZText";
+import { RenderMode } from "../../../ui/Canvas";
+
+export class USDZUIExtension implements IUSDExporterExtension {
+    get extensionName(): string {
+        return "tmui";
+    }
+
+    // TODO would probably be better to export each object instead of the entire Canvas
+    // so that we don't export them twice (once as regular hierarchy, once as part of Canvas export)
+    onExportObject(object: Object3D, model: USDObject, _context: USDZExporterContext) {
+        const canvas = GameObject.getComponent(object, Canvas);
+
+        if (canvas && canvas.activeAndEnabled && canvas.renderMode === RenderMode.WorldSpace) {
+            const textExt = new TextExtension();
+            const rt = GameObject.getComponent(object, RectTransform);
+            const canvasGroup = GameObject.getComponent(object, CanvasGroup);
+
+            let width = 100;
+            let height = 100;
+            if (rt) {
+                width = rt.width;
+                height = rt.height;
+
+                const shadowRootModel = USDObject.createEmpty();
+                const shadowComponent = rt.shadowComponent;
+                model.add(shadowRootModel);
+
+                if (shadowComponent) {
+                    const mat = shadowComponent.matrix;
+                    shadowRootModel.matrix.copy(mat);
+                    // shadowRootModel.matrix.premultiply(invertX);
+
+                    // TODO build map of parent GOs to USDObjects so we can reparent while traversing
+                    const usdObjectMap = new Map<Object3D, USDObject>();
+                    const opacityMap = new Map<Object3D, number>();
+                    usdObjectMap.set(shadowComponent, shadowRootModel);
+                    opacityMap.set(shadowComponent, canvasGroup ? canvasGroup.alpha : 1);
+
+                    shadowComponent.traverse((child) => {
+                        if (child === shadowComponent) return;
+
+                        const childModel = USDObject.createEmpty();
+                        childModel.matrix.copy(child.matrix);
+
+                        const childParent = child.parent;
+                        const isText = childParent && typeof childParent["textContent"] === "string" && childParent["textContent"].length;
+                        let hierarchyOpacity = opacityMap.get(childParent!) || 1;
+                        
+                        // TODO CanvasGroup doesn't render something but modifies opacity
+                        // get CanvasGroup and modify alpha here
+
+                        const canvasGroup = GameObject.getComponent(child, CanvasGroup);
+                        if (canvasGroup)
+                            hierarchyOpacity *= canvasGroup.alpha;
+
+                        if (child instanceof Mesh && isText) {
+                            // get shadoDomOwner so we can export Text from the text extension directly
+                            const shadowDomOwner = child[$shadowDomOwner].gameObject;
+                            textExt.exportText(shadowDomOwner, childModel, _context);
+                        }
+
+                        if (child instanceof Mesh && !isText)
+                        {
+                            // UI behaves weird: it seems it's always flipped right now,
+                            // and three magically fixes it when rendering
+                            // see https://github.com/mrdoob/three.js/pull/12720#issue-275923930
+                            // https://github.com/mrdoob/three.js/issues/17361
+                            // So we need to fix the winding order after applying the negative scale.
+                            const clonedGeo = child.geometry.clone();
+                            clonedGeo.scale(1, 1, -1);
+                            this.flipWindingOrder(clonedGeo);
+                            childModel.geometry = clonedGeo;
+
+                            const color = new Color();
+                            const ownOpacity = child.material.opacity;
+                            color.copy(child.material.color);
+
+                            // Calculate opacity from parent chain and own alpha
+                            childModel.material = new MeshBasicMaterial({
+                                color: color,
+                                opacity: ownOpacity * hierarchyOpacity,
+                                map: child.material.map,
+                                transparent: true,
+                            });
+                        }
+
+                        usdObjectMap.set(child, childModel);
+                        opacityMap.set(child, hierarchyOpacity);
+
+                        const parentUsdzObject = usdObjectMap.get(childParent!);
+                        if (!parentUsdzObject) {
+                            console.error("Error when exporting UI: shadow component parent not found!", child, child.parent);
+                            return;
+                        }
+                        parentUsdzObject.add(childModel);
+                    });
+                }
+            }
+        }
+    }
+    
+    private flipWindingOrder(geometry) {
+        const index = geometry.index.array
+        for (let i = 0, il = index.length / 3; i < il; i++) {
+          let x = index[i * 3]
+          index[i * 3] = index[i * 3 + 2]
+          index[i * 3 + 2] = x
+        }
+        geometry.index.needsUpdate = true
+    }
+}

package/src/engine-components/ui/Button.ts

@@ -116,8 +116,10 @@ export class Button extends Behaviour implements IPointerEventHandler {
         }
     }
 
-    onPointerClick(_args: PointerEventData) {
+    onPointerClick(args: PointerEventData) {
         if (!this.interactable) return;
+        // Button clicks should only run with left mouse button
+        if(args.pointerId !== 0) return;
         if (debug) {
             console.warn("Button Click", this.onClick);
             showBalloonMessage("CLICKED button " + this.name + " at " + this.context.time.frameCount);

package/src/engine-components/ui/EventSystem.ts

@@ -127,6 +127,7 @@ export class EventSystem extends Behaviour {
             MeshUIHelper.resetLastSelected();
             const opts = new PointerEventData(this.context.input);
             opts.inputSource = ctrl;
+            opts.pointerId = 0;
             opts.isDown = ctrl.selectionDown;
             opts.isUp = ctrl.selectionUp;
             opts.isPressed = ctrl.selectionPressed;
@@ -136,10 +137,11 @@ export class EventSystem extends Behaviour {
                 args.grab = null;
             };
         }
-        this._selectEndFn ??= (ctrl, args: { grab: THREE.Object3D }) => {
+        this._selectEndFn ??= (ctrl: WebXRController, args: { grab: THREE.Object3D }) => {
             if (!args.grab) return;
             const opts = new PointerEventData(this.context.input);
             opts.inputSource = ctrl;
+            opts.pointerId = 0;
             opts.isDown = ctrl.selectionDown;
             opts.isUp = ctrl.selectionUp;
             opts.isPressed = ctrl.selectionPressed;

package/src/engine-components/ui/Graphic.ts

@@ -3,7 +3,7 @@ import * as ThreeMeshUI from 'three-mesh-ui'
 import { RGBAColor } from "../js-extensions/RGBAColor"
 import { BaseUIComponent } from "./BaseUIComponent";
 import { serializable } from '../../engine/engine_serialization_decorator';
-import { Color, LinearEncoding, sRGBEncoding, Texture } from 'three';
+import { Color, LinearSRGBColorSpace, SRGBColorSpace, Texture } from 'three';
 import { RectTransform } from './RectTransform';
 import { onChange, scheduleAction } from "./Utils"
 import { GameObject } from '../Component';
@@ -191,12 +191,12 @@ export class Graphic extends BaseUIComponent implements IGraphic, IRectTransform
         this.setOptions({ backgroundOpacity: 0 });
         if (tex) {
             // workaround for https://github.com/needle-tools/needle-engine-support/issues/109
-            if (tex.encoding === sRGBEncoding) {
+            if (tex.colorSpace === SRGBColorSpace) {
                 if (Graphic.textureCache.has(tex)) {
                     tex = Graphic.textureCache.get(tex)!;
                 } else {
                     const clone = tex.clone();
-                    clone.encoding = LinearEncoding;
+                    clone.colorSpace = LinearSRGBColorSpace;
                     Graphic.textureCache.set(tex, clone);
                     tex = clone;
                 }

package/src/engine-components/webxr/WebXR.ts

@@ -370,7 +370,7 @@ export class WebXR extends Behaviour {
             if (xrRig) {
                 // make it match unity forward
                 this.rig = xrRig.gameObject;
-                // this.rig.rotateY(Math.PI);
+                this.rig.rotateY(Math.PI);
                 // this.rig.position.copy(existing.worldPosition);
                 // this.rig.quaternion.premultiply(existing.worldQuaternion);
             }