@miris-inc/three 0.0.1

package/chunk.ts

@@ -0,0 +1,17 @@
+import type { Chunk as CoreChunk } from "@miris-inc/core";
+import { Group } from "three";
+
+export default class Chunk extends Group {
+  #coreChunk: CoreChunk;
+  constructor(coreChunk: CoreChunk) {
+    super();
+    this.#coreChunk = coreChunk;
+    this.matrix.fromArray(this.transform());
+    this.matrixAutoUpdate = false;
+    this.matrixWorldNeedsUpdate = true;
+  }
+
+  transform() {
+    return this.#coreChunk.transform;
+  }
+}

package/controls.ts

@@ -0,0 +1,129 @@
+import {
+  type Camera,
+  Object3D,
+  Quaternion,
+  Raycaster,
+  Vector2,
+  Vector3,
+} from "three";
+
+const speed = 5;
+const maxPitch = Math.PI / 2 - 0.1;
+
+export default class Controls {
+  #camera;
+  #domElement;
+  #raycaster = new Raycaster();
+  #activeObject: Object3D | null = null;
+  #isDragging = false;
+  #prevCoords = new Vector2();
+  #dispose: () => void;
+
+  enableRotate = true;
+  enableZoom = true;
+
+  declare readonly objects: Set<Object3D>;
+
+  constructor(
+    objects: Object3D | Iterable<Object3D> | null,
+    camera: Camera,
+    domElement: HTMLElement
+  ) {
+    Object.defineProperty(this, "objects", {
+      value: new Set(
+        objects ? (objects instanceof Object3D ? [objects] : objects) : null
+      ),
+    });
+
+    this.#camera = camera;
+    this.#domElement = domElement;
+
+    const pointerdown = this.#pointerdown.bind(this);
+    const pointermove = this.#pointermove.bind(this);
+    const pointerup = this.#pointerup.bind(this);
+    const pointerleave = this.#pointerup.bind(this);
+
+    domElement.addEventListener("pointerdown", pointerdown);
+    domElement.addEventListener("pointermove", pointermove);
+    domElement.addEventListener("pointerup", pointerup);
+    domElement.addEventListener("pointerleave", pointerleave);
+
+    this.#dispose = () => {
+      domElement.removeEventListener("pointerdown", pointerdown);
+      domElement.removeEventListener("pointermove", pointermove);
+      domElement.removeEventListener("pointerup", pointerup);
+      domElement.removeEventListener("pointerleave", pointerleave);
+    };
+  }
+
+  #pointerdown({ clientX, clientY }: MouseEvent) {
+    const { left, top, width, height } =
+      this.#domElement.getBoundingClientRect();
+    const coords = new Vector2(
+      ((clientX - left) / width) * 2 - 1,
+      -((clientY - top) / height) * 2 + 1
+    );
+
+    this.#raycaster.setFromCamera(coords, this.#camera);
+    const [intersection] = this.#raycaster.intersectObjects(
+      [...this.objects],
+      true
+    );
+    this.#activeObject = null;
+
+    if (intersection) {
+      intersection.object.traverseAncestors((object) => {
+        if (this.objects.has(object)) this.#activeObject = object;
+      });
+    }
+
+    if (this.#activeObject) {
+      this.#isDragging = true;
+      this.#prevCoords = coords;
+      this.#domElement.style.cursor = "grabbing";
+    }
+  }
+
+  #pointermove({ clientX, clientY }: MouseEvent) {
+    const { left, top, width, height } =
+      this.#domElement.getBoundingClientRect();
+    const coords = new Vector2(
+      ((clientX - left) / width) * 2 - 1,
+      -((clientY - top) / height) * 2 + 1
+    );
+
+    if (!this.#isDragging) {
+      this.#raycaster.setFromCamera(coords, this.#camera);
+      const [intersection] = this.#raycaster.intersectObjects(
+        [...this.objects],
+        true
+      );
+
+      this.#domElement.style.cursor = intersection ? "grab" : "default";
+      return;
+    }
+
+    if (!this.#activeObject) return;
+
+    const deltaX = coords.x - this.#prevCoords.x;
+    const deltaY = coords.y - this.#prevCoords.y;
+    const { rotation } = this.#activeObject;
+
+    rotation.x -= deltaY * speed;
+    rotation.x = Math.max(-maxPitch, Math.min(maxPitch, rotation.x));
+    rotation.y += deltaX * speed;
+
+    this.#prevCoords.copy(coords);
+  }
+
+  #pointerup() {
+    this.#isDragging = false;
+    this.#activeObject = null;
+    this.#domElement.style.cursor = "default";
+  }
+
+  dispose() {
+    this.#dispose();
+    this.#domElement.style.cursor = "default";
+  }
+}

