@webspatial/core-sdk 0.0.1-alpha

package/src/core/private/WebSpatial.ts

@@ -0,0 +1,356 @@
+import { RemoteCommand } from './remote-command'
+import {
+  WindowStyle,
+  WindowContainerOptions,
+  LoadingMethodKind,
+  sceneDataShape,
+  sceneDataJSBShape,
+} from '../types'
+
+export class WindowContainer {
+  id = ''
+}
+
+export class WebSpatialResource {
+  id = ''
+  windowContainerId = ''
+  data = {} as any
+
+  receiveEvent() {}
+}
+
+export class WebSpatial {
+  public static eventPromises: any = {}
+
+  public static transactionStarted = false
+  public static transactionCommands = Array<RemoteCommand>()
+
+  // store event receivers
+  private static eventReceivers: { [resourceId: string]: (data: any) => void } =
+    {}
+
+  public static registerEventReceiver(
+    resourceId: string,
+    callback: (data: any) => void,
+  ) {
+    this.eventReceivers[resourceId] = callback
+  }
+
+  public static unregisterEventReceiver(resourceId: string) {
+    delete this.eventReceivers[resourceId]
+  }
+
+  static init() {
+    ;(window as any).__SpatialWebEvent = (e: any) => {
+      if (e.resourceId) {
+        var callback = WebSpatial.eventReceivers[e.resourceId]
+        callback(e.data)
+      } else {
+        var p = WebSpatial.eventPromises[e.requestID]
+        if (p) {
+          if (e.success) {
+            p.res(e)
+          } else {
+            p.rej(e)
+          }
+        }
+      }
+    }
+  }
+
+  static startTransaction() {
+    WebSpatial.transactionStarted = true
+    WebSpatial.transactionCommands = []
+  }
+
+  static async sendTransaction() {
+    WebSpatial.transactionStarted = false
+    var cmd = new RemoteCommand('multiCommand', {
+      commandList: WebSpatial.transactionCommands,
+    })
+
+    var result = await new Promise((res, rej) => {
+      WebSpatial.eventPromises[cmd.requestID] = { res: res, rej: rej }
+      WebSpatial.sendCommand(cmd)
+    })
+    return result
+  }
+
+  static getBackend() {
+    if ((window as any).webkit) {
+      return 'AVP'
+    } else {
+      return 'UNKNOWN'
+    }
+  }
+
+  static async sendCommand(cmd: RemoteCommand) {
+    if ((window as any).__WebSpatialUnloaded) {
+      return
+    }
+    if (WebSpatial.transactionStarted) {
+      WebSpatial.transactionCommands.push(cmd as any)
+      return
+    }
+
+    var msg = JSON.stringify(cmd)
+
+    if (WebSpatial.getBackend() == 'AVP') {
+      ;(window as any).webkit.messageHandlers.bridge.postMessage(msg)
+      return
+    } else {
+      ;(window as any).bridge.nativeMessage(msg)
+      return
+    }
+  }
+
+  static getImmersiveWindowContainer() {
+    var wg = new WindowContainer()
+    wg.id = 'Immersive'
+    return wg
+  }
+
+  static getCurrentWindowContainer() {
+    var wg = new WindowContainer()
+    wg.id = 'current'
+    return wg
+  }
+
+  static getCurrentWebPanel() {
+    var wg = new WebSpatialResource()
+    wg.id = 'current'
+    wg.windowContainerId = WebSpatial.getCurrentWindowContainer().id
+    return wg
+  }
+
+  static async createScene(
+    style: WindowStyle = 'Plain',
+    cfg: {
+      sceneData: sceneDataShape
+    },
+  ) {
+    const { window: newWindow, ...sceneData } = cfg.sceneData
+    const jsbSceneData: sceneDataJSBShape = {
+      ...sceneData,
+      windowID: (newWindow as any)._webSpatialID,
+      windowContainerID: (newWindow as any)._webSpatialGroupID,
+    }
+    var cmd = new RemoteCommand('createScene', {
+      windowStyle: style,
+      sceneData: jsbSceneData,
+      windowContainerID: (window as any)._webSpatialParentGroupID, // parent WindowContainerID
+    })
+
+    try {
+      await new Promise((res, rej) => {
+        WebSpatial.eventPromises[cmd.requestID] = { res: res, rej: rej }
+        WebSpatial.sendCommand(cmd)
+      })
+      return true
+    } catch (error) {
+      return false
+    }
+  }
+
+  static async createWindowContainer(
+    style: WindowStyle = 'Plain',
+    windowContainer: WindowContainer | null,
+    parentWebView: WebSpatialResource | null,
+  ) {
+    var cmd = new RemoteCommand('createWindowContainer', {
+      windowStyle: style,
+      windowContainerID: windowContainer ? windowContainer.id : undefined,
+      resourceID: parentWebView ? parentWebView.id : undefined,
+    })
+
+    var result = await new Promise((res, rej) => {
+      WebSpatial.eventPromises[cmd.requestID] = { res: res, rej: rej }
+      WebSpatial.sendCommand(cmd)
+    })
+    var res = new WindowContainer()
+    res.id = (result as any).data.createdID
+    return res
+  }
+
+  static async destroyResource(resource: WebSpatialResource) {
+    const data = {}
+    var cmd = new RemoteCommand('destroyResource', {
+      windowContainerID: resource.windowContainerId,
+      resourceID: resource.id,
+    })
+
+    WebSpatial.sendCommand(cmd)
+  }
+
+  static async ping(msg: string) {
+    var cmd = new RemoteCommand('ping', {
+      windowContainerID: this.getCurrentWindowContainer().id,
+      resourceID: this.getCurrentWebPanel().id,
+      message: msg,
+    })
+
+    if (WebSpatial.transactionStarted) {
+      WebSpatial.sendCommand(cmd)
+      return null
+    } else {
+      var result = await new Promise((res, rej) => {
+        WebSpatial.eventPromises[cmd.requestID] = { res: res, rej: rej }
+        WebSpatial.sendCommand(cmd)
+      })
+      return result
+    }
+  }
+
+  static async getStats() {
+    var cmd = new RemoteCommand('getStats', {
+      windowContainerID: this.getCurrentWindowContainer().id,
+      resourceID: this.getCurrentWebPanel().id,
+    })
+
+    var result = await new Promise((res, rej) => {
+      WebSpatial.eventPromises[cmd.requestID] = { res: res, rej: rej }
+      WebSpatial.sendCommand(cmd)
+    })
+    return (result as any).data
+  }
+
+  static async inspect(spatialObjectId: string) {
+    var cmd = new RemoteCommand('inspect', {
+      resourceID: spatialObjectId,
+    })
+
+    var result = await new Promise((res, rej) => {
+      WebSpatial.eventPromises[cmd.requestID] = { res: res, rej: rej }
+      WebSpatial.sendCommand(cmd)
+    })
+
+    return (result as any).data
+  }
+
+  static async inspectRootWindowContainer() {
+    return this.inspect('root')
+  }
+
+  static async setComponent(
+    entity: WebSpatialResource,
+    resource: WebSpatialResource,
+  ) {
+    var cmd = new RemoteCommand('setComponent', {
+      windowContainerID: entity.windowContainerId,
+      resourceID: resource.id,
+      entityID: entity.id,
+    })
+
+    WebSpatial.sendCommand(cmd)
+  }
+
+  static async removeComponent(
+    entity: WebSpatialResource,
+    resource: WebSpatialResource,
+  ) {
+    var cmd = new RemoteCommand('removeComponent', {
+      windowContainerID: entity.windowContainerId,
+      resourceID: resource.id,
+      entityID: entity.id,
+    })
+
+    WebSpatial.sendCommand(cmd)
+  }
+
+  // windowContainer is the group the resource will be tied to (if not provided it will use the current window grou)
+  // parentWebView is the SpatialWebView that the resource will be tied to (if not provided, resource will continue to exist even if this page is unloaded)
+  static async createResource(
+    type: string,
+    windowContainer: WindowContainer,
+    parentWebView: WebSpatialResource,
+    params = {} as any,
+  ) {
+    var cmd = new RemoteCommand('createResource', {
+      windowContainerID: windowContainer.id,
+      resourceID: parentWebView.id,
+      type: type,
+      params: params,
+    })
+
+    var result = await new Promise((res, rej) => {
+      WebSpatial.eventPromises[cmd.requestID] = { res: res, rej: rej }
+      WebSpatial.sendCommand(cmd)
+    })
+    var res = new WebSpatialResource()
+    res.id = (result as any).data.createdID
+    res.windowContainerId = cmd.data.windowContainerID
+    return res
+  }
+
+  static async updateWindowContainer(wg: WindowContainer, data: any) {
+    var cmd = new RemoteCommand('updateWindowContainer', {
+      windowContainerID: wg.id,
+      update: data,
+    })
+
+    var result = await new Promise((res, rej) => {
+      WebSpatial.eventPromises[cmd.requestID] = { res: res, rej: rej }
+      WebSpatial.sendCommand(cmd)
+    })
+    return result
+  }
+
+  static async updateResource(resource: WebSpatialResource, data: any = null) {
+    var cmd = new RemoteCommand('updateResource', {
+      windowContainerID: resource.windowContainerId,
+      resourceID: resource.id,
+      update: data || resource.data,
+    })
+
+    var result = await new Promise((res, rej) => {
+      WebSpatial.eventPromises[cmd.requestID] = { res: res, rej: rej }
+      WebSpatial.sendCommand(cmd)
+    })
+    return result
+  }
+
+  static async setLoading(method: LoadingMethodKind, style?: string) {
+    var cmd = new RemoteCommand('setLoading', {
+      windowContainerID: (window as any)._webSpatialParentGroupID, // parent WindowContainerID
+      loading: {
+        method,
+        style,
+      },
+    })
+
+    var result = await new Promise((res, rej) => {
+      WebSpatial.eventPromises[cmd.requestID] = { res: res, rej: rej }
+      WebSpatial.sendCommand(cmd)
+    })
+    return result
+  }
+
+  static async openImmersiveSpace() {
+    var cmd = new RemoteCommand('openImmersiveSpace')
+    await WebSpatial.sendCommand(cmd)
+  }
+
+  static async dismissImmersiveSpace() {
+    var cmd = new RemoteCommand('dismissImmersiveSpace')
+    await WebSpatial.sendCommand(cmd)
+  }
+
+  static onFrame(fn: (curTime: number) => Promise<any>) {
+    var dt = 0
+    var loop = async () => {
+      var curTime = window.performance.now()
+      await fn(curTime)
+      var updateTime = window.performance.now() - curTime
+
+      // Call update loop targetting 60 fps
+      setTimeout(
+        () => {
+          loop()
+        },
+        Math.max(1000 / 60 - updateTime, 0),
+      )
+    }
+    loop()
+  }
+}
+WebSpatial.init()

package/src/core/private/remote-command/RemoteCommand.ts

@@ -0,0 +1,15 @@
+export class RemoteCommand {
+  private static requestCounter = 0
+
+  command: string
+
+  data: any
+
+  requestID: number
+
+  constructor(cmd: string, data?: any) {
+    this.command = cmd
+    this.data = data
+    this.requestID = ++RemoteCommand.requestCounter
+  }
+}

package/src/core/private/remote-command/index.ts

@@ -0,0 +1 @@
+export { RemoteCommand } from './RemoteCommand'

package/src/core/resource/SpatialMeshResource.ts

@@ -0,0 +1,6 @@
+import { SpatialObject } from '../SpatialObject'
+
+/**
+ * Mesh asset containing geometry
+ */
+export class SpatialMeshResource extends SpatialObject {}

package/src/core/resource/SpatialPhysicallyBasedMaterialResource.ts

@@ -0,0 +1,42 @@
+import { SpatialModelComponent } from '../component'
+import { WebSpatial } from '../private/WebSpatial'
+import { SpatialObject } from '../SpatialObject'
+
+/**
+ * PBR material which can be set on a SpatialModelComponent
+ */
+export class SpatialPhysicallyBasedMaterialResource extends SpatialObject {
+  /**
+   * Base color of the material containing rgba between 0 and 1
+   */
+  baseColor = { r: 0.0, g: 0.7, b: 0.7, a: 1.0 }
+  /**
+   * PBR metalic value between 0 and 1
+   */
+  metallic = { value: 0.5 }
+  /**
+   * PBR roughness value between 0 and 1
+   */
+  roughness = { value: 0.5 }
+
+  _modelComponentAttachedTo: { [key: string]: SpatialModelComponent } = {}
+  _addToComponent(c: SpatialModelComponent) {
+    this._modelComponentAttachedTo[c._resource.id] = c
+  }
+
+  /**
+   * Syncs state of color, metallic, roupghness to the renderer
+   */
+  async update() {
+    await WebSpatial.updateResource(this._resource, {
+      baseColor: this.baseColor,
+      metallic: this.metallic,
+      roughness: this.roughness,
+    })
+
+    // Since realitykit's materials are structs and not references, every time we change a material, we must copy it to all of the components its attached to to observe the update
+    for (var key in this._modelComponentAttachedTo) {
+      await this._modelComponentAttachedTo[key]._syncMaterials()
+    }
+  }
+}

package/src/core/resource/index.ts

@@ -0,0 +1,2 @@
+export { SpatialMeshResource } from './SpatialMeshResource'
+export { SpatialPhysicallyBasedMaterialResource } from './SpatialPhysicallyBasedMaterialResource'

package/src/core/types.ts

@@ -0,0 +1,27 @@
+export type WindowStyle = 'Plain' | 'Volumetric'
+
+export interface WindowContainerOptions {
+  defaultSize?: {
+    width: number // Initial width of the window
+    height: number // Initial height of the window
+  }
+
+  resizability?: 'automatic' | 'contentSize' | 'contentMinSize'
+}
+
+export type LoadingMethodKind = 'show' | 'hide'
+
+export interface sceneDataShape {
+  method?: 'createRoot' | 'showRoot'
+  sceneConfig?: WindowContainerOptions
+  url?: string
+  window: Window
+}
+
+export interface sceneDataJSBShape {
+  method?: 'createRoot' | 'showRoot'
+  sceneConfig?: WindowContainerOptions
+  url?: string
+  windowID?: string
+  windowContainerID?: string
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './core/index'

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "allowJs": false,
+    /* Bundler mode */
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false,
+    "declaration": true,
+    "declarationMap": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "outDir": "./dist",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src/index.ts"],
+  "references": []
+}