Needle Engine 3.5.7-alpha

Files changed (14) hide show

src/engine/codegen/register_types.js +2 -2
src/engine-components/ui/Canvas.ts +1 -1
src/engine-components/ui/CanvasGroup.ts +6 -3
src/engine/engine_addressables.ts +1 -1
src/engine/engine_networking.ts +65 -34
src/engine-components/ui/Graphic.ts +3 -0
src/engine-components/ui/Interfaces.ts +2 -2
src/engine-components/ui/RectTransform.ts +32 -28
src/engine-components/SyncedRoom.ts +11 -9
src/engine-components/ui/Text.ts +9 -4
src/engine-components/export/usdz/ThreeUSDZExporter.ts +9 -6
src/engine-components/export/usdz/USDZExporter.ts +2 -0
src/engine-components/export/usdz/extensions/USDZText.ts +99 -11
src/engine-components/webxr/WebXR.ts +1 -1

src/engine/codegen/register_types.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { TypeStore } from "./../engine_typestore"
 // Import types
 import { __Ignore } from "../../engine-components/codegen/components";
 import { ActionBuilder } from "../../engine-components/export/usdz/extensions/behavior/BehavioursBuilder";
@@ -215,7 +215,7 @@
 import { XRGrabRendering } from "../../engine-components/webxr/WebXRGrabRendering";
 import { XRRig } from "../../engine-components/webxr/WebXRRig";
 import { XRState } from "../../engine-components/XRFlag";
 // Register types
 TypeStore.add("__Ignore", __Ignore);
 TypeStore.add("ActionBuilder", ActionBuilder);

src/engine-components/ui/Canvas.ts CHANGED Viewed