package/detector.ts

@@ -0,0 +1,61 @@
+import { Camera as CoreCamera, Scene as CoreScene } from "@miris-inc/core";
+import {
+  type Camera,
+  Mesh,
+  OrthographicCamera,
+  PerspectiveCamera,
+  Scene,
+  type WebGLRenderer,
+} from "three";
+
+export default class Detector extends Mesh {
+  override frustumCulled = false;
+
+  override onBeforeRender(
+    _renderer: WebGLRenderer,
+    scene: Scene,
+    camera: Camera
+  ) {
+    if (camera.matrixAutoUpdate) {
+      const coreScene = CoreScene.forKey(scene);
+
+      if (!coreScene) {
+        return;
+      }
+
+      let aspect, fov;
+
+      if (camera instanceof PerspectiveCamera) {
+        aspect = camera.aspect;
+        fov = camera.fov;
+      } else if (camera instanceof OrthographicCamera) {
+        aspect = (camera.right - camera.left) / (camera.top - camera.bottom);
+        fov = 0;
+      } else {
+        return;
+      }
+
+      const { near, far } = camera;
+
+      const coreCamera =
+        CoreCamera.forKey(camera) ??
+        new CoreCamera({
+          aspect,
+          fov,
+          near,
+          far,
+          matrix: camera.matrixWorld.toArray(),
+          scene: coreScene,
+        });
+
+      // Associate core camera and core scene.
+      coreScene.camera = coreCamera;
+
+      coreCamera.matrix = camera.matrixWorld.toArray();
+      coreCamera.aspect = aspect;
+      coreCamera.fov = fov;
+      coreCamera.near = near;
+      coreCamera.far = far;
+    }
+  }
+}

package/index.html

@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Miris Web</title>
+    <style>
+      body {
+        margin: 0;
+        background-color: black;
+      }
+
+      canvas {
+        width: 100vw;
+        height: 100vh;
+      }
+    </style>
+    <script type="module" lang="ts">
+      // First, we'll import some dependencies
+      import * as THREE from "three";
+      import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+      import { MirisStream } from ".";
+
+      // Next, we'll set up some variables needed by Three.js
+      const canvas = document.getElementById("canvas");
+      const scene = new THREE.Scene();
+      const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight);
+      const controls = new OrbitControls(camera, canvas);
+      const renderer = new THREE.WebGLRenderer({ canvas });
+
+      // When the window resizes, we want to resize our canvas, too
+      new ResizeObserver(() => {
+        renderer.setPixelRatio(devicePixelRatio);
+        renderer.setSize(innerWidth, innerHeight, false);
+
+        camera.aspect = innerWidth / innerHeight;
+        camera.updateProjectionMatrix();
+      }).observe(canvas);
+
+      // This is the main render loop
+      renderer.setAnimationLoop(() => {
+        renderer.render(scene, camera);
+        controls.update();
+      });
+
+      // Create our Miris stream
+      const stream = new MirisStream("prod/black_white_bike");
+      stream.position.set(0, -500, 750);
+
+      // Set our orbit controls target to the asset's position
+      controls.target = new THREE.Vector3(0, 0, 750);
+
+      // Finally, we'll add the stream to our scene
+      scene.add(stream);
+    </script>
+  </head>
+  <body>
+    <canvas id="canvas" data-testid="canvas"></canvas>
+  </body>
+</html>

package/index.ts

@@ -0,0 +1,5 @@
+import "./miris";
+
+export { default as MirisControls } from "./controls";
+export { default as MirisScene } from "./scene";
+export { default as MirisStream } from "./stream";

package/lod.ts

@@ -0,0 +1,70 @@
+import type { Lod as CoreLod } from "@miris-inc/core";
+import { Matrix4 } from "three";
+import {
+  PackedSplats,
+  SplatMesh,
+  type SplatEncoding,
+  type SplatMeshContext,
+} from "@sparkjsdev/spark";
+
+export default class Lod extends SplatMesh {
+  #coreLod: CoreLod;
+
+  constructor(coreLod: CoreLod) {
+    let encoding: SplatEncoding = {};
+
+    let extra: Record<string, unknown> = {};
+    if (coreLod.sh1Data != null) {
+      extra["sh1"] = coreLod.sh1Data;
+      encoding.sh1Min = coreLod.sh1Min;
+      encoding.sh1Max = coreLod.sh1Max;
+    }
+    if (coreLod.sh2Data != null) {
+      extra["sh2"] = coreLod.sh2Data;
+      encoding.sh2Min = coreLod.sh2Min;
+      encoding.sh2Max = coreLod.sh2Max;
+    }
+    if (coreLod.sh3Data != null) {
+      extra["sh3"] = coreLod.sh3Data;
+      encoding.sh3Min = coreLod.sh3Min;
+      encoding.sh3Max = coreLod.sh3Max;
+    }
+
+    // coreLod.splats is already padded to alignment in core layer
+    const packedSplats = new PackedSplats({
+      packedArray: coreLod.splats,
+      extra: extra,
+      splatEncoding: encoding,
+    });
+
+    super({ packedSplats });
+
+    this.#coreLod = coreLod;
+  }
+
+  bounds() {
+    return this.#coreLod.bounds;
+  }
+
+  lodIndex() {
+    return this.#coreLod.lodIndex;
+  }
+
+  transform() {
+    return this.#coreLod.transform;
+  }
+
+  parentedTransform() {
+    const lodTransform = this.#coreLod.transform;
+    const lodMatrix = new Matrix4();
+    lodMatrix.fromArray(lodTransform);
+    const parentMatrix = this.parent?.matrix;
+    return lodMatrix.premultiply(parentMatrix);
+  }
+
+  // override constructGenerator(context: SplatMeshContext) {
+  //   context.viewToObject.translate.value.y *= -1;
+  //   super.constructGenerator(context);
+  //   context.viewToObject.translate.value.y *= -1;
+  // }
+}

package/miris.ts

@@ -0,0 +1,92 @@
+import {
+  Miris as CoreMiris,
+  type Lod as CoreLod,
+  type Change,
+} from "@miris-inc/core";
+import Chunk from "./chunk";
+import Lod from "./lod";
+import Stream from "./stream";
+import { Matrix4 as ThreeMat } from "three";
+
+export default class Miris extends CoreMiris {
+  // Tracks a LOD ID to its fade animation so we can cancel previous
+  // fades if a new one is assigned to the object.
+
+  override update(entries: Change[]) {
+    for (const { type, lod: coreLod } of entries) {
+      switch (type) {
+        case "created":
+          this.#createLod(coreLod);
+          break;
+        case "activated":
+          this.#activateLod(coreLod);
+          break;
+        case "deactivated":
+          this.#deactivateLod(coreLod);
+          break;
+      }
+    }
+  }
+
+  override updateChunkTransform(
+    chunkTransform: Float32Array,
+    parentTransform: Float32Array
+  ): Float32Array {
+    const chunkMatrix = new ThreeMat().fromArray(chunkTransform);
+    const parentMatrix = new ThreeMat().fromArray(parentTransform);
+    return new Float32Array(chunkMatrix.premultiply(parentMatrix).elements);
+  }
+
+  #createLod(coreLod: CoreLod) {
+    const lod = new Lod(coreLod);
+    const coreChunk = coreLod.chunk;
+    const coreStream = coreChunk.stream;
+    const chunk = (coreChunk.key as Chunk) ?? new Chunk(coreChunk);
+    const stream = coreStream.key as Stream;
+
+    coreLod.key = lod;
+    coreChunk.key = chunk;
+
+    chunk.add(lod);
+    stream.add(chunk);
+  }
+
+  #activateLod(coreLod: CoreLod) {
+    const lod = coreLod.key as Lod;
+    if (!lod) {
+      console.log(
+        "Warning: Tried to activate a LOD that does not exist key: " +
+          coreLod.id
+      );
+      return;
+    }
+    lod.opacity = 1;
+
+    // Re-add to chunk in case it was removed during deactivation
+    const chunk = coreLod.chunk.key as Chunk;
+    if (chunk && !lod.parent) {
+      chunk.add(lod);
+    }
+  }
+
+  #modifyLod(coreLod: CoreLod) {}
+
+  #deactivateLod(coreLod: CoreLod) {
+    const lod = coreLod.key as Lod;
+    if (!lod) {
+      console.log(
+        "Warning: Tried to deactivate a LOD that does not exist key: " +
+          coreLod.id
+      );
+      return;
+    }
+    lod.opacity = 0;
+
+    // Only remove from scene graph, do NOT dispose!
+    // The LOD may be reactivated later during octree collapses.
+    // Disposal should only happen when the scene object is deleted.
+    lod.removeFromParent();
+  }
+}
+
+export const miris = new Miris();

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@miris-inc/three",
+  "exports": "./index.ts",
+  "scripts": {
+    "d": "bun dev",
+    "dev": "vite",
+    "b": "vite build",
+    "build": "vite build",
+    "s": "vite serve",
+    "serve": "vite serve"
+  },
+  "devDependencies": {
+    "@miris-inc/core": "*",
+    "@sparkjsdev/spark": "^0.1.10",
+    "@types/three": "^0.182.0",
+    "three": "^0.182.0"
+  },
+  "version": "0.0.1"
+}

package/scene.ts

@@ -0,0 +1,29 @@
+import { Scene as CoreScene } from "@miris-inc/core";
+import { Scene as ThreeScene } from "three";
+import { miris } from "./miris";
+
+export default class Scene extends ThreeScene {
+  #coreScene;
+
+  constructor(
+    key: string | null,
+    ...args: ConstructorParameters<typeof ThreeScene>
+  ) {
+    super(...args);
+
+    this.#coreScene = new CoreScene({ miris, viewerKey: key });
+    this.#coreScene.key = this;
+  }
+
+  setViewerKey(viewerKey: string) {
+    this.#coreScene.setViewerKey(viewerKey);
+  }
+
+  async fetchAssets(...args: Parameters<CoreScene["fetchAssets"]>) {
+    return this.#coreScene.fetchAssets(...args);
+  }
+  
+  get coreScene() : CoreScene {
+    return this.#coreScene;
+  }
+}

package/stream.ts

@@ -0,0 +1,244 @@
+import { Stream as CoreStream, Scene as CoreScene } from "@miris-inc/core";
+import {
+  Group,
+  type Object3D,
+  Scene as ThreeScene,
+  BoxGeometry as ThreeBoxGeometry,
+  EdgesGeometry as ThreeEdgesGeometry,
+  InstancedBufferGeometry as ThreeInstancedGeo,
+  LineBasicMaterial as ThreeLineMaterial,
+  LineSegments as ThreeLineSegments,
+  InstancedBufferAttribute as ThreeIBA,
+  Vector3 as ThreeVec,
+  Quaternion as ThreeQuat,
+  Color as ThreeColor,
+  Matrix4 as ThreeMat,
+  DynamicDrawUsage as ThreeDynamicDraw,
+} from "three";
+import { miris } from "./miris";
+import Detector from "./detector";
+
+export default class Stream extends Group {
+  static key: string;
+
+  declare readonly isStream: true;
+
+  #coreStream?: CoreStream;
+  #boxes: ThreeLineSegments | null = null;
+  #instanceBoxGeometry: ThreeInstancedGeo | null = null;
+
+  constructor(
+    uuid: string,
+    key?: string | null,
+    ...args: ConstructorParameters<typeof Group>
+  ) {
+    super(...args);
+
+    Object.defineProperty(this, "isStream", { value: true });
+
+    this.addEventListener("added", () => {
+      let coreScene;
+      let threeObject: Object3D | null = this;
+
+      threeObject.traverseAncestors((threeObject) => {
+        if (!(threeObject instanceof ThreeScene)) return;
+
+        const threeScene = threeObject;
+
+        coreScene = CoreScene.forKey(threeScene);
+
+        if (!coreScene) {
+          coreScene = new CoreScene({ miris, viewerKey: key ?? Stream.key });
+          coreScene.key = threeScene;
+        }
+
+        let hasDetector = false;
+
+        threeScene.traverse((object) => {
+          if (object instanceof Detector) hasDetector = true;
+        });
+
+        if (!hasDetector) threeScene.add(new Detector());
+
+        const coreStream = new CoreStream({ uuid, scene: coreScene });
+
+        coreStream.key = this;
+        coreStream.matrix = this.matrixWorld.toArray();
+        this.#coreStream = coreStream;
+      });
+    });
+
+    this.addEventListener("removed", () => this.#coreStream?.end());
+  }
+
+  override updateMatrixWorld(...args: Parameters<Group["updateMatrixWorld"]>) {
+    super.updateMatrixWorld(...args);
+
+    if (this.#coreStream) this.#coreStream.matrix = this.matrixWorld.toArray();
+  }
+
+  #createBoxes() {
+    if (this.#instanceBoxGeometry) {
+      return;
+    }
+
+    // create Instance Buffer Geometry
+    const edgesGeometry = new ThreeEdgesGeometry(new ThreeBoxGeometry(1, 1, 1));
+    const bufferGeometry = new ThreeInstancedGeo();
+    bufferGeometry.index = edgesGeometry.index;
+    bufferGeometry.attributes.position = edgesGeometry.attributes.position;
+
+    // allocate Instanced Buffer Attributes
+    const startBoxCount: number = 3000;
+    const matrixAttrcount: number = startBoxCount * 16;
+    const colorAttrCount: number = startBoxCount * 3;
+    const instanceMatrix = new ThreeIBA(new Float32Array(matrixAttrcount), 16);
+    const instanceColor = new ThreeIBA(new Float32Array(colorAttrCount), 3);
+
+    // set Instanced Buffer Attributes of Geometry to Dynamic Draw
+    bufferGeometry.setAttribute("instanceMatrix", instanceMatrix);
+    bufferGeometry.setAttribute("instanceColor", instanceColor);
+    bufferGeometry.attributes.instanceMatrix.setUsage(ThreeDynamicDraw);
+    bufferGeometry.attributes.instanceColor.setUsage(ThreeDynamicDraw);
+
+    const material = new ThreeLineMaterial(); // default color is white
+
+    material.onBeforeCompile = (shader) => {
+      // ---- VERTEX SHADER ----
+      shader.vertexShader =
+        `
+    attribute mat4 instanceMatrix;
+    attribute vec3 instanceColor;
+    varying vec3 vInstanceColor;
+  ` + shader.vertexShader;
+
+      shader.vertexShader = shader.vertexShader.replace(
+        "#include <begin_vertex>",
+        `
+      vec3 transformed = (instanceMatrix * vec4(position, 1.0)).xyz;
+      vInstanceColor = instanceColor;
+    `
+      );
+
+      // ---- FRAGMENT SHADER ----
+      shader.fragmentShader =
+        `
+    varying vec3 vInstanceColor;
+  ` + shader.fragmentShader;
+
+      shader.fragmentShader = shader.fragmentShader.replace(
+        "vec4 diffuseColor = vec4( diffuse, opacity );",
+        "vec4 diffuseColor = vec4( vInstanceColor, opacity );"
+      );
+    };
+
+    bufferGeometry.instanceCount = 0;
+    this.#instanceBoxGeometry = bufferGeometry;
+
+    this.#boxes = new ThreeLineSegments(this.#instanceBoxGeometry, material);
+    this.#boxes.frustumCulled = false;
+    this.#boxes.visible = false;
+    this.parent.add(this.#boxes);
+  }
+
+  clearBoxes() {
+    if (!this.#instanceBoxGeometry) {
+      return;
+    }
+    const attr = this.#instanceBoxGeometry?.attributes.instanceMatrix;
+    attr.array.fill(0);
+    attr.needsUpdate = true;
+  }
+
+  #getRenderableObjects = () => {
+    if (this.children === null || this.children.length === 0) {
+      return [];
+    }
+    return this.children[0].children;
+  };
+
+  #hueToRgba(hue: number) {
+    const clamp01 = (value: number) => {
+      return Math.max(0, Math.min(value, 1));
+    };
+
+    const r: number = Math.abs(hue * 6 - 3) - 1;
+    const g: number = 2 - Math.abs(hue * 6 - 2);
+    const b: number = 2 - Math.abs(hue * 6 - 4);
+
+    return new ThreeColor(clamp01(r), clamp01(g), clamp01(b));
+  }
+
+  #mapLodIndexToColor(lodIndex: number) {
+    const m_lodHeatMapMaxLodIndex: number = 5;
+    const m_lodHeatMapMinLodIndex: number = 0;
+    let lodIndexNormalized: number = 0.0;
+
+    let minMaxDifference = m_lodHeatMapMaxLodIndex - m_lodHeatMapMinLodIndex;
+    if (minMaxDifference > 0) {
+      lodIndexNormalized =
+        (lodIndex - m_lodHeatMapMinLodIndex) / minMaxDifference;
+    }
+
+    return this.#hueToRgba(1.0 - lodIndexNormalized);
+  }
+
+  #updateInstanceTransform(index, center, extents, objectMatrix) {
+    const attr = this.#instanceBoxGeometry?.attributes.instanceMatrix;
+
+    const matrix = new ThreeMat();
+    const pos = new ThreeVec(center.x, center.y, center.z);
+    const scale = new ThreeVec(extents.x, extents.y, extents.z);
+
+    matrix.compose(pos, new ThreeQuat(), scale);
+    matrix.premultiply(objectMatrix);
+
+    matrix.toArray(attr.array, index * 16);
+  }
+
+  #updateInstanceColor(index, color) {
+    const attr = this.#instanceBoxGeometry?.attributes.instanceColor;
+    attr?.setXYZ(index, color.r, color.g, color.b);
+  }
+
+  updateBounds(
+    bounds: Float32Array,
+    mat: ThreeMat,
+    lodIndex: number,
+    id: number
+  ) {
+    let size = new ThreeVec(bounds[3], bounds[4], bounds[5]);
+    let center = new ThreeVec(bounds[0], bounds[1], bounds[2]);
+
+    this.#updateInstanceTransform(id, center, size, mat);
+    this.#updateInstanceColor(id, this.#mapLodIndexToColor(lodIndex));
+  }
+
+  toggleRenderBounds(shouldRender: boolean = false) {
+    this.#createBoxes();
+    this.#boxes.visible = shouldRender;
+  }
+
+  #updateRenderBounds() {
+    if (this.#boxes !== null && this.#boxes.visible) {
+      const renderables = this.#getRenderableObjects();
+      const childCount: number = renderables.length;
+      for (let i = 0; i < childCount; i++) {
+        const bounds = renderables[i].bounds();
+        const matrix = renderables[i]
+          .parentedTransform()
+          .premultiply(this.matrix);
+        const index = renderables[i].lodIndex();
+        this.updateBounds(bounds, matrix, index, i);
+      }
+      const bufferGeometry = this.#instanceBoxGeometry;
+      bufferGeometry.instanceCount = childCount;
+      bufferGeometry.attributes.instanceMatrix.needsUpdate = true;
+      bufferGeometry.attributes.instanceColor.needsUpdate = true;
+    }
+  }
+
+  update() {
+    this.#updateRenderBounds();
+  }
+}

package/vite.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  build: {
+    lib: { entry: "index.ts", formats: ["es"] },
+    rollupOptions: { external: ["three"] },
+  },
+  server: {
+    headers: {
+      // CORS headers (COOP/COEP) are disabled to ease customer integration.
+      // These headers make embedding our viewer in customer websites difficult and break compatibility
+      // with many external libraries. They are only required for threaded WASM builds that use
+      // SharedArrayBuffer. Our single-threaded WASM build does not require these restrictions.
+      "Cross-Origin-Opener-Policy": "same-origin",
+      "Cross-Origin-Embedder-Policy": "credentialless",
+    },
+  },
+  worker: { format: "es" },
+});