First commit

2025-02-26 09:46:13 +01:00 · 2025-02-26 09:46:13 +01:00 · 7fe5d03a09
commit 7fe5d03a09
33 changed files with 6524 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
--- a/README.md
+++ b/README.md
@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
--- a/app/components/Map.tsx
+++ b/app/components/Map.tsx
@ -0,0 +1,16 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { init } from "../three/utils/init";
+import { initSimple } from "../three/simple-example";
+
+export function Map() {
+  const divRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!divRef.current) return;
+    init(divRef.current);
+    //initSimple(divRef.current);
+  }, [divRef]);
+
+  return <div className="w-full h-full" ref={divRef}></div>;
+}
--- a/app/favicon.ico
+++ b/app/favicon.ico
--- a/app/globals.css
+++ b/app/globals.css
@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "3D Viewer",
+  description: "A 3D viewer for geologic data, created by GeoSphere Austria",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}
--- a/app/page.tsx
+++ b/app/page.tsx
@ -0,0 +1,10 @@
+import { Map } from "./components/Map";
+export default function Home() {
+  return (
+    <div className="w-screen h-screen">
+      <main className="h-screen">
+        <Map></Map>
+      </main>
+    </div>
+  );
+}
--- a/app/three/config.ts
+++ b/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/";
--- a/app/three/main-webgpu.ts
+++ b/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);
+}
--- a/app/three/simple-example.js
+++ b/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);
+  }
+}
--- a/app/three/utils/build-default-lights.ts
+++ b/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);
+}
--- a/app/three/utils/build-meshes.ts
+++ b/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;
+}
--- a/app/three/utils/build-scene.ts
+++ b/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();
+}
--- a/app/three/utils/fetch-triangle-indices.ts
+++ b/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);
+}
--- a/app/three/utils/fetch-vertices.ts
+++ b/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);
+}
--- a/app/three/utils/get-layer-id.ts
+++ b/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);
+}
--- a/app/three/utils/get-metadata.ts
+++ b/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);
+  }
+}
--- a/app/three/utils/init.ts
+++ b/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]);
+}
--- a/app/three/utils/parsers.ts
+++ b/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);
+}
--- a/app/three/utils/request.ts
+++ b/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);
+  }
+}
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;
--- a/index.d.ts
+++ b/index.d.ts
@ -0,0 +1,7 @@
+export {};
+
+declare global {
+  interface Window {
+    _paq: any;
+  }
+}
--- a/next.config.ts
+++ b/next.config.ts
@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,30 @@
+{
+  "name": "3d-viewer",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "15.1.7",
+    "proj4": "^2.15.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "three": "^0.173.0"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@types/three": "^0.173.0",
+    "eslint": "^9",
+    "eslint-config-next": "15.1.7",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
--- a/public/file.svg
+++ b/public/file.svg
@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
--- a/public/globe.svg
+++ b/public/globe.svg
@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
--- a/public/next.svg
+++ b/public/next.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
--- a/public/vercel.svg
+++ b/public/vercel.svg
@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
--- a/public/window.svg
+++ b/public/window.svg
@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -0,0 +1,18 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
				`@ -0,0 +1 @@`
				`<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>`
				`@ -0,0 +1 @@`
				<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
				`@ -0,0 +1 @@`
				`<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>`