@@ -208,7 +208,7 @@
     }
     onAfterRenderRoutine = () => {
-        if ((this.screenspace || this.renderMode) && this.previousParent && this.context.mainCamera) {
+        if ((this.screenspace || this.renderOnTop) && this.previousParent && this.context.mainCamera) {
             if (this.screenspace) {
                 const camObj = this.context.mainCamera;
                 camObj?.add(this.gameObject);

src/engine-components/ui/CanvasGroup.ts CHANGED Viewed

@@ -1,8 +1,9 @@
 import { Graphic } from "./Graphic";
 import { FrameEvent } from "../../engine/engine_setup";
 import { Behaviour, GameObject } from "../Component";
-import { ICanvasGroup } from "./Interfaces";
+import { ICanvasGroup, IHasAlphaFactor } from "./Interfaces";
 import { serializable } from "../../engine/engine_serialization_decorator";
+import { BaseUIComponent } from "./BaseUIComponent";
 export class CanvasGroup extends Behaviour implements ICanvasGroup {
@@ -40,8 +41,10 @@
     private _buffer: Graphic[] = [];
     private applyChangesNow() {
-        for (const ch of GameObject.getComponentsInChildren(this.gameObject, Graphic, this._buffer)) {
-            ch.setAlphaFactor(this._alpha);
+        for (const ch of GameObject.getComponentsInChildren(this.gameObject, BaseUIComponent, this._buffer)) {
+            const hasAlphaFactor = ch as any as IHasAlphaFactor;
+            if (hasAlphaFactor.setAlphaFactor)
+                hasAlphaFactor.setAlphaFactor(this._alpha);
         }
     }
 }

src/engine/engine_addressables.ts CHANGED Viewed

@@ -212,7 +212,6 @@
     private async onInstantiate(parent?: Object3D | InstantiateOptions, networked: boolean = false, saveOnServer?: boolean) {
         const context = Context.Current;
-        if (!parent) parent = context.scene;
         if (this.mustLoad) {
             await this.loadAssetAsync();
         }
@@ -235,6 +234,7 @@
                     Object.assign(options, parent);
                 }
             }
+            if (!options.parent) options.parent = context.scene;
             let count = AssetReference.currentlyInstantiating.get(this.uri);
             // allow up to 10000 instantiations of the same prefab in the same frame

src/engine/engine_networking.ts CHANGED Viewed

@@ -1,8 +1,6 @@
-// import geckos, { ClientChannel, Data } from '@geckos.io/client';
+const defaultNetworkingBackendUrlProvider = "https://urls.needle.tools/default-networking-backend/index";
+let serverUrl : string | undefined = "wss://needle-tiny-starter.glitch.me/socket";
-// const serverUrl = 'wss://tiny-server-1-r26roub2hq-ew.a.run.app/';
-let serverUrl = 'wss://needle-tiny-starter.glitch.me/socket';
 import { Websocket, WebsocketBuilder } from 'websocket-ts';
 // import { Networking } from '../engine-components/Networking';
 import { Context } from './engine_setup';
@@ -85,6 +83,8 @@
     value: boolean;
 }
+declare type WebsocketSendType = IModel | object | boolean | null | string | number;
 export class OwnershipModel {
     public guid: string;
@@ -308,8 +308,9 @@
         this.send(RoomEvents.Leave, { room: room });
     }
-    public send(key: string | OwnershipEvent, data: IModel | object | boolean | null | string | number = null, queue: SendQueue = SendQueue.Queued) {
+    public send<T extends WebsocketSendType>(key: string | OwnershipEvent, data: T | null = null, queue: SendQueue = SendQueue.Queued) {
+        //@ts-ignore
         if (data === null) data = {};
         if (queue === SendQueue.Queued) {
@@ -331,7 +332,7 @@
         delete this._state[guid];
     }
-    public sendDeleteRemoteStateAll(){
+    public sendDeleteRemoteStateAll() {
         this.send("delete-all-state");
         this._state = {};
     }
@@ -404,23 +405,25 @@
         this.netWebSocketUrlProvider = prov;
     }
-    public connect() {
-        if (this.connected) return;
+    public async connect() {
+        if (this.connected) return Promise.resolve(true);
         if (debugNet)
             console.log("connecting");
-        // this.channel = geckos({ port: 9208, url: 'http://127.0.0.1' });
-        // this.channel.onConnect(this.onConnectGeckosIo.bind(this));
-        // const networking = GameObject.findObjectOfType(Networking, this.context, false);
         const overrideUrl = this.netWebSocketUrlProvider?.getWebsocketUrl();
         if (overrideUrl) {
             serverUrl = overrideUrl;
         }
-        else if(isHostedOnGlitch()) {
+        else if (isHostedOnGlitch()) {
             serverUrl = "wss://" + window.location.host + "/socket";
         }
-        this.connectWebsocket();
+        return this.connectWebsocket();
     };
+    public disconnect() {
+        this._ws?.close();
+        this._ws = undefined;
+    }
     private _listeners: { [key: string]: Function[] } = {};
     private _listenersBinary: { [key: string]: BinaryCallback[] } = {};
     private connected: boolean = false;
@@ -428,7 +431,6 @@
     private _connectionId: string | null = null;
     // Websocket ------------------------------------------------------------
-    private _isConnectingToWebsocket: boolean = false;
     private _ws: Websocket | undefined;
     private _waitingForSocket: { [key: string]: Array<Function> } = {};
     private _isInRoom: boolean = false;
@@ -439,26 +441,55 @@
     private _state: { [key: string]: any } = {};
     private _currentDelay: number = -1;
+    private _connectingToWebsocketPromise: Promise<boolean> | null = null;
     private connectWebsocket() {
-        if (this._isConnectingToWebsocket) return;
-        this._isConnectingToWebsocket = true;
-        console.log("Connecting to " + serverUrl)
-        const ws = new WebsocketBuilder(serverUrl)
-            .onOpen(() => {
-                this._ws = ws;
-                this._isConnectingToWebsocket = false;
-                this.connected = true;
-                console.log("Connected to websocket");
-                this.onSendQueued(SendQueue.OnConnection);
-            })
-            .onClose((_evt) => {
-                this.connected = false;
-                this._isInRoom = false;
-            })
-            .onError((i, ev) => { console.error(i, ev) })
-            .onMessage(this.onMessage.bind(this))
-            .onRetry(() => { console.log("websocket connection retry") })
-            .build();
+        if (this._connectingToWebsocketPromise) return this._connectingToWebsocketPromise;
+        return this._connectingToWebsocketPromise = new Promise(async (res, _) => {
+            let didResolve = false;
+            const resolve = (val: boolean) => {
+                if (didResolve) return;
+                didResolve = true;
+                res(val);
+            }
+            if(serverUrl === undefined){
+                console.log("Fetch default backend url: " + defaultNetworkingBackendUrlProvider);
+                let failed = false;
+                const defaultUrlResponse = await fetch(defaultNetworkingBackendUrlProvider);
+                serverUrl = await defaultUrlResponse.text();
+                if(failed) return;
+            }
+            if(serverUrl === undefined){
+                resolve(false);
+                return;
+            }
+            console.log("⊡ Connecting to networking backend on\n" + serverUrl)
+            const ws = new WebsocketBuilder(serverUrl)
+                .onOpen(() => {
+                    this._connectingToWebsocketPromise = null;
+                    this._ws = ws;
+                    this.connected = true;
+                    console.log("⊞ Connected to networking backend\n" + serverUrl);
+                    resolve(true);
+                    this.onSendQueued(SendQueue.OnConnection);
+                })
+                .onClose((_evt) => {
+                    this._connectingToWebsocketPromise = null;
+                    this.connected = false;
+                    this._isInRoom = false;
+                    resolve(false);
+                })
+                .onError((i, ev) => {
+                    console.error("⊠ Websocket error", i, ev);
+                    resolve(false);
+                })
+                .onMessage(this.onMessage.bind(this))
+                .onRetry(() => { console.log("Retry connecting to networking websocket") })
+                .build();
+        });
     }
     private onMessage(_, ev) {
@@ -575,7 +606,7 @@
                     break;
                 case "all-room-state-deleted":
-                    if(debugNet) console.log("RECEIVED all-room-state-deleted");
+                    if (debugNet) console.log("RECEIVED all-room-state-deleted");
                     this._state = {};
                     break;

src/engine-components/ui/Graphic.ts CHANGED Viewed

@@ -40,6 +40,9 @@
         this._alphaFactor = factor;
         this.onColorChanged();
     }
+    get alphaFactor() {
+        return this._alphaFactor;
+    }
     protected onColorChanged() {
         if (this.uiObject) {

src/engine-components/ui/Interfaces.ts CHANGED Viewed

@@ -14,11 +14,11 @@
     interactable: boolean;
 }
-export interface IHasImage {
+export interface IHasAlphaFactor {
     setAlphaFactor(val: number);
 }
-export interface IGraphic extends IComponent, IHasImage {
+export interface IGraphic extends IComponent, IHasAlphaFactor {
     get isGraphic(): boolean;
     raycastTarget: boolean;
 }

src/engine-components/ui/RectTransform.ts CHANGED Viewed

@@ -2,12 +2,11 @@
 import { BaseUIComponent } from "./BaseUIComponent";
 import { DocumentedOptions as ThreeMeshUIEveryOptions } from "three-mesh-ui/build/types/core/elements/MeshUIBaseElement";
 import { serializable } from "../../engine/engine_serialization_decorator";
-import { Color, Matrix4, Object3D, Quaternion, Vector2, Vector3 } from "three";
-import { EventSystem } from "./EventSystem";
+import { Matrix4, Object3D, Quaternion, Vector2, Vector3 } from "three";
 import { getParam } from "../../engine/engine_utils";
 import { onChange } from "./Utils";
 import { foreachComponentEnumerator } from "../../engine/engine_gameobject";
-import { ICanvas, IRectTransform, IRectTransformChangedReceiver, ILayoutGroup } from "./Interfaces";
+import { ICanvas, IRectTransform, IRectTransformChangedReceiver } from "./Interfaces";
 import { GameObject } from '../Component';
 const debug = getParam("debugui");
@@ -43,14 +42,14 @@
     get rotation() { return this.gameObject.quaternion; }
     get scale(): Vector3 { return this.gameObject.scale; }
-    private _anchoredPosition!: Vector3;
+    private _anchoredPosition!: Vector2;
-    @serializable(Vector3)
+    @serializable(Vector2)
     get anchoredPosition() {
-        if (!this._anchoredPosition) this._anchoredPosition = new Vector3();
+        if (!this._anchoredPosition) this._anchoredPosition = new Vector2();
         return this._anchoredPosition;
     }
-    private set anchoredPosition(value: Vector3) {
+    private set anchoredPosition(value: Vector2) {
         this._anchoredPosition = value;
     }
@@ -99,17 +98,24 @@
     private lastMatrix!: Matrix4;
     private rectBlock!: Object3D;
     private _transformNeedsUpdate: boolean = false;
+    private _initialPosition!: Vector3;
     awake() {
         super.awake();
+        // this is required if an animator animated the transform anchoring
+        if (!this._anchoredPosition)
+            this._anchoredPosition = new Vector2();
         this.lastMatrix = new Matrix4();
         this.rectBlock = new Object3D();
         // Is this legacy? Not sure if this is still needed
         this.rectBlock.position.z = .1;
         this.rectBlock.name = this.name;
-        // this is required if an animator animated the transform anchoring
-        if (!this._anchoredPosition) this._anchoredPosition = new Vector3();
+        // TODO: get rid of the initial position
+        this._initialPosition = this.gameObject.position.clone();
+        this._initialPosition.z = 0;
+        this.onApplyTransform("RectTransform awake");
         // TODO: we need to replace this with the watch that e.g. Rigibody is using (or the one in utils?)
         // perhaps we can also just manually check the few properties in the update loops?
@@ -119,20 +125,6 @@
         onChange(this, "pivot", () => { this.markDirty(); });
         onChange(this, "anchorMin", () => { this.markDirty(); });
         onChange(this, "anchorMax", () => { this.markDirty(); });
-        // When exported with an anchored position offset we remove it here
-        // because it would otherwise be applied twice when the anchoring is animated
-        // Maybe we can get rid of this workaround if we just set the mesh ui position from the
-        // anchored position value but then we would have to make sure if a user/the engine updates
-        // "position" the change would also land in anchoredPosition
-        // Another solution would perhaps be to get rid of the extra "anchoredPosition" vector3
-        // and instead use the same vector3 instance on both "position" and "anchoredPosition"
-        // But I'm also not sure if this will not cause issues elsewhere later / be confusing?
-        // (that being said we can make anchoredPosition hidden)
-        if (!this.isRoot()) {
-            this.gameObject.position.x += this.anchoredPosition.x;
-            this.gameObject.position.y -= this.anchoredPosition.y;
-        }
     }
     onEnable() {
@@ -155,7 +147,7 @@
     }
     get isDirty() {
-        if(!this._transformNeedsUpdate) this._transformNeedsUpdate = !this.lastMatrix.equals(this.gameObject.matrix);
+        if (!this._transformNeedsUpdate) this._transformNeedsUpdate = !this.lastMatrix.equals(this.gameObject.matrix);
         return this._transformNeedsUpdate;
     }
@@ -199,7 +191,6 @@
         else
             this._parentRectTransform = undefined;
         this._transformNeedsUpdate = false;
-        this.lastMatrix.copy(this.gameObject.matrix);
         if (debugLayout) console.warn("RectTransform → ApplyTransform", this.name + " because " + reason);
@@ -223,7 +214,8 @@
             tempVec.set(0, 0, 0);
             this.applyAnchoring(tempVec);
             tempVec.z += this.offset;
-            tempVec.z -= this.gameObject.position.z;
+            // tempVec.z -= this.gameObject.position.z;
             tempMatrix.identity();
             tempMatrix.setPosition(tempVec.x, tempVec.y, tempVec.z);
             uiobject.matrix.premultiply(tempMatrix);
@@ -236,6 +228,8 @@
             if (!canvas.screenspace) uiobject.rotation.y = Math.PI;
         }
+        this.lastMatrix.copy(this.gameObject.matrix);
         // iterate other components on this object that might need to know about the transform change
         // e.g. Graphic components should update their width and height
         const includeChildren = true;
@@ -259,11 +253,21 @@
     //     }
     // }
+    private _lastAnchoring!: Vector2;
     /** applies the position offset to the passed in vector */
     private applyAnchoring(pos: Vector3) {
-        pos.x += this.anchoredPosition.x;
-        pos.y += this.anchoredPosition.y;
+        if (!this._lastAnchoring) this._lastAnchoring = new Vector2();
+        const diff = this._lastAnchoring.sub(this._anchoredPosition)
+        this.gameObject.position.x += diff.x;
+        this.gameObject.position.y += diff.y;
+        this._lastAnchoring.copy(this._anchoredPosition);
+        pos.x += (this._initialPosition.x - this.gameObject.position.x);
+        pos.y += (this._initialPosition.y - this.gameObject.position.y);
+        pos.z += (this._initialPosition.z - this.gameObject.position.z);
         const parent = this._parentRectTransform;
         if (parent) {
             // Calculate vertical offset

src/engine-components/SyncedRoom.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import { Behaviour } from "./Component";
 import * as utils from "../engine/engine_utils"
 import { serializable } from "../engine/engine_serialization_decorator";
+import { getParam } from "../engine/engine_utils";
 const viewParamName = "view";
 const debug = utils.getParam("debugsyncedroom");
@@ -40,7 +41,9 @@
             this.context.connection.joinRoom(viewId, true);
             return;
         }
-        this.tryJoinRoom();
+        // If setup to join a random room
+        if (this.joinRandomRoom || getParam(this.urlParameterName))
+            this.tryJoinRoom();
     }
     onDisable(): void {
@@ -48,6 +51,13 @@
             this.context.connection.leaveRoom(this.roomName);
     }
+    /** Will generate a random room name, set it as an URL parameter and attempt to join the room */
+    tryJoinRandomRoom() {
+        this.setRandomRoomUrlParameter();
+        this.tryJoinRoom();
+    }
+    /** Try to join the currently set roomName */
     tryJoinRoom(call: number = 0): boolean {
         if (call === undefined) call = 0;
         let hasRoomParameter = false;
@@ -78,12 +88,6 @@
             return false;
         }
-        if (!this.roomName || this.roomName.length <= 0) {
-            if (debug)
-                console.error("Missing room name on \"" + this.name + "\". Make sure this is correctly configured in Unity", this.context.connection.isDebugEnabled ? this : "");
-            return false;
-        }
         if (!this.context.connection.isConnected) {
             this.context.connection.connect();
         }
@@ -157,8 +161,6 @@
             urlParams.set(viewParamName, this.context.connection.currentRoomViewId);
             return window.location.origin + window.location.pathname + "?" + urlParams.toString();
         }
         return null;
     }
 }

src/engine-components/ui/Text.ts CHANGED Viewed

@@ -6,7 +6,7 @@
 import { Canvas } from './Canvas';
 import { serializable } from '../../engine/engine_serialization_decorator';
 import { getParam, resolveUrl } from '../../engine/engine_utils';
-import { ICanvas } from './Interfaces';
+import { ICanvas, IHasAlphaFactor } from './Interfaces';
 const debug = getParam("debugtext");
@@ -38,7 +38,7 @@
     BoldAndItalic = 3,
 }
-export class Text extends Graphic {
+export class Text extends Graphic implements IHasAlphaFactor {
     @serializable()
     alignment: TextAnchor = TextAnchor.UpperLeft;
@@ -55,6 +55,13 @@
     @serializable()
     fontStyle: FontStyle = FontStyle.Normal;
+    // private _alphaFactor : number = 1;
+    setAlphaFactor(factor: number): void {
+        super.setAlphaFactor(factor);
+        this.uiObject?.set({ fontOpacity: this.color.alpha * this.alphaFactor });
+        this.markDirty();
+    }
     @serializable()
     get text(): string {
         return this._text;
@@ -78,11 +85,9 @@
     }
     set fontSize(val: number) {
         // Setting that kind of property in a parent, would cascade to each 'non-overrided' children.
         this._fontSize = val;
         this.uiObject?.set({ fontSize: val });
     }

src/engine-components/export/usdz/ThreeUSDZExporter.ts CHANGED Viewed

@@ -661,12 +661,6 @@
 			}
-			if ( ! ( material.uuid in context.materials ) ) {
-				context.materials[ material.uuid ] = material;
-			}
 		} else {
 			console.warn( 'THREE.USDZExporter: Unsupported material type (USDZ only supports MeshStandardMaterial)', name );
@@ -675,6 +669,15 @@
 	}
+	if( material ) {
+		if ( ! ( material.uuid in context.materials ) ) {
+			context.materials[ material.uuid ] = material;
+		}
+	}
 	for ( const ch of object.children ) {
 		addResources( ch, context );

src/engine-components/export/usdz/USDZExporter.ts CHANGED Viewed

@@ -15,6 +15,7 @@
 import { hasProLicense } from "../../../engine/engine_license";
 import { BehaviorExtension } from "./extensions/behavior/Behaviour";
 import { AudioExtension } from "./extensions/behavior/AudioExtension";
+import { TextExtension } from "./extensions/USDZText";
 const debug = getParam("debugusdz");
@@ -96,6 +97,7 @@
         if (this.interactive) {
             this.extensions.push(new BehaviorExtension());
             this.extensions.push(new AudioExtension());
+            this.extensions.push(new TextExtension());
         }
     }

src/engine-components/export/usdz/extensions/USDZText.ts CHANGED Viewed

@@ -1,5 +1,11 @@
+import { IUSDExporterExtension } from "../Extension";
 import { IBehaviorElement } from "../extensions/behavior/BehavioursBuilder";
-import { USDDocument, USDWriter } from "../ThreeUSDZExporter";
+import { USDDocument, USDObject, USDWriter, USDZExporterContext } from "../ThreeUSDZExporter";
+import { GameObject } from "../../../Component";
+import { Text } from "../../../ui/Text"
+import { RectTransform } from "../../../ui/RectTransform";
+import { Color, Material, Matrix4, MeshStandardMaterial, Object3D, Vector3 } from "three";
+import { TextAnchor } from "../../../ui/Text";
 export enum TextWrapMode {
@@ -41,6 +47,8 @@
     horizontalAlignment?: HorizontalAlignment;
     verticalAlignment?: VerticalAlignment;
+    material?: Material;
     setDepth(depth: number): USDZText {
         this.depth = depth;
         return this;
@@ -94,6 +102,10 @@
         if (this.verticalAlignment)
             writer.appendLine(`token verticalAlignment = "${this.verticalAlignment}"`);
+        if (this.material !== undefined) {
+            writer.appendLine(`rel material:binding = </Materials/Material_${this.material.id}>`)
+        }
         writer.closeBlock();
     }
@@ -120,23 +132,99 @@
         text.height = height;
         text.horizontalAlignment = horizontal;
         text.verticalAlignment = vertical;
-        if (wrapMode)
+        if (wrapMode !== undefined)
             text.wrapMode = wrapMode;
         return text;
     }
 }
+const rotateYAxisMatrix = new Matrix4().makeRotationY(Math.PI);
-export class TextExtension {
-    onExportObject(_object, model, _context) {
-        model.addEventListener("serialize", (writer, _context) => {
-            const text = TextBuilder.multiLine("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
-                1, 1, HorizontalAlignment.justified, VerticalAlignment.top);
-            text.pointSize = 300;
-            text.depth = .01;
-            text.writeTo(undefined, writer);
-        });
+export class TextExtension implements IUSDExporterExtension {
+    get extensionName(): string {
+        return "text";
     }
+    onExportObject(object: Object3D, model: USDObject, _context: USDZExporterContext) {
+        const text = GameObject.getComponent(object, Text);
+        if (text) {
+            const rt = GameObject.getComponent(object, RectTransform);
+            let width = 100;
+            let height = 100;
+            if (rt) {
+                width = rt.width;
+                height = rt.height;
+            }
+            const newModel = model.clone();
+            newModel.matrix = rotateYAxisMatrix.clone();
+            const color = new Color().copySRGBToLinear(text.color);
+            newModel.material = new MeshStandardMaterial({ color: color, emissive: color });
+            model.add(newModel);
+            // model.matrix.scale(new Vector3(100, 100, 100));
+            newModel.addEventListener("serialize", (writer: USDWriter, _context: USDZExporterContext) => {
+                const textObj = TextBuilder.multiLine(text.text, width, height, HorizontalAlignment.center, VerticalAlignment.bottom, TextWrapMode.flowing);
+                this.setTextAlignment(textObj, text.alignment);
+                this.setOverflow(textObj, text);
+                if (newModel.material)
+                    textObj.material = newModel.material;
+                textObj.pointSize = this.convertToTextSize(text.fontSize);
+                textObj.depth = .001;
+                textObj.writeTo(undefined, writer);
+            });
+        }
+    }
+    private convertToTextSize(pixel: number) {
+        return 1 / 0.0502 * 144 * pixel;
+    }
+    private setOverflow(textObj: USDZText, text: Text) {
+        if (text.horizontalOverflow) {
+            textObj.wrapMode = TextWrapMode.singleLine;
+        }
+        else {
+            textObj.wrapMode = TextWrapMode.flowing;
+        }
+    }
+    private setTextAlignment(text: USDZText, alignment: TextAnchor) {
+        switch (alignment) {
+            case TextAnchor.LowerLeft:
+            case TextAnchor.MiddleLeft:
+            case TextAnchor.UpperLeft:
+                text.horizontalAlignment = HorizontalAlignment.left;
+                break;
+            case TextAnchor.LowerCenter:
+            case TextAnchor.MiddleCenter:
+            case TextAnchor.UpperCenter:
+                text.horizontalAlignment = HorizontalAlignment.center;
+                break;
+            case TextAnchor.LowerRight:
+            case TextAnchor.MiddleRight:
+            case TextAnchor.UpperRight:
+                text.horizontalAlignment = HorizontalAlignment.right;
+                break;
+        }
+        switch (alignment) {
+            case TextAnchor.LowerLeft:
+            case TextAnchor.LowerCenter:
+            case TextAnchor.LowerRight:
+                text.verticalAlignment = VerticalAlignment.bottom;
+                break;
+            case TextAnchor.MiddleLeft:
+            case TextAnchor.MiddleCenter:
+            case TextAnchor.MiddleRight:
+                text.verticalAlignment = VerticalAlignment.middle;
+                break;
+            case TextAnchor.UpperLeft:
+            case TextAnchor.UpperCenter:
+            case TextAnchor.UpperRight:
+                text.verticalAlignment = VerticalAlignment.top;
+                break;
+        }
+    }
 }

src/engine-components/webxr/WebXR.ts CHANGED Viewed

@@ -241,7 +241,7 @@
         this.context.domElement.append(buttonsContainer);
         // AR support
-        // if (this.enableAR && this.createARButton && arSupported)
+        if (this.enableAR && this.createARButton && arSupported)
         {
             arButton = WebXR.createARButton(this);
             this._arButton = arButton;