First commit

app/three/utils/build-default-lights.ts

@@ -0,0 +1,29 @@
+import { AmbientLight, DirectionalLight, Scene } from "three";
+
+const DEG2RAD = Math.PI / 180;
+export function buildDefaultLights(scene: Scene) {
+  // ambient light
+  scene.add(new AmbientLight(0x999999));
+
+  // directional lights
+  const opt = {
+    azimuth: 220,
+    altitude: 45,
+  };
+
+  const lambda = (90 - opt.azimuth) * DEG2RAD;
+  const phi = opt.altitude * DEG2RAD;
+
+  const x = Math.cos(phi) * Math.cos(lambda);
+  const y = Math.cos(phi) * Math.sin(lambda);
+  const z = Math.sin(phi);
+
+  const light1 = new DirectionalLight(0xffffff, 0.5);
+  light1.position.set(x, y, z);
+  scene.add(light1);
+
+  // thin light from the opposite direction
+  const light2 = new DirectionalLight(0xffffff, 0.1);
+  light2.position.set(-x, -y, -z);
+  scene.add(light2);
+}

app/three/utils/build-meshes.ts

@@ -0,0 +1,77 @@
+import {
+  BufferAttribute,
+  BufferGeometry,
+  DoubleSide,
+  Group,
+  Mesh,
+  MeshBasicMaterial,
+  MeshStandardMaterial,
+} from "three";
+
+import { fetchTriangleIndices } from "./fetch-triangle-indices";
+import { fetchVertices } from "./fetch-vertices";
+import { TRIANGLE_INDICES_URL, VERTICES_URL } from "../config";
+
+interface MappedFeature {
+  featuregeom_id: number;
+  name: string;
+  geologicdescription: { "feature type": string; citation: string | null };
+  preview: { legend_color: string; legend_text: string };
+}
+
+async function buildMesh(layerData: MappedFeature) {
+  const color = `#${layerData.preview.legend_color}`;
+  const name = layerData.preview.legend_text;
+  const geomId = layerData.featuregeom_id.toString();
+
+  const geometry = new BufferGeometry();
+  const vertices = await fetchVertices(VERTICES_URL, geomId);
+
+  const positions = new BufferAttribute(vertices, 3);
+  geometry.setAttribute("position", positions);
+
+  const indexArray = await fetchTriangleIndices(TRIANGLE_INDICES_URL, geomId);
+  const indices = new BufferAttribute(indexArray, 1);
+
+  geometry.setIndex(indices);
+  geometry.scale(1, 1, 1);
+  geometry.computeBoundingSphere();
+  geometry.computeVertexNormals();
+  geometry.computeBoundingBox();
+
+  const material = new MeshStandardMaterial(
+    {
+      color: color,
+      metalness: 0.1,
+      roughness: 0.75,
+      flatShading: true,
+      side: DoubleSide,
+      // wireframe: false,
+    }
+    // this.uniforms.clipping
+  );
+
+  const mesh = new Mesh(geometry, material);
+  mesh.name = name;
+  mesh.userData.layerId = geomId;
+  mesh.castShadow = true;
+  mesh.receiveShadow = true;
+
+  // modelNode should be a THREE.Group object where all the model data gets added to
+  // in the original code modelNode is a direct reference to a THREE.Scene
+  // if (modelNode) {
+  //   modelNode.add(mesh);
+  // }
+  return mesh;
+}
+
+export async function buildMeshes(mappedFeatures: MappedFeature[]) {
+  const meshes = [];
+  for (let i = 0; i < mappedFeatures.length; i++) {
+    const layerData = mappedFeatures[i];
+    const mesh = await buildMesh(layerData);
+    meshes.push(mesh);
+  }
+
+  return meshes;
+}

app/three/utils/build-scene.ts

@@ -0,0 +1,104 @@
+import {
+  BoxGeometry,
+  Camera,
+  Mesh,
+  MeshBasicMaterial,
+  PerspectiveCamera,
+  Scene,
+  Vector3,
+  WebGLRenderer,
+} from "three";
+
+import { buildDefaultLights } from "./build-default-lights";
+import { OrbitControls } from "three/addons/controls/OrbitControls.js";
+
+export interface Extent {
+  xmin: number;
+  ymin: number;
+  xmax: number;
+  ymax: number;
+  zmin: number;
+  zmax: number;
+}
+
+let controls: OrbitControls;
+let renderer: WebGLRenderer;
+let camera: PerspectiveCamera;
+let scene: Scene;
+export async function buildScene(container: HTMLElement, extent: Extent) {
+  const size = Math.max(
+    extent.xmax - extent.xmin,
+    extent.ymax - extent.ymin,
+    extent.zmax - extent.zmin
+  );
+
+  const center = new Vector3(
+    (extent.xmin + extent.xmax) / 2,
+    (extent.ymin + extent.ymax) / 2,
+    0
+  );
+
+  const width = container.clientWidth;
+  const height = container.clientHeight;
+
+  camera = new PerspectiveCamera(30, width / height, 0.1, size * 100);
+  camera.position.set(center.x, center.y, size * 5);
+  camera.lookAt(center);
+
+  renderer = new WebGLRenderer({
+    alpha: true,
+  });
+
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setSize(width, height);
+  //renderer.autoClear = false;
+  //renderer.setClearColor(0x000000, 0.0); // second param is opacity, 0 => transparent
+
+  // enable clipping
+  renderer.localClippingEnabled = true;
+  container.appendChild(renderer.domElement);
+
+  controls = new OrbitControls(camera, renderer.domElement);
+  controls.target.set(center.x, center.y, center.z); // Focus on the center
+  controls.enableDamping = true; // Smooth camera movement
+  controls.update();
+
+  // Scene will hold all our elements such as objects, cameras and lights
+  scene = new Scene();
+
+  buildDefaultLights(scene);
+
+  // const queryString = window.location.search;
+  // const urlParams = new URLSearchParams(queryString);
+  // const modelid = parseInt(urlParams.get("model_id") ?? "20", 10);
+
+  renderer.setAnimationLoop(animate);
+
+  window.addEventListener("resize", () => onWindowResize(container));
+
+  const testCube = new Mesh(
+    new BoxGeometry(size * 0.1, size * 0.1, size * 0.1),
+    new MeshBasicMaterial({ color: 0xff0000 })
+  );
+  testCube.position.copy(center);
+  scene.add(testCube);
+
+  return { renderer, scene, camera };
+}
+
+function onWindowResize(container: HTMLElement) {
+  // Update the camera's aspect ratio and the renderer's size to reflect
+  // the new screen dimensions upon a browser window resize.
+  camera.aspect = container.clientWidth / container.clientHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(container.clientWidth, container.clientHeight);
+
+  // required if controls.enableDamping or controls.autoRotate are set to true
+  controls.update();
+}
+
+function animate() {
+  renderer.render(scene, camera);
+  // required if controls.enableDamping or controls.autoRotate are set to true
+  controls.update();
+}

app/three/utils/fetch-triangle-indices.ts

@@ -0,0 +1,8 @@
+import { unpackEdges } from "./parsers";
+import { request } from "./request";
+
+export async function fetchTriangleIndices(edgeUrl: string, geomId: string) {
+  const url = edgeUrl + geomId;
+  const buffer = await request(url);
+  return unpackEdges(buffer);
+}

app/three/utils/fetch-vertices.ts

@@ -0,0 +1,8 @@
+import { unpackVertices } from "./parsers";
+import { request } from "./request";
+
+export async function fetchVertices(pointUrl: string, geomId: string) {
+  const url = pointUrl + geomId;
+  const buffer = await request(url);
+  return unpackVertices(buffer);
+}

app/three/utils/get-layer-id.ts

@@ -0,0 +1,5 @@
+let lastId = 0;
+
+export function stamp(obj: any) {
+  return obj._id ?? (obj._id = ++lastId);
+}

app/three/utils/get-metadata.ts

@@ -0,0 +1,15 @@
+export async function getMetadata(serviceUrl: string) {
+  const response = await fetch(serviceUrl, {
+    method: "GET",
+    mode: "cors",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  if (response.ok) {
+    return response.json();
+  } else {
+    throw new Error("HTTP error status: " + response.status);
+  }
+}

app/three/utils/init.ts

@@ -0,0 +1,28 @@
+import { Group, Vector3 } from "three";
+import { buildMeshes } from "./build-meshes";
+import { Extent, buildScene } from "./build-scene";
+import { getMetadata } from "./get-metadata";
+import { MODEL_ID, SERVICE_URL } from "../config";
+
+export async function init(container: HTMLElement) {
+  const modelData = await getMetadata(SERVICE_URL + MODEL_ID);
+  const mappedFeatures = modelData.mappedfeatures;
+  const modelarea = modelData.modelarea;
+
+  const extent: Extent = {
+    xmin: modelarea.x.min,
+    xmax: modelarea.x.max,
+    ymin: modelarea.y.min,
+    ymax: modelarea.y.max,
+    zmin: modelarea.z.min,
+    zmax: modelarea.z.max,
+  };
+
+  const { renderer, scene, camera } = await buildScene(container, extent);
+  const meshes = await buildMeshes(mappedFeatures);
+
+  //   const mappedFeaturesGroup = new Group();
+  //   mappedFeaturesGroup.add(...meshes);
+  // scene.add(mappedFeaturesGroup);
+  scene.add(meshes[0]);
+}

app/three/utils/parsers.ts

@@ -0,0 +1,128 @@
+const DIMENSIONS = 3;
+const ONEBYTE = 1;
+const FOURBYTE = 4;
+const METABYTES = 13;
+
+class BitStream {
+  private a: Uint8Array;
+  private position: number;
+  private bitsPending: number;
+
+  constructor(uint8Array: Uint8Array) {
+    this.a = uint8Array;
+    this.position = 0;
+    this.bitsPending = 0;
+  }
+
+  writeBits(bits: number, value: number) {
+    if (bits === 0) return;
+    value &= 0xffffffff >>> (32 - bits);
+
+    while (bits > 0) {
+      if (this.bitsPending === 0) {
+        this.a[this.position++] = 0;
+        this.bitsPending = 8;
+      }
+
+      const bitsToWrite = Math.min(this.bitsPending, bits);
+      const shift = this.bitsPending - bitsToWrite;
+      this.a[this.position - 1] |= (value >> (bits - bitsToWrite)) << shift;
+
+      bits -= bitsToWrite;
+      value &= (1 << bits) - 1;
+      this.bitsPending -= bitsToWrite;
+    }
+  }
+
+  readBits(bits: number, bitBuffer = 0) {
+    if (bits === 0) return bitBuffer;
+
+    while (bits > 0) {
+      if (this.bitsPending === 0) {
+        this.bitsPending = 8;
+      }
+
+      const byte = this.a[this.position - (this.bitsPending === 8 ? 0 : 1)];
+      const bitsToRead = Math.min(this.bitsPending, bits);
+      const shift = this.bitsPending - bitsToRead;
+      bitBuffer =
+        (bitBuffer << bitsToRead) | ((byte >> shift) & ((1 << bitsToRead) - 1));
+
+      bits -= bitsToRead;
+      this.bitsPending -= bitsToRead;
+      if (this.bitsPending === 0) this.position++;
+    }
+
+    return bitBuffer;
+  }
+
+  seekTo(bitPos: number) {
+    this.position = Math.floor(bitPos / 8);
+    this.bitsPending = bitPos % 8 ? 8 - (bitPos % 8) : 0;
+    if (this.bitsPending > 0) this.position++;
+  }
+}
+
+export function unpackVertices(arrayBuffer: ArrayBuffer) {
+  const dataView = new DataView(arrayBuffer);
+  let ptr = ONEBYTE + 2 * FOURBYTE;
+
+  // Read the number of points
+  const pointsCount = dataView.getUint32(ptr, true);
+  ptr += FOURBYTE;
+
+  // Initialize position array
+  const posArray = new Float32Array(pointsCount * DIMENSIONS);
+
+  for (let dim = 0; dim < DIMENSIONS; dim++) {
+    ptr += ONEBYTE; // Skip unused byte
+    const bytesCount = dataView.getInt32(ptr, true) - 8;
+    ptr += FOURBYTE;
+
+    const significantBitsCount = dataView.getUint32(ptr, true);
+    ptr += FOURBYTE;
+
+    const commonBits = readCommonBits(dataView, ptr);
+    ptr += FOURBYTE;
+
+    const significantBits = readSignificantBits(dataView, ptr, bytesCount);
+    ptr += bytesCount;
+
+    // Read vertex data
+    for (let i = 0, j = dim; i < pointsCount; i++, j += DIMENSIONS) {
+      let value = significantBits.readBits(significantBitsCount) | commonBits;
+      if (dim === 2) value /= 100; // Adjust Z values
+      posArray[j] = value;
+    }
+  }
+
+  return posArray;
+}
+
+export function unpackEdges(arrayBuffer: ArrayBuffer) {
+  const dv = new DataView(arrayBuffer, METABYTES);
+  const indices = new Uint32Array((arrayBuffer.byteLength - METABYTES) / 4);
+  for (let i = 0; i < indices.length; i++) {
+    indices[i] = dv.getUint32(i * 4, true);
+  }
+  return indices;
+}
+
+function readSignificantBits(
+  dataView: DataView,
+  ptr: number,
+  bytesCount: number
+) {
+  const temp = new Int32Array(bytesCount / 4);
+  for (let i = 0; i < temp.length; i++, ptr += 4) {
+    temp[i] = dataView.getInt32(ptr);
+  }
+  return new BitStream(new Uint8Array(temp.buffer));
+}
+
+function readCommonBits(dataView: DataView, ptr: number) {
+  const temp = new Int32Array(1);
+  temp[0] = dataView.getInt32(ptr, false);
+  const combits = new BitStream(new Uint8Array(temp.buffer));
+  return combits.readBits(32);
+}

app/three/utils/request.ts

@@ -0,0 +1,8 @@
+export async function request(url: string) {
+  const response = await fetch(url);
+  if (response.ok) {
+    return response.arrayBuffer();
+  } else {
+    throw new Error("HTTP error status: " + response.status);
+  }
+}