index.html

<!doctype html>
<html>
  <head>
    <meta http-equiv="origin-trial" content="AspvaSU7F1Gbpa8q9JRNRNXFF+0+77C1xkxf1hkzJCrBI7Mmt/eG25QXLBn7lfzPsgrN5next8ZtIiCeGs6R4w8AAABleyJvcmlnaW4iOiJodHRwczovL2V4b2tpdC5vcmc6NDQzIiwiZmVhdHVyZSI6IldlYlhSRGV2aWNlTTc2IiwiZXhwaXJ5IjoxNTcxMTEyNjU0LCJpc1N1YmRvbWFpbiI6dHJ1ZX0=">
    <style>
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  /* background-color: #000;
  color: #F5F5F5; */
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  font-size: 15px;
}
.body {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.body.fullscreen .header,
.body.fullscreen .sidebar,
.body.fullscreen .tools,
.body.fullscreen .iframe-buttons
{
  display: none;
}
.body.fullscreen .iframe-wrapper {
  margin-top: 0;
}
header {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  width: 100vw;
  height: 50px;
  background-color: #FFF;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
  align-items: center;
  user-select: none;
  z-index: 1;
}
.main-selector {
  outline: none;
}
.main-selector:hover .target,
.main-selector .options .option:hover
{
  background-color: #42a5f5;
  color: #FFF;
}
.main-selector:active .target,
.main-selector.open .target,
.main-selector .options .option:active,
.main-selector .options .option.open
{
  background-color: #1e88e5;
  color: #FFF;
}
.main-selector:hover .target .icon,
.main-selector.open .target .icon
{
  filter: invert(1);
}
.main-selector .target .icon {
  width: 50px;
  height: 50px;
  margin: 0 20px;
}
.main-selector .options {
  display: flex;
  position: absolute;
  top: 50px;
  left: 0;
  width: 300px;
  background-color: #FFF;
  color: #000;
  flex-direction: column;
}
.main-selector .options .option {
  padding: 15px;
}
.main-selector:not(.open) .options {
  display: none;
}
header nav {
  display: flex;
  height: 100%;
  padding: 0 10px;
  letter-spacing: 0.9px;
  align-items: center;
}
header nav span {
  display: flex;
  height: 30px;
  padding: 10px;
  border-radius: 4px;
  align-items: center;
  text-transform: uppercase;
}
header nav.selected span {
  background-color: #5c6bc0;
  color: #FFF;
  cursor: default;
}
header nav:not(.selected):not([disabled]):hover {
  cursor: pointer;
}
header nav:not(.selected):hover span {
  background-color: #EEE;
}
header:not(.main-2) .channel-select,
header:not(.main-3) .parcel-display
{
  display: none;
}
.channel-select {
  display: flex;
  position: relative;
  align-items: center;
}
.channel-select input[type=text] {
  height: 50px;
  border-radius: 0;
}
.parcel-display {
  display: flex;
}
.channels-content {
  display: flex;
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  flex-direction: column;
  background-color: #FFF;
}
.channels-content .a-channel {
  display: flex;
  padding: 5px;
  align-items: center;
  cursor: pointer;
}
.channels-content .a-channel:hover {
  background-color: #EEE;
}
.channels-content .a-channel:hover i {
  background-color: #000;
  color: #FFF;
}
.channels-content .a-channel i {
  display: flex;
  height: 50px;
  width: 50px;
  margin-right: 10px;
  background-color: #EEE;
  border-radius: 5px;
  font-size: 16px;
  justify-content: center;
  align-items: center;
}
.parcel-create,
.parcel-edit
{
  display: flex;
}
.parcel-create:not(.open),
.parcel-edit:not(.open)
{
  display: none;
}
.details-content h1,
.details-content h2,
.details-content h3,
.details-content h4,
.details-content h5,
.details-content h6,
.details-content p,
.details-content .multibutton
{
  margin: 15px 0;
  padding: 0 20px;
}
h1, h2, h3, h4, h5, h6, p {
  font-weight: inherit;
}
.screenshot-image {
  width: 100%;
}
.iframe-wrapper {
  position: relative;
  display: flex;
  margin-top: 50px;
  flex: 1;
  background-color: #000;
}
.tabs {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.tabs .tab {
  display: inline-flex;
  margin: 5px 5px;
  padding: 5px 10px;
  background-color: #D8D8D8;
  border-radius: 4px;
  color: #000;
  align-items: center;
}
.tabs .tab .text {
  margin-right: 10px;
  align-items: center;
}
.tabs .tab .close-x {
  display: flex;
  width: 20px;
  height: 20px;
  background-color: #ef5350;
  color: #FFF;
  justify-content: center;
  align-items: center;
}
canvas {
  width: 100% !important;
  height: 100% !important;
  /* background-color: #f8f8f8; */
  outline: none;
}
a {
  color: #AAA;
  text-decoration: none;
}
a:hover {
  color: #42a5f5;
}
a:active {
  color: #1976d2;
}
.tools {
  display: flex;
  position: absolute;
  top: 60px;
  left: 10px;
}
.tools > .tool {
  display: flex;
  width: 30px;
  height: 30px;
  justify-content: center;
  align-items: center;
  background-color: #EEE;
  font-size: 16px;
  /* color: #000; */
  cursor: pointer;
}
.tools > .tool:hover {
  background-color: #42a5f5;
  color: #FFF;
}
.tools > .tool:active, .tools > .tool.open {
  background-color: #1e88e5;
  color: #FFF;
}
.chat {
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 400px;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.chat > .messages {
  display: flex;
  flex-direction: column;
  padding: 7px 14px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  color: #FFF;
  pointer-events: all;
}
.chat > .messages:empty {
  display: none;
}
.chat > .input {
  width: 100%;
  /* background-color: transparent; */
  background-color: rgba(50, 50, 50, 0.5);
  color: #FFF;
  pointer-events: all;
}
.chat > .input:not(.open) {
  visibility: hidden;
}
.save-dialog {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 50px;
  left: 0;
  width: 300px;
  padding: 30px;
  background-color: #FFF;
}
.save-dialog:not(.open) {
  display: none;
}
.iframe-buttons {
  position: absolute;
  right: 330px;
  bottom: 30px;
}
.code-buttons {
  position: absolute;
  right: 30px;
  bottom: 30px;
  display: flex;
}
.multibutton {
  display: flex;
}
.multibutton .button:not(.first) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.multibutton .button:not(.last) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.button {
  display: inline-flex;
  margin-right: 5px;
  padding: 7px 14px;
  border: 2px solid;
  border-radius: 100px;
  color: #5c6bc0;
  font-size: 13px;
  outline: none
}
/* .button:not(:last-child) {
  margin-right: 20px;
} */
.button:not([disabled]):hover {
  background-color: #5c6bc0;
  border-color: #5c6bc0;
  color: #FFF;
  cursor: pointer;
}
.button[disabled] {
  color: #b71c1c;
}
#code-header:not(.open),
#code-button:not(.open) .opened-text,
#code-button.open .closed-text
{
  display: none;
}
.coming-soon {
  color: #ccc;
}
.coming-soon-sub {
  font-size: 10px;
  display: block;
}
.header-link {
  color: #666;
}
.code-header {
  position: absolute;
  top: 50px;
  right: 0;
  display: flex;
  align-items: center;
  width: 600px;
  height: 32px;
  padding: 5px;
  font-size: 13px;
  color: #4caf50;
  background-color: #f2f3f5;
}
.sidebar {
  /* display: flex; */
  margin-top: 50px;
  width: 300px;
  background-color: #FFF;
}
.sidebar .content-tabs, .sidebar .content-tabs .content-tab {
  background-color: #CCC;
}
.sidebar .content-tabs .content-tab {
  display: flex;
  position: relative;
  width: 50px;
  height: 50px;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #333;
  cursor: pointer;
}
.sidebar .content-tabs .content-tab:hover {
  background-color: #EEE;
  color: #000;
}
.sidebar .content-tabs .content-tab.open {
  background-color: #FFF;
  color: #5c6bc0;
}
.sidebar .content-tabs .content-tab .sub {
  display: flex;
  position: absolute;
  width: 100px;
  height: 50px;
  left: -100px;
  background-color: #333;
  color: #FFF;
  justify-content: center;
  align-items: center;
  visibility: hidden;
}
.sidebar .content-tabs .content-tab:hover .sub {
  visibility: visible;
}
.sidebar .content {
  flex: 1;
  overflow-y: auto;
}
.sidebar .content:not(.open) {
  display: none;
}
.iframe-wrapper video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.iframe-wrapper canvas {
  z-index: 1;
}
.iframe-wrapper textarea {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 50px;
  z-index: 2;
}
.site-urls-content .a-site,
.avatar-models-content .a-avatar,
.prefabs-content .a-prefab,
.inventory-content .a-file
{
  display: flex;
  position: relative;
  padding: 5px 0;
  cursor: pointer;
  overflow: hidden;
}
.site-urls-content .a-site img,
.avatar-models-content .a-avatar img,
.prefabs-content .a-prefab img,
.inventory-content .a-file i
{
  display: flex;
  width: 80px;
  height: 80px;
  margin-right: 10px;
  font-size: 50px;
  justify-content: center;
  align-items: center;
}
.site-urls-content .a-site img:not([src]),
.avatar-models-content .a-avatar img:not([src]),
.prefabs-content .a-prefab img:not([src]) {
  visibility: hidden;
}
.site-urls-content .a-site .wrap {
  flex: 1;
  overflow: hidden;
}
.site-urls-content .a-site .url {
  color: #666;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.prefabs-content .a-prefab .wrap {
  flex: 1;
  overflow: hidden;
}
.site-urls-content > .wrap {
  display: flex;
}
.site-urls-content input[type=text],
.avatar-models-content input[type=text],
.prefabs-content input[type=text]
{
  width: 100%;
  margin: 0;
  padding: 15px;
  border-radius: 0;
}
.site-urls-content .input-button {
  display: flex;
  width: 48px;
  height: 48px;
  background-color: #CCC;
  color: #333;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.site-urls-content .input-button:hover {
  background-color: #5c6bc0;
  color: #FFF;
}
.site-urls-content .input-button:active {
  background-color: #3949ab;
  color: #FFF;
}
.site-urls-content .a-site .wrap .label {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.site-urls-content .a-site .overlay,
.avatar-models-content .a-avatar .overlay,
.prefabs-content .a-prefab .overlay,
.inventory-content .a-file .overlay
{
  display: flex;
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 0;
  right: 0;
  padding: 10px;
  background-image: linear-gradient(to right, transparent, #FFF 50%);
  justify-content: flex-end;
  align-items: center;
  visibility: hidden;
}
.site-urls-content .a-site:hover .overlay,
.avatar-models-content .a-avatar:hover .overlay,
.prefabs-content .a-prefab:hover .overlay,
.inventory-content .a-file:hover .overlay
{
  visibility: visible;
}
.prefabs-content .end {
  width: 100%;
  height: 1px;
}
.selected-object-details,
.avatar-details,
/* .parcel-details, */
.placeholder-details
{
  display: none;
}
.selected-object-details.open,
.avatar-details.open,
/* .parcel-details.open, */
.selected-object-details:not(.open) + .avatar-details:not(.open) /* + .parcel-details:not(.open) */ + .placeholder-details
{
  display: block;
}
.switch-wrap {
  display: flex;
  align-items: center;
  color: #AAA;
  cursor: pointer;
  user-select: none;
  // transition: all 0.3s cubic-bezier(0, 1, 0, 1);
}
.switch {
  position: relative;
  margin-right: 5px;
  padding: 2px;
  border: 2px solid #AAA;
  border-radius: 100px;
  cursor: pointer;
  // transition: all 0.3s cubic-bezier(0, 1, 0, 1);
}
.switch::before {
  display: block;
  position: relative;
  height: 12px;
  width: 24px;
  background-color: #EEE;
  border-radius: 100px;
  content: '';
}
.switch::after {
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  height: 12px;
  width: 12px;
  background-color: #AAA;
  border-radius: 100px;
  content: '';
  // transition: all 0.3s cubic-bezier(0, 1, 0, 1);
}
.switch-wrap.on {
  color: #5c6bc0;
}
.switch-wrap.on .switch {
  border-color: #5c6bc0;
}
/* .switch.on::before {
  background-color: #BBB;
} */
.switch-wrap.on .switch::after {
  left: 14px;
  background-color: #5c6bc0;
}
input[type=button] {
  display: block;
}
.code {
  width: 100%;
  height: 100%;
  font-family: monospace;
  font-size: 14px;
  border: 0;
  outline: none;
}
.minibuttons {
  position: relative;
}
.minibuttons button {
  position: absolute;
  bottom: 0;
}
.minibuttons button + button {
  left: 50px;
}
.user-code {
  display: none;
}
input[type=text] {
  width: 160px;
  /* margin: 0 20px; */
  padding: 7px 14px;
  background-color: #f2f3f5;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: inherit;
  outline: none;
}

/* account.css */

input[type=email],
input[type=text]
{
  margin-right: 10px;
  padding: 7px 14px;
  background-color: #f2f3f5;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: inherit;
  outline: none;
}

header > .login-form {
  display: flex;
  margin-left: auto;
}

body.logging-in .login-form,
header > .login-form:not(.phase-1) > .phase-1-content,
header > .login-form:not(.phase-2) > .phase-2-content,
header > .login-form:not(.phase-3) > .phase-3-content,
header > .login-form.phase-1 > .phaseless-content,
header > .login-form.phase-2 > .phaseless-content,
header > .login-form.phase-3 > .phaseless-content
{
  display: none;
}

.login-form .phase-content {
  display: flex;
  align-items: center;
}
.login-form .phase-content .login-error
{
  margin-right: 15px;
  font-weight: 600;
}
.login-form .phase-content .user-button {
  display: flex;
  height: 30px;
  margin-right: 10px;
  padding: 3px 10px;
  background-color: #f2f3f5;
  border: 0;
  border-radius: 8px;
  align-items: center;
  cursor: pointer;
}
.login-form .phase-content .user-button:hover,
.login-form .phase-content .user-button.open {
  background-color: #CCC;
}
.login-form .phase-content .user-button > img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.login-form .phase-content .user-button > .name {
  display: flex;
  height: 100%;
  font-weight: 600;
  align-items: center;
}
.login-form .phase-content .login-notice {
  color: #4caf50;
}
.login-form .phase-content .login-error {
  color: #e53935;
}
.login-form .phaseless-content {
  padding: 0 30px;
}
    </style>
    <script src="https://kit.fontawesome.com/0735724151.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class=body>
      <header class="header main-1" id=header>
        <div class=main-selector tabindex=-1 id=main-selector>
          <nav class=target>
            <img src="logo.svg" class="icon">
            <i class="fas fa-chevron-down"></i>
          </nav>
          <div class=options>
            <nav class="option open">Home</nav>
            <nav class=option>Multiplayer</nav>
            <nav class=option>Land</nav>
          </div>
        </div>
      </header>

      <div class=iframe-wrapper id=iframe-wrapper>
        <video autoplay id=video></video>
        <canvas id=canvas></canvas>
        <textarea id=output></textarea>
      </div>
    </div>
    <script type=module>
// import './webxr-polyfill.module.js';
// import './HelioWebXRPolyfill.js';
import './three.js';
import './OrbitControls.js';
import './BufferGeometryUtils.js';

(async () => {

const localMatrix = new THREE.Matrix4();

const worker = (() => {
  let cbs = [];
  const worker = new Worker('cv-worker.js');
  worker.onmessage = e => {
    const {data} = e;
    const {error, result} = data;
    cbs.shift()(error, result);
  };
  worker.onerror = err => {
    console.warn(err);
  };
  worker.request = (req, transfers) => new Promise((accept, reject) => {
    worker.postMessage(req, transfers);

    cbs.push((err, result) => {
      if (!err) {
        accept(result);
      } else {
        reject(err);
      }
    });
  });
  return worker;
})();

const scene = new THREE.Scene();

const container = new THREE.Object3D();
scene.add(container);

const fov = 60;
const aspect = window.innerWidth / window.innerHeight;
const camera = new THREE.PerspectiveCamera(fov, aspect, 0.1, 1000);
// camera.position.y = 1.5;
camera.position.z = 2;
camera.lookAt(new THREE.Vector3());
window.camera = camera;

const ambientLight = new THREE.AmbientLight(0x808080);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 2);
directionalLight.position.set(0.5, 1, 0.5);
scene.add(directionalLight);

const canvas = document.getElementById('canvas');
const renderer = new THREE.WebGLRenderer({
  canvas,
  alpha: true,
  antialias: true,
});
// console.log('set size', window.innerWidth, window.innerHeight);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.sortObjects = false;
renderer.getContext().canvas.addEventListener('webglcontextlost', e => {
  console.log('webglcontextlost', e);
  debugger;
});
const iframeWrapper = document.getElementById('iframe-wrapper');
iframeWrapper.appendChild(renderer.domElement);

const orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
orbitControls.target.set(0, 1, 0);
orbitControls.screenSpacePanning = true;
orbitControls.enableMiddleZoom = false;
orbitControls.update();

const cubeMesh = new THREE.Mesh(
  new THREE.BoxBufferGeometry(1, 1, 1),
  new THREE.MeshPhongMaterial({
    color: 0xFF00FF,
  })
);
scene.add(cubeMesh);

const numAligners = 5;
const alignersGeometries = [];
for (let dz = -numAligners; dz <= numAligners; dz++) {
  for (let dy = -numAligners; dy <= numAligners; dy++) {
    for (let dx = -numAligners; dx <= numAligners; dx++) {
      const g = new THREE.BoxBufferGeometry(0.1, 0.1, 0.1).applyMatrix(localMatrix.makeTranslation(dx/numAligners, dy/numAligners, dz/numAligners));
      alignersGeometries.push(g);
    }
  }
}
const alignerMesh = new THREE.Mesh(
  THREE.BufferGeometryUtils.mergeBufferGeometries(alignersGeometries),
  new THREE.MeshPhongMaterial({
    color: 0xFF00FF,
  })
);
scene.add(alignerMesh);

// const pointGeometry = new THREE.BoxBufferGeometry(0.01, 0.01, 0.01).toNonIndexed();
const landmarkMesh = (() => {
  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(new ArrayBuffer(2 * 1024 * 1024)), 3));
  const material = new THREE.PointsMaterial({
    color: 0x0000FF,
  });
  const mesh = new THREE.Points(geometry, material);
  mesh.frustumCulled = false;
  mesh.visible = false;
  mesh.update = landmarks => {
    if (landmarks.length > 0) {
      const positions = new Float32Array(geometry.attributes.position.array.buffer);
      let index = 0;
      for (let i = 0; i < landmarks.length; i++) {
        const landmark = landmarks[i];
        if (landmark.local) {
          /* const newPointGeometry = pointGeometry.clone()
            .applyMatrix(localMatrix.makeTranslation(position[0], position[1], position[2]));
          positions.set(newPointGeometry.attributes.position.array, index);
          index += newPointGeometry.attributes.position.array.length; */
          positions.set(landmark.position, index);
          index += 3;
        }
      }
      geometry.setAttribute('position', new THREE.BufferAttribute(positions.slice(0, index), 3));
      mesh.visible = true;
    } else {
      mesh.visible = false;
    }
  };
  return mesh;
})();
scene.add(landmarkMesh);

function animate(timestamp, frame, referenceSpace) {
  renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);

const video = document.getElementById('video');
const videoCanvas = document.createElement('canvas');
const videoCtx = videoCanvas.getContext('2d');

const outputTextarea = document.getElementById('output');

const _initVideo = async () => {
  const mediaStream = await navigator.mediaDevices.getUserMedia({
    video: true,
  });
  video.srcObject = mediaStream;
  const settings = mediaStream.getVideoTracks()[0].getSettings();
  const {width, height, frameRate} = settings;
  videoCanvas.width = settings.width;
  videoCanvas.height = settings.height;
  return settings;
};
const {width, height, frameRate} = await _initVideo();

console.log('got settings 2', {width, height, frameRate});

const _getFrameData = () => {
  videoCtx.drawImage(video, 0, 0);
  return videoCtx.getImageData(0, 0, width, height).data;
};
const _calibrate = async () => {
  console.log('make calibrator 1');
  const {calibratorPtr, framebufPtr} = await worker.request({
    method: 'makeCalibrator',
    width,
    height,
    type: 16,
    boardWidth: 9,
    boardHeight: 7,
  })

  let frames = 0;
  const requiredFrames = 50;
  let running = false;
  const interval = setInterval(async () => {
    if (!running) {
      running = true;

      const endTime1 = Date.now();
      console.log('tick 1');
      const frameData = _getFrameData();
      const endeeTime1 = Date.now();
      console.log('tick 2', endeeTime1 - endTime1);

      const startTime2 = Date.now();
      console.log('worker frame 1', frameData.length);
      const {ok} = await worker.request({
        method: 'updateCalibrator',
        calibratorPtr,
        framebufPtr,
        frameData,
      }, [frameData.buffer]);
      const endTime2 = Date.now();
      console.log('worker frame 2', ok, endTime2 - startTime2);
      // debugger;

      if (ok) {
        frames++;
        console.log('got frame', frames, '/', requiredFrames);

        const {ok, cameraMatrix, distCoeffs} = await worker.request({
          method: 'finishCalibrator',
          calibratorPtr,
        });
        console.log('got result', cameraMatrix, distCoeffs);
        if (document.activeElement !== outputTextarea || frames >= requiredFrames) {
          outputTextarea.value = JSON.stringify({cameraMatrix, distCoeffs});
        }

        if (frames >= requiredFrames) {
          clearInterval(interval);
        }
      }

      running = false;
    }
  // }, 1000/frameRate);
  }, 500);
};
// _calibrate();
// return;

const _fetchArrayBuffer = async u => {
  const res = await fetch(u);
  if (res.ok) {
    const ab = await res.arrayBuffer();
    return ab;
  } else {
    throw new Error(`invalid status code: ${res.status}`);
  }
};
const _slam = async ({width, height, frameRate, cameraMatrix, distCoeffs}) => {
  const rows = height;
  const cols = width;
  const type = 16;
  const config_file_data = new TextEncoder().encode(`\
# LUMIX fisheye model for 1K setting

#==============#
# Camera Model #
#==============#

Camera.name: "unknown camera"
Camera.setup: "monocular"
Camera.model: "perspective"

Camera.fx: ${cameraMatrix[0].toFixed(8)}
Camera.fy: ${cameraMatrix[4].toFixed(8)}
Camera.cx: ${cameraMatrix[2].toFixed(8)}
Camera.cy: ${cameraMatrix[5].toFixed(8)}

Camera.k1: ${distCoeffs[0].toFixed(8)}
Camera.k2: ${distCoeffs[1].toFixed(8)}
Camera.p1: ${distCoeffs[2].toFixed(8)}
Camera.p2: ${distCoeffs[3].toFixed(8)}
Camera.k3: ${distCoeffs[4].toFixed(8)}

Camera.fps: ${frameRate}
Camera.cols: ${width}
Camera.rows: ${height}

Camera.color_order: "RGB"
`);
  const vocabArrayBuffer = await _fetchArrayBuffer('orb_vocab.dbow2');
  const vocab_file_data = new Uint8Array(vocabArrayBuffer);
  let {monoPtr, framebufPtr} = await worker.request({
    method: 'createMono',
    rows,
    cols,
    type,
    config_file_data,
    vocab_file_data,
  }, [config_file_data.buffer, vocab_file_data.buffer]);
  console.log('created mono', monoPtr, framebufPtr);

  const landmarks = [];
  window.landmarks = landmarks;
  let running = false;
  const _raf = async () => {
    if (!running) {
      running = true;

      console.log('raf');
      {
        const frameData = _getFrameData();
        const {ok} = await worker.request({
          method: 'pushFrameMono',
          monoPtr,
          framebufPtr,
          frameData,
        }, [frameData.buffer]);
      }
      // console.log('raf 2');

      {
        const {ok, result, framebufPtr: newFramebufPtr} = await worker.request({
          method: 'pullUpdateMono',
          monoPtr,
        });
        framebufPtr = newFramebufPtr;

        if (result.length > 0) {
          let index = 0;
          const numLandmarks = new Uint32Array(result.buffer, result.byteOffset + index, 1)[0];
          /* // console.log('raf 3', result.length, numLandmarks);
          index += Uint32Array.BYTES_PER_ELEMENT;
          for (let i = 0; i < numLandmarks; i++) {
            // console.log('index', index, result.length);
            const id = new Uint32Array(result.buffer, result.byteOffset + index, 1)[0];
            index += Uint32Array.BYTES_PER_ELEMENT;
            if ((index%8) !== 0) {
              index += 8 - (index%8);
            }
            const position = Float32Array.from(new Float64Array(result.buffer, result.byteOffset + index, 3));
            index += 3*Float64Array.BYTES_PER_ELEMENT;
            landmarks.push({id, position, local: false});
          } */
          index += Uint32Array.BYTES_PER_ELEMENT;
          if (numLandmarks > 0) {
            index += Uint32Array.BYTES_PER_ELEMENT + 3*Float64Array.BYTES_PER_ELEMENT + (numLandmarks-1)*4*Float64Array.BYTES_PER_ELEMENT
          }

          const numRemovedLandmarks = new Uint32Array(result.buffer, result.byteOffset + index, 1)[0];
          /* index += Uint32Array.BYTES_PER_ELEMENT;
          for (let i = 0; i < numRemovedLandmarks; i++) {
            const id = new Uint32Array(result.buffer, result.byteOffset + index, 1)[0];
            index += Uint32Array.BYTES_PER_ELEMENT;

            const oldIndex = landmarks.findIndex(l => l.id === id);
            if (oldIndex !== -1) {
              landmarks.splice(oldIndex, 1);
            } else {
              console.warn('failed to remove old landmark', id, landmarks.map(l => l.id));
            }
          } */
          index += Uint32Array.BYTES_PER_ELEMENT + numRemovedLandmarks*Uint32Array.BYTES_PER_ELEMENT;

          const numLocalLAndmarks = new Uint32Array(result.buffer, result.byteOffset + index, 1)[0];
          /* index += Uint32Array.BYTES_PER_ELEMENT;
          for (let i = 0; i < landmarks.length; i++) {
            landmarks[i].local = false;
          }
          for (let i = 0; i < numLocalLAndmarks; i++) {
            const id = new Uint32Array(result.buffer, result.byteOffset + index, 1)[0];
            index += Uint32Array.BYTES_PER_ELEMENT;

            const oldIndex = landmarks.findIndex(l => l.id === id);
            if (oldIndex !== -1) {
              landmarks[oldIndex].local = true;
            } else {
              console.warn('failed to localize landmark', id, landmarks.map(l => l.id));
            }
          } */
          index += Uint32Array.BYTES_PER_ELEMENT + numLocalLAndmarks*Uint32Array.BYTES_PER_ELEMENT;

          if ((index%8) !== 0) {
            index += 8 - (index%8);
          }
          camera.matrix.fromArray(new Float64Array(result.buffer, result.byteOffset + index, 16))
            .decompose(camera.position, camera.quaternion, camera.scale);
          index += 16*Float64Array.BYTES_PER_ELEMENT;

          // landmarkMesh.update(landmarks);

          console.log('got frame result', camera.position.toArray().join(','), camera.quaternion.toArray().join(','));
        } else {
          console.log('skip frame');
        }
      }

      running = false;
    }
  };
  const interval = setInterval(_raf, 1000/frameRate);
};
await _slam({
  width,
  height,
  frameRate,
  /* "cameraMatrix":{"0":735.4304097846076,"1":0,"2":321.06506824032874,"3":0,"4":686.7486381547048,"5":231.47035769629187,"6":0,"7":0,"8":1},
  "distCoeffs":{"0":0.12584271865639923,"1":-0.4730137653812508,"2":0.004571826165026919,"3":0.003320676717837572,"4":0,"5":5.30498949456e-313,"6":2.3643616658266277e-308,"7":1.4133999433638615e-306}, */
  "cameraMatrix":{"0":661.58032580107,"1":0,"2":332.52480750609914,"3":0,"4":626.9986103396006,"5":285.79513294685904,"6":0,"7":0,"8":1},
  "distCoeffs":{"0":0.09799644177800233,"1":-0.14371490295503977,"2":0.013551907830970022,"3":-0.0016921487418579573,"4":0,"5":1.42182039547e-312,"6":6.8220297372277415e-307,"7":2.121995791e-314}
});

})();
    </script>
  </body>
</html>