First commit

app/three/config.ts

@@ -0,0 +1,7 @@
+export const MODEL_ID = "20";
+export const SERVICE_URL =
+  "https://geusegdi01.geus.dk/meta3d/rpc/model_meta_all?modelid=";
+
+export const VERTICES_URL = "https://geusegdi01.geus.dk/geom3d/data/nodes/";
+export const TRIANGLE_INDICES_URL =
+  "https://geusegdi01.geus.dk/geom3d/data/triangles/";

app/three/main-webgpu.ts

@@ -0,0 +1,195 @@
+import * as THREE from "three";
+
+import {
+  positionGeometry,
+  cameraProjectionMatrix,
+  modelViewProjection,
+  modelScale,
+  positionView,
+  modelViewMatrix,
+  storage,
+  attribute,
+  float,
+  timerLocal,
+  uniform,
+  tslFn,
+  vec3,
+  vec4,
+  rotate,
+  PI2,
+  sin,
+  cos,
+  instanceIndex,
+  negate,
+  texture,
+  uv,
+  vec2,
+  positionLocal,
+  int,
+  Fn,
+} from "three/tsl";
+
+import { OrbitControls } from "three/addons/controls/OrbitControls.js";
+import GUI from "three/addons/libs/lil-gui.module.min.js";
+
+let camera: THREE.PerspectiveCamera;
+let scene: THREE.Scene;
+let mesh: THREE.Mesh;
+//@ts-ignore
+let renderer: THREE.WebGPURenderer;
+
+init();
+
+function init() {
+  camera = new THREE.PerspectiveCamera(
+    70,
+    window.innerWidth / window.innerHeight,
+    0.1,
+    100
+  );
+  camera.position.z = 15;
+
+  scene = new THREE.Scene();
+
+  const instanceCount = 80;
+  const numCircles = 4;
+  const meshesPerCircle = instanceCount / numCircles;
+
+  const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1);
+
+  const texture = new THREE.TextureLoader().load("textures/crate.gif");
+  texture.colorSpace = THREE.SRGBColorSpace;
+
+  // @ts-ignore
+  const material = new THREE.MeshStandardNodeMaterial({ map: texture });
+
+  const effectController = {
+    uCircleRadius: uniform(1.0),
+    uCircleSpeed: uniform(0.5),
+    uSeparationStart: uniform(1.0),
+    uSeparationEnd: uniform(2.0),
+    uCircleBounce: uniform(0.02),
+  };
+
+  const positionTSL = Fn(() => {
+    // Destructure uniforms
+    const {
+      uCircleRadius,
+      uCircleSpeed,
+      uSeparationStart,
+      uSeparationEnd,
+      uCircleBounce,
+    } = effectController;
+
+    // Access the time elapsed since shader creation.
+    const time = timerLocal();
+    const circleSpeed = time.mul(uCircleSpeed);
+
+    // Index of a cube within its respective circle.
+    const instanceWithinCircle = instanceIndex.modInt(meshesPerCircle);
+
+    // Index of the circle that the cube mesh belongs to.
+    const circleIndex = instanceIndex.div(meshesPerCircle).add(1);
+
+    // Circle Index Even = 1, Circle Index Odd = -1.
+    const evenOdd = circleIndex.modInt(2).mul(2).oneMinus();
+
+    // Increase radius when we enter the next circle.
+    const circleRadius = uCircleRadius.mul(circleIndex);
+
+    // Normalize instanceWithinCircle to range [0, 2*PI].
+    const angle = float(instanceWithinCircle)
+      .div(meshesPerCircle)
+      .mul(PI2)
+      .add(circleSpeed);
+
+    // Rotate even and odd circles in opposite directions.
+    const circleX = sin(angle).mul(circleRadius).mul(evenOdd);
+    const circleY = cos(angle).mul(circleRadius);
+
+    // Scale cubes in later concentric circles to be larger.
+    const scalePosition = positionLocal.mul(circleIndex);
+
+    // Rotate the individual cubes that form the concentric circles.
+    const rotatePosition = rotate(scalePosition, vec3(time, time, time));
+
+    // Control how much the circles bounce vertically.
+    const bounceOffset = cos(time.mul(10)).mul(uCircleBounce);
+
+    // Bounce odd and even circles in opposite directions.
+    const bounce = circleIndex
+      .modInt(2)
+      .equal(0)
+      .cond(bounceOffset, negate(bounceOffset));
+
+    // Distance between minimumn and maximumn z-distance between circles.
+    const separationDistance = uSeparationEnd.sub(uSeparationStart);
+
+    // Move sin into range of 0 to 1.
+    const sinRange = sin(time).add(1).mul(0.5);
+
+    // Make circle separation oscillate in a range of separationStart to separationEnd
+    const separation = uSeparationStart.add(sinRange.mul(separationDistance));
+
+    // Y pos offset by bounce. Z-distance from the origin increases with each circle.
+    const newPosition = rotatePosition.add(
+      vec3(circleX, circleY.add(bounce), float(circleIndex).mul(separation))
+    );
+    return newPosition;
+  });
+
+  material.positionNode = positionTSL();
+  //material.colorNode = texture( crateTexture, uv().add( vec2( timerLocal(), negate( timerLocal()) ) ));
+  const r = sin(timerLocal().add(instanceIndex));
+  const g = cos(timerLocal().add(instanceIndex));
+  const b = sin(timerLocal());
+  material.fragmentNode = vec4(r, g, b, 1.0);
+
+  mesh = new THREE.InstancedMesh(geometry, material, instanceCount);
+  scene.add(mesh);
+
+  const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+  directionalLight.position.set(5, 3, -7.5);
+  scene.add(directionalLight);
+
+  // @ts-ignore
+  renderer = new THREE.WebGPURenderer({ antialias: false });
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  renderer.setAnimationLoop(animate);
+  document.body.appendChild(renderer.domElement);
+
+  const controls = new OrbitControls(camera, renderer.domElement);
+  controls.minDistance = 1;
+  controls.maxDistance = 30;
+
+  const gui = new GUI();
+  gui
+    .add(effectController.uCircleRadius, "value", 0.1, 3.0, 0.1)
+    .name("Circle Radius");
+  gui
+    .add(effectController.uCircleSpeed, "value", 0.1, 3.0, 0.1)
+    .name("Circle Speed");
+  gui
+    .add(effectController.uSeparationStart, "value", 0.5, 4, 0.1)
+    .name("Separation Start");
+  gui
+    .add(effectController.uSeparationEnd, "value", 1.0, 5.0, 0.1)
+    .name("Separation End");
+  gui
+    .add(effectController.uCircleBounce, "value", 0.01, 0.2, 0.001)
+    .name("Circle Bounce");
+
+  window.addEventListener("resize", onWindowResize);
+}
+
+function onWindowResize() {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+
+  renderer.setSize(window.innerWidth, window.innerHeight);
+}
+
+function animate() {
+  renderer.render(scene, camera);
+}

app/three/simple-example.js

@@ -0,0 +1,30 @@
+import * as THREE from "three";
+
+export function initSimple(container) {
+  const scene = new THREE.Scene();
+  const camera = new THREE.PerspectiveCamera(
+    75,
+    window.innerWidth / window.innerHeight,
+    0.1,
+    1000
+  );
+
+  const renderer = new THREE.WebGLRenderer();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  renderer.setAnimationLoop(animate);
+  container.appendChild(renderer.domElement);
+
+  const geometry = new THREE.BoxGeometry(1, 1, 1);
+  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
+  const cube = new THREE.Mesh(geometry, material);
+  scene.add(cube);
+
+  camera.position.z = 5;
+
+  function animate() {
+    cube.rotation.x += 0.01;
+    cube.rotation.y += 0.01;
+
+    renderer.render(scene, camera);
+  }
+}

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);
+  }
+}