WXImmersal/components/xr-start/index.js

const SERVER_LOCALIZE = 'localize'

const originalCanvas = wx.createOffscreenCanvas({type: '2d', width: 2, height: 2})
const targetCanvas = wx.createOffscreenCanvas({type: '2d', width: 2, height: 2})
const originalCtx = originalCanvas.getContext('2d')
const targetCtx = targetCanvas.getContext('2d')

let startTime = null
let isLocalizing = false

// components/xr-start/index.js
Component({

  /**
   * Component properties
   */
  properties: 
  {
  },

  /**
   * Component initial data
   */
  data: 
  {
    loaded: false,
    arReady: false,
    // serverUrl: 'https://api.immersal.com',
    // developerToken: '<your token>',
    // mapIds: [88263]
    serverUrl: 'https://immersal.hexagon.com.cn',
    //developerToken: 'af9b02252f43f8843dbb7f78b5bd79a1a3d6ea872387057a2cd83646ade6e360',
    //mapIds: [1903]

    developerToken: 'aa484c64c5664ede765b54cc3ae6ba584924cd8d9b650678f7844139ecc79e2a',
    mapIds: [88985]
  },

  /**
   * Component methods
   */
  methods: 
  {
    handleReady: function ({detail}) {
      this.scene = detail.value
      wx.showToast({title: 'Scene initialized!'})
    },
    handleAssetsLoaded: function({detail}) {
      this.setData({loaded: true})
      this.scene.event.add('touchstart', () => {
        this.prepareImageData()
      })
    },
    prepareImageData: async function() {
      if (isLocalizing)
        return
      isLocalizing = true
      const xrFrameSystem = wx.getXrFrameSystem()
      const arRawData = this.scene.ar.getARRawData()
      const viewMatrix = new (xrFrameSystem.Matrix4)(arRawData.viewMatrix)
      const trackerSpace = viewMatrix.inverse().clone()
      const intrinsics = {
        fx: arRawData.intrinsics[0],
        fy: arRawData.intrinsics[4],
        ox: arRawData.intrinsics[6],
        oy: arRawData.intrinsics[7]
      }

      this.localize(trackerSpace, arRawData.yBuffer, arRawData.width, arRawData.height, intrinsics)
    },
    localize: function(trackerSpace, image, width, height, intrinsics) {
      console.log('localization start')

      const that = this
      const xrFrameSystem = wx.getXrFrameSystem()
      const json = {token: this.data.developerToken, fx: intrinsics.fx, fy: intrinsics.fy, ox: intrinsics.ox, oy: intrinsics.oy, mapIds: this._formatMapIds()}
      const jsonStr = JSON.stringify(json)
      const jsonBytes = new Array(jsonStr.length)

      for (let i = 0; i < jsonStr.length; i++) {
        jsonBytes[i] = jsonStr.charCodeAt(i)
      }

      const imgHeader = 'P5\n# Created by Immersal\n' + width + ' ' + height + '\n255\n'
      const headerBytes = new Array(imgHeader.length)
      for (let i = 0; i < imgHeader.length; i++) {
        headerBytes[i] = imgHeader.charCodeAt(i)
      }

      const pgmBuffer = new ArrayBuffer(headerBytes.length + image.byteLength)
      const imgView = new Uint8Array(pgmBuffer)
      imgView.set(headerBytes, 0)
      imgView.set(new Uint8Array(image), headerBytes.length)

      const payload = new ArrayBuffer(jsonBytes.length + 1 + pgmBuffer.byteLength)
      const view = new Uint8Array(payload)
      view.set(jsonBytes, 0)
      view.set([0], jsonBytes.length)
      view.set(imgView, jsonBytes.length + 1)

      wx.request({
        url: this.data.serverUrl + '/' + SERVER_LOCALIZE,
        data: payload,
        method: 'POST',
        dataType: 'json',
        success: function(resp) {
          isLocalizing = false
          const data = resp.data

          wx.showToast({title: 'Localized: ' + JSON.stringify(data)})
          if (data.success) {
            const tex = that.scene.getNodeById('immersaltex')
            const immScene = that.scene.getNodeById('immersaltexScene')
            if (tex) {
              const cloudSpace = new (xrFrameSystem.Matrix4)()
              cloudSpace.setArray([
                  data.r00, data.r10, data.r20, 0,
                  -data.r01, -data.r11, -data.r21, 0,
                  -data.r02, -data.r12, -data.r22, 0,
                  data.px, data.py, data.pz, 1
              ])

              const cloudSpaceFinal = cloudSpace.zRotate(Math.PI/2)
              const m = trackerSpace.multiply(cloudSpaceFinal.inverse())
              
              let position = new (xrFrameSystem.Vector3)()
              let rotationM = new (xrFrameSystem.Matrix4)()
              let scale = new (xrFrameSystem.Vector3)()
              m.decomposeTransRotMatScale(position, rotationM, scale)
              const rotation = xrFrameSystem.Quaternion.createFromMatrix4(rotationM)
  
              tex.position.setValue(position.x, position.y, position.z)
              tex.quaternion.setValue(rotation.x, rotation.y, rotation.z, rotation.w)
              tex.scale.setValue(scale.x, scale.y, scale.z)

              immScene.position.setValue(position.x, position.y, position.z)
              immScene.quaternion.setValue(rotation.x, rotation.y, rotation.z, rotation.w)
            //  immScene.scale.setValue(scale.x, scale.y, scale.z)
            }
          }
        },
        fail: function(error) {
          isLocalizing = false
          wx.showModal({
              title: 'Failed!',
              content: '' + error.errno + '\n' + error.errMsg
          })
        }
      })
    },
    _formatMapIds: function() {
      const n = this.data.mapIds.length
      const mapIdArray = [n]
      for (let i = 0; i < n; i++) {
        mapIdArray[i] = {id: this.data.mapIds[i]}
      }
      return mapIdArray
    }
  }
})