@webspatial/core-sdk 0.0.1

package/dist/core/Spatial.d.ts

@@ -0,0 +1,27 @@
+import { SpatialSession } from './SpatialSession';
+/**
+ * Base object designed to be placed on navigator.spatial to mirror navigator.xr for webxr
+ */
+export declare class Spatial {
+    /**
+     * Requests a session object from the browser
+     * @returns The session or null if not availible in the current browser
+     * [TODO] discuss implications of this not being async
+     */
+    requestSession(): SpatialSession | null;
+    /**
+     * @returns true if web spatial is supported by this webpage
+     */
+    isSupported(): any;
+    /**
+     * Gets the native version, format is "x.x.x"
+     * @returns native version string
+     */
+    getNativeVersion(): any;
+    /**
+     * Gets the client version, format is "x.x.x"
+     * @returns client version string
+     */
+    getClientVersion(): string;
+}
+//# sourceMappingURL=Spatial.d.ts.map

package/dist/core/Spatial.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spatial.d.ts","sourceRoot":"","sources":["../../src/core/Spatial.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD;;GAEG;AACH,qBAAa,OAAO;IAClB;;;;OAIG;IACH,cAAc;IAWd;;OAEG;IACH,WAAW;IAOX;;;OAGG;IACH,gBAAgB;IAIhB;;;OAGG;IACH,gBAAgB;CAGjB"}

package/dist/core/Spatial.js

@@ -0,0 +1,41 @@
+import { SpatialSession } from './SpatialSession';
+/**
+ * Base object designed to be placed on navigator.spatial to mirror navigator.xr for webxr
+ */
+export class Spatial {
+    /**
+     * Requests a session object from the browser
+     * @returns The session or null if not availible in the current browser
+     * [TODO] discuss implications of this not being async
+     */
+    requestSession() {
+        if (this.isSupported() &&
+            this.getNativeVersion() === this.getClientVersion()) {
+            return new SpatialSession();
+        }
+        else {
+            return null;
+        }
+    }
+    /**
+     * @returns true if web spatial is supported by this webpage
+     */
+    isSupported() {
+        return (window.WebSpatailEnabled &&
+            this.getNativeVersion() === this.getClientVersion());
+    }
+    /**
+     * Gets the native version, format is "x.x.x"
+     * @returns native version string
+     */
+    getNativeVersion() {
+        return window.WebSpatailNativeVersion;
+    }
+    /**
+     * Gets the client version, format is "x.x.x"
+     * @returns client version string
+     */
+    getClientVersion() {
+        return '0.0.1';
+    }
+}

package/dist/core/SpatialEntity.d.ts

@@ -0,0 +1,92 @@
+import { SpatialObject } from './SpatialObject';
+import { SpatialTransform } from './SpatialTransform';
+import { SpatialWindowContainer } from './SpatialWindowContainer';
+import { SpatialComponent } from './component';
+/**
+ * Entity used to describe an object that can be added to the scene
+ */
+export declare class SpatialEntity extends SpatialObject {
+    /**
+     * Transform corresponding to the entity
+     * note: updateTransform must be called for transform to be synced to rendering
+     */
+    transform: SpatialTransform;
+    /** @hidden */
+    private _destroyed;
+    /** @hidden */
+    private get _entity();
+    /**
+     * Syncs the transform with the renderer, must be called to observe updates
+     */
+    updateTransform(): Promise<void>;
+    /**
+     * Syncs the zIndex with the renderer
+     */
+    updateZIndex(zIndex: number): Promise<void>;
+    private components;
+    /**
+     * Attaches a component to the entity to be displayed
+     * [TODO] review pass by value vs ref and ownership model for this
+     */
+    setComponent(component: SpatialComponent): Promise<void>;
+    /**
+     * Removes a component from the entity
+     */
+    removeComponent<T extends SpatialComponent>(type: new (...args: any[]) => T): Promise<void>;
+    /**
+     * Gets a component from the entity
+     */
+    getComponent<T extends SpatialComponent>(type: new (...args: any[]) => T): T | undefined;
+    /**
+     * @hidden
+     * Sets the window container that this entity should be rendered by (this does not effect resource ownership)
+     * @param wg the window container that should render this entity
+     */
+    _setParentWindowContainer(wg: SpatialWindowContainer): Promise<void>;
+    /**
+     * Sets a parent entity, if that entity or its parents are attached to a window container, this entity will be displayed
+     * @param e parent entity or null to remove current parent
+     */
+    setParent(e: SpatialEntity | null): Promise<void>;
+    /**
+     * Sets the coordinate space of this entity (Default: App)
+     * "App" = game engine style coordinates in meters
+     * "Dom" = Windowing coordinates in dom units (eg. 0,0,0 is top left of window)
+     * "Root" = Coordinate space is ignored and content is displayed and updated as window container's root object, window containers can only have one root entity
+     * [TODO] review this api
+     * @param space coordinate space mode
+     */
+    setCoordinateSpace(space: 'App' | 'Dom' | 'Root'): Promise<void>;
+    /**
+     * Query the 3d boudning box of the entity
+     * @returns The bounding box of the entity
+     */
+    getBoundingBox(): Promise<{
+        center: {
+            x: number;
+            y: number;
+            z: number;
+        };
+        extents: {
+            x: number;
+            y: number;
+            z: number;
+        };
+    }>;
+    /**
+     * Sets if the entity should be visible (default: True)
+     * @param visible
+     */
+    setVisible(visible: boolean): Promise<void>;
+    /**
+     * Removes a reference to the entity by the renderer and this object should no longer be used. [TODO] Attached components will not be destroyed
+     */
+    destroy(): Promise<void>;
+    /**
+     * Check if destroy has been called
+     */
+    isDestroyed(): boolean;
+    /** @hidden */
+    _setName(name: string): Promise<unknown>;
+}
+//# sourceMappingURL=SpatialEntity.d.ts.map

package/dist/core/SpatialEntity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpatialEntity.d.ts","sourceRoot":"","sources":["../../src/core/SpatialEntity.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAE9C;;GAEG;AACH,qBAAa,aAAc,SAAQ,aAAa;IAC9C;;;OAGG;IACH,SAAS,mBAAyB;IAElC,cAAc;IACd,OAAO,CAAC,UAAU,CAAQ;IAC1B,cAAc;IACd,OAAO,KAAK,OAAO,GAElB;IAED;;OAEG;IACG,eAAe;IAIrB;;OAEG;IACG,YAAY,CAAC,MAAM,EAAE,MAAM;IAIjC,OAAO,CAAC,UAAU,CAA6C;IAE/D;;;OAGG;IACG,YAAY,CAAC,SAAS,EAAE,gBAAgB;IAK9C;;OAEG;IACG,eAAe,CAAC,CAAC,SAAS,gBAAgB,EAC9C,IAAI,EAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC;IASjC;;OAEG;IACH,YAAY,CAAC,CAAC,SAAS,gBAAgB,EACrC,IAAI,EAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,GAC9B,CAAC,GAAG,SAAS;IAIhB;;;;OAIG;IACG,yBAAyB,CAAC,EAAE,EAAE,sBAAsB;IAM1D;;;OAGG;IACG,SAAS,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAMvC;;;;;;;OAOG;IACG,kBAAkB,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM;IAItD;;;OAGG;IACG,cAAc;gBAKR;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE;iBAClC;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE;;IAIhD;;;OAGG;IACG,UAAU,CAAC,OAAO,EAAE,OAAO;IAIjC;;OAEG;IACG,OAAO;IAKb;;OAEG;IACH,WAAW;IAKX,cAAc;IACR,QAAQ,CAAC,IAAI,EAAE,MAAM;CAG5B"}

package/dist/core/SpatialEntity.js

@@ -0,0 +1,121 @@
+import { SpatialObject } from './SpatialObject';
+import { SpatialTransform } from './SpatialTransform';
+import { WebSpatial } from './private/WebSpatial';
+/**
+ * Entity used to describe an object that can be added to the scene
+ */
+export class SpatialEntity extends SpatialObject {
+    /**
+     * Transform corresponding to the entity
+     * note: updateTransform must be called for transform to be synced to rendering
+     */
+    transform = new SpatialTransform();
+    /** @hidden */
+    _destroyed = false;
+    /** @hidden */
+    get _entity() {
+        return this._resource;
+    }
+    /**
+     * Syncs the transform with the renderer, must be called to observe updates
+     */
+    async updateTransform() {
+        await WebSpatial.updateResource(this._entity, this.transform);
+    }
+    /**
+     * Syncs the zIndex with the renderer
+     */
+    async updateZIndex(zIndex) {
+        await WebSpatial.updateResource(this._entity, { zIndex });
+    }
+    components = new Map();
+    /**
+     * Attaches a component to the entity to be displayed
+     * [TODO] review pass by value vs ref and ownership model for this
+     */
+    async setComponent(component) {
+        await WebSpatial.setComponent(this._entity, component._resource);
+        this.components.set(component.constructor, component);
+    }
+    /**
+     * Removes a component from the entity
+     */
+    async removeComponent(type) {
+        var c = this.getComponent(type);
+        if (c != undefined) {
+            await WebSpatial.removeComponent(this._entity, c._resource);
+            this.components.delete(c.constructor);
+        }
+    }
+    /**
+     * Gets a component from the entity
+     */
+    getComponent(type) {
+        return this.components.get(type);
+    }
+    /**
+     * @hidden
+     * Sets the window container that this entity should be rendered by (this does not effect resource ownership)
+     * @param wg the window container that should render this entity
+     */
+    async _setParentWindowContainer(wg) {
+        await WebSpatial.updateResource(this._entity, {
+            setParentWindowContainerID: wg._wg.id,
+        });
+    }
+    /**
+     * Sets a parent entity, if that entity or its parents are attached to a window container, this entity will be displayed
+     * @param e parent entity or null to remove current parent
+     */
+    async setParent(e) {
+        await WebSpatial.updateResource(this._entity, {
+            setParent: e ? e._entity.id : '',
+        });
+    }
+    /**
+     * Sets the coordinate space of this entity (Default: App)
+     * "App" = game engine style coordinates in meters
+     * "Dom" = Windowing coordinates in dom units (eg. 0,0,0 is top left of window)
+     * "Root" = Coordinate space is ignored and content is displayed and updated as window container's root object, window containers can only have one root entity
+     * [TODO] review this api
+     * @param space coordinate space mode
+     */
+    async setCoordinateSpace(space) {
+        await WebSpatial.updateResource(this._entity, { setCoordinateSpace: space });
+    }
+    /**
+     * Query the 3d boudning box of the entity
+     * @returns The bounding box of the entity
+     */
+    async getBoundingBox() {
+        var res = await WebSpatial.updateResource(this._entity, {
+            getBoundingBox: true,
+        });
+        return res.data;
+    }
+    /**
+     * Sets if the entity should be visible (default: True)
+     * @param visible
+     */
+    async setVisible(visible) {
+        await WebSpatial.updateResource(this._entity, { visible });
+    }
+    /**
+     * Removes a reference to the entity by the renderer and this object should no longer be used. [TODO] Attached components will not be destroyed
+     */
+    async destroy() {
+        this._destroyed = true;
+        await WebSpatial.destroyResource(this._entity);
+    }
+    /**
+     * Check if destroy has been called
+     */
+    isDestroyed() {
+        return this._destroyed;
+    }
+    // Set Entity name. Currently for debugging only.
+    /** @hidden */
+    async _setName(name) {
+        return WebSpatial.updateResource(this._entity, { name });
+    }
+}

package/dist/core/SpatialHelper.d.ts

@@ -0,0 +1,39 @@
+import { StyleParam } from './component';
+import { SpatialEntity } from './SpatialEntity';
+import { SpatialSession } from './SpatialSession';
+/**
+ * Helper class used to quickly add spatial content to standard web pages
+ * [Experimental] expect APIs to potentially change in future versions
+ */
+export declare class SpatialHelper {
+    session: SpatialSession;
+    private static _instance;
+    static get instance(): SpatialHelper | null;
+    constructor(session: SpatialSession);
+    shape: {
+        createShapeEntity: (shape?: string) => Promise<SpatialEntity>;
+        createModelEntity: (url: string) => Promise<SpatialEntity>;
+        wrapInBoundingBoxEntity: (entityToWrap: SpatialEntity) => Promise<SpatialEntity>;
+    };
+    navigation: {
+        openPanel: (url: string, options?: {
+            resolution: {
+                width: number;
+                height: number;
+            };
+        }) => Promise<void>;
+        openVolume: (url: string, options?: {
+            resolution: {
+                width: number;
+                height: number;
+            };
+        }) => Promise<void>;
+    };
+    dom: {
+        attachSpatialView: (divOnPage: HTMLElement) => Promise<{
+            entity: SpatialEntity;
+        }>;
+    };
+    setBackgroundStyle: (style: StyleParam, backgroundColor?: string) => Promise<void>;
+}
+//# sourceMappingURL=SpatialHelper.d.ts.map

package/dist/core/SpatialHelper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpatialHelper.d.ts","sourceRoot":"","sources":["../../src/core/SpatialHelper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,UAAU,EAAE,MAAM,aAAa,CAAA;AAE9D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAGjD;;;GAGG;AACH,qBAAa,aAAa;IAkBL,OAAO,EAAE,cAAc;IAjB1C,OAAO,CAAC,MAAM,CAAC,SAAS,CAA6B;IACrD,MAAM,KAAK,QAAQ,yBAclB;gBAEkB,OAAO,EAAE,cAAc;IAE1C,KAAK;;iCAiB4B,MAAM;gDAOS,aAAa;MAsB5D;IAED,UAAU;yBAED,MAAM,YACD;YAAE,UAAU,EAAE;gBAAE,KAAK,EAAE,MAAM,CAAC;gBAAC,MAAM,EAAE,MAAM,CAAA;aAAE,CAAA;SAAE;0BA2BtD,MAAM,YACD;YAAE,UAAU,EAAE;gBAAE,KAAK,EAAE,MAAM,CAAC;gBAAC,MAAM,EAAE,MAAM,CAAA;aAAE,CAAA;SAAE;MA2B9D;IAED,GAAG;uCACoC,WAAW;;;MAgDjD;IAED,kBAAkB,UACT,UAAU,6CAKlB;CACF"}

package/dist/core/SpatialHelper.js

@@ -0,0 +1,169 @@
+import { SpatialViewComponent } from './component';
+import { Spatial } from './Spatial';
+import { Vec3 } from './SpatialTransform';
+/**
+ * Helper class used to quickly add spatial content to standard web pages
+ * [Experimental] expect APIs to potentially change in future versions
+ */
+export class SpatialHelper {
+    session;
+    static _instance = null;
+    static get instance() {
+        if (this._instance) {
+            return this._instance;
+        }
+        else {
+            let spatial = new Spatial();
+            if (spatial.isSupported()) {
+                let session = spatial.requestSession();
+                if (session) {
+                    this._instance = new SpatialHelper(session);
+                    return this._instance;
+                }
+            }
+        }
+        return null;
+    }
+    constructor(session) {
+        this.session = session;
+    }
+    shape = {
+        createShapeEntity: async (shape = 'box') => {
+            var box = await this.session.createMeshResource({ shape: shape });
+            var mat = await this.session.createPhysicallyBasedMaterialResource();
+            await mat.update();
+            var customModel = await this.session.createModelComponent();
+            customModel.setMaterials([mat]);
+            customModel.setMesh(box);
+            var boxEntity = await this.session.createEntity();
+            await boxEntity.setComponent(customModel);
+            boxEntity.transform.position.z = 0;
+            boxEntity.transform.scale = new Vec3(0.5, 0.5, 0.5);
+            await boxEntity.updateTransform();
+            return boxEntity;
+        },
+        createModelEntity: async (url) => {
+            var customModel = await this.session.createModelComponent({ url });
+            var boxEntity = await this.session.createEntity();
+            await boxEntity.setComponent(customModel);
+            await boxEntity.updateTransform();
+            return boxEntity;
+        },
+        wrapInBoundingBoxEntity: async (entityToWrap) => {
+            var bb = await entityToWrap.getBoundingBox();
+            // Scale to fit
+            var targetSize = 1.0;
+            var scale = targetSize / Math.max(bb.extents.x, bb.extents.y, bb.extents.z);
+            entityToWrap.transform.scale.x = scale;
+            entityToWrap.transform.scale.y = scale;
+            entityToWrap.transform.scale.z = scale;
+            // Center within view
+            entityToWrap.transform.position.x = -bb.center.x * scale;
+            entityToWrap.transform.position.y = -bb.center.y * scale;
+            entityToWrap.transform.position.z = -bb.center.z * scale;
+            await entityToWrap.updateTransform();
+            // wrap in boudning box
+            var boudningEntity = await SpatialHelper.instance?.session.createEntity();
+            await entityToWrap.setParent(boudningEntity);
+            return boudningEntity;
+        },
+    };
+    navigation = {
+        openPanel: async (url, options) => {
+            if (options?.resolution) {
+                await this.session
+                    .getCurrentWindowContainer()
+                    ._setOpenSettings({ resolution: options.resolution });
+            }
+            // Create window container
+            var wg = await this.session.createWindowContainer({ style: 'Plain' });
+            // Create a root entity displaying a webpage
+            var ent = await this.session.createEntity();
+            var i = await this.session.createWindowComponent({ windowContainer: wg });
+            await i.loadURL(url);
+            await ent.setCoordinateSpace('Root');
+            await ent.setComponent(i);
+            // Add enitity the window container
+            await wg.setRootEntity(ent);
+            // Restore default size
+            await this.session
+                .getCurrentWindowContainer()
+                ._setOpenSettings({ resolution: { width: 900, height: 700 } });
+        },
+        openVolume: async (url, options) => {
+            var wg = await this.session.createWindowContainer({ style: 'Volumetric' });
+            // Create a root view entity within the window container
+            var rootEnt = await this.session.createEntity();
+            await rootEnt.setComponent(await this.session.createViewComponent({ windowContainer: wg }));
+            await rootEnt.setCoordinateSpace('Root');
+            await wg.setRootEntity(rootEnt);
+            // Add webpage to the window container
+            var ent = await this.session.createEntity();
+            var i = await this.session.createWindowComponent({ windowContainer: wg });
+            await i.loadURL(url);
+            if (options?.resolution) {
+                await i.setResolution(options.resolution.width, options.resolution.height);
+            }
+            else {
+                await i.setResolution(1000, 1000);
+            }
+            ent.transform.position.z = -0.49;
+            await ent.updateTransform();
+            await ent.setCoordinateSpace('App');
+            await ent.setComponent(i);
+            await ent.setParent(rootEnt);
+        },
+    };
+    dom = {
+        attachSpatialView: async (divOnPage) => {
+            // Create SpatialView
+            var viewEnt = await this.session.createEntity();
+            await viewEnt.setCoordinateSpace('Dom'); // Set coordinate space so its transform is relative to the webpage's pixels
+            await viewEnt.setComponent(await this.session.createViewComponent());
+            // Add to the root window component to display
+            var wc = await this.session.getCurrentWindowComponent();
+            var ent = await wc.getEntity();
+            await viewEnt.setParent(ent);
+            // Keep spatialView positioned where the div is
+            var update = () => {
+                var rect = divOnPage.getBoundingClientRect();
+                viewEnt.transform.position.x = rect.x + rect.width / 2;
+                viewEnt.transform.position.y = rect.y + rect.height / 2 + window.scrollY;
+                viewEnt.updateTransform();
+                viewEnt
+                    .getComponent(SpatialViewComponent)
+                    .setResolution(rect.width, rect.height);
+            };
+            var mo = new MutationObserver(update);
+            mo.observe(divOnPage, { attributes: true });
+            var ro = new ResizeObserver(update);
+            ro.observe(divOnPage);
+            const addRemoveObserver = new MutationObserver(mutations => {
+                mutations.forEach(mutation => {
+                    mutation.removedNodes.forEach(node => {
+                        if (node instanceof HTMLElement) {
+                            update();
+                        }
+                    });
+                    mutation.addedNodes.forEach(node => {
+                        if (node instanceof HTMLElement) {
+                            update();
+                        }
+                    });
+                });
+            });
+            addRemoveObserver.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+            update();
+            return {
+                entity: viewEnt,
+            };
+        },
+    };
+    setBackgroundStyle = async (style, backgroundColor = '#00000000') => {
+        document.documentElement.style.backgroundColor = backgroundColor;
+        await this.session.getCurrentWindowComponent().setStyle(style);
+    };
+}

package/dist/core/SpatialObject.d.ts

@@ -0,0 +1,19 @@
+import { WebSpatialResource } from './private/WebSpatial';
+/**
+ * @hidden
+ * Parent class of spatial objects, should not be used directly
+ */
+export declare class SpatialObject {
+    /** @hidden */
+    _resource: WebSpatialResource;
+    /** @hidden */
+    constructor(
+    /** @hidden */
+    _resource: WebSpatialResource);
+    /**
+     * Marks resource to be released (it should no longer be used)
+     */
+    destroy(): Promise<void>;
+    protected onDestroy(): Promise<void>;
+}
+//# sourceMappingURL=SpatialObject.d.ts.map

package/dist/core/SpatialObject.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpatialObject.d.ts","sourceRoot":"","sources":["../../src/core/SpatialObject.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAEzD;;;GAGG;AACH,qBAAa,aAAa;IAGtB,cAAc;IACP,SAAS,EAAE,kBAAkB;IAHtC,cAAc;;IAEZ,cAAc;IACP,SAAS,EAAE,kBAAkB;IAGtC;;OAEG;IACG,OAAO;cAKG,SAAS;CAC1B"}

package/dist/core/SpatialObject.js

@@ -0,0 +1,22 @@
+import { WebSpatial } from './private/WebSpatial';
+/**
+ * @hidden
+ * Parent class of spatial objects, should not be used directly
+ */
+export class SpatialObject {
+    _resource;
+    /** @hidden */
+    constructor(
+    /** @hidden */
+    _resource) {
+        this._resource = _resource;
+    }
+    /**
+     * Marks resource to be released (it should no longer be used)
+     */
+    async destroy() {
+        await WebSpatial.destroyResource(this._resource);
+        await this.onDestroy();
+    }
+    async onDestroy() { }
+}