From 3cbea0d21efcf34f16432fdb11b56c1b84f386cd Mon Sep 17 00:00:00 2001
From: Mark Kalsbeek <Mark@Kalsbeek.dev>
Date: Tue, 20 Jan 2026 23:03:24 +0100
Subject: [PATCH] sweet progress

---
 tooling/las2mound.py |  34 ++++
 ui/src/App1.vue      | 210 +++++++++++++++++++++++
 ui/src/App2.vue      | 398 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 642 insertions(+)
 create mode 100644 ui/src/App1.vue
 create mode 100644 ui/src/App2.vue

diff --git a/tooling/las2mound.py b/tooling/las2mound.py
index 10f5157..32e28dd 100644
--- a/tooling/las2mound.py
+++ b/tooling/las2mound.py
@@ -4,6 +4,40 @@ Convert LAS lidar files to .mound binary format for Three.js rendering.
 
 Usage:
     python las_to_mound.py input.las output.mound
+
+.mound Binary Format Specification
+==================================
+
+Header (64 bytes):
+    Offset  Size  Type        Description
+    ------  ----  ----------  -----------
+    0       4     char[4]     Magic number: 'LIDR'
+    4       4     uint32      Version number (currently 1)
+    8       4     uint32      Point count (number of vertices)
+    12      4     uint32      Triangle count (number of triangles)
+    16      4     float32     Min X coordinate
+    20      4     float32     Min Y coordinate
+    24      4     float32     Min Z coordinate
+    28      4     float32     Max X coordinate
+    32      4     float32     Max Y coordinate
+    36      4     float32     Max Z coordinate
+    40      24    bytes       Reserved (padding to 64 bytes)
+
+Vertex Data (point_count * 12 bytes):
+    Series of vertices in XYZ float32 triplets.
+    Total size: point_count * 3 * 4 bytes
+
+Index Data (triangle_count * 12 bytes):
+    Series of triangle indices (3 uint32 per triangle).
+    Each index references a vertex in the vertex data.
+    Total size: triangle_count * 3 * 4 bytes
+
+Example layout for 100 points and 50 triangles:
+    Bytes 0-63:         Header
+    Bytes 64-1263:      Vertex data (100 * 12)
+    Bytes 1264-1863:    Index data (50 * 12)
+    Total file size:    1864 bytes
+
 """
 
 import sys
diff --git a/ui/src/App1.vue b/ui/src/App1.vue
new file mode 100644
index 0000000..9cedb4f
--- /dev/null
+++ b/ui/src/App1.vue
@@ -0,0 +1,210 @@
+<template>
+  <div id="app">
+    <canvas ref="canvas" class="canvas"></canvas>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+
+export default {
+  name: 'App1',
+  setup() {
+    const canvas = ref(null);
+    let scene, camera, renderer, controls;
+
+    const parseMoundFile = async (url) => {
+      const response = await fetch(url);
+      const buffer = await response.arrayBuffer();
+      
+      const view = new DataView(buffer);
+      let offset = 0;
+      
+      const magic = String.fromCharCode(
+        view.getUint8(offset++),
+        view.getUint8(offset++),
+        view.getUint8(offset++),
+        view.getUint8(offset++)
+      );
+      
+      if (magic !== 'LIDR') {
+        throw new Error('Invalid .mound file');
+      }
+      
+      const version = view.getUint32(offset, true); offset += 4;
+      const pointCount = view.getUint32(offset, true); offset += 4;
+      const triangleCount = view.getUint32(offset, true); offset += 4;
+      const minX = view.getFloat32(offset, true); offset += 4;
+      const minY = view.getFloat32(offset, true); offset += 4;
+      const minZ = view.getFloat32(offset, true); offset += 4;
+      const maxX = view.getFloat32(offset, true); offset += 4;
+      const maxY = view.getFloat32(offset, true); offset += 4;
+      const maxZ = view.getFloat32(offset, true); offset += 4;
+      offset += 24; // Skip reserved
+      
+      const positions = new Float32Array(buffer, offset, pointCount * 3);
+      offset += pointCount * 3 * 4;
+      
+      const indices = new Uint32Array(buffer, offset, triangleCount * 3);
+      
+      return {
+        pointCount,
+        triangleCount,
+        bounds: { minX, minY, minZ, maxX, maxY, maxZ },
+        positions,
+        indices
+      };
+    };
+
+    const loadLidarTile = async () => {
+      try {
+        console.log('Loading BS19820747...');
+        const data = await parseMoundFile('/tiles/BS19820747.mound');
+        
+        console.log('Bounds:', data.bounds);
+        console.log('Points:', data.pointCount);
+        console.log('Triangles:', data.triangleCount);
+        
+        const geometry = new THREE.BufferGeometry();
+        
+        // Calculate center and scale first
+        const centerX = (data.bounds.minX + data.bounds.maxX) / 2;
+        const centerY = (data.bounds.minY + data.bounds.maxY) / 2;
+        const centerZ = (data.bounds.minZ + data.bounds.maxZ) / 2;
+        
+        const spanX = data.bounds.maxX - data.bounds.minX;
+        const spanY = data.bounds.maxY - data.bounds.minY;
+        const spanZ = data.bounds.maxZ - data.bounds.minZ;
+        const maxSpan = Math.max(spanX, spanY);
+        
+        console.log('Center:', centerX, centerY, centerZ);
+        console.log('Span X:', spanX, 'Y:', spanY, 'Z:', spanZ);
+        console.log('Max span:', maxSpan);
+        
+        // Transform vertices: center and scale
+        const normalizeScale = 10 / maxSpan;
+        const zScale = normalizeScale * (maxSpan * 0.1) / spanZ;
+        
+        console.log('Normalize scale:', normalizeScale);
+        console.log('Z scale:', zScale);
+        
+        // Create new position array with transformed coordinates
+        const transformedPositions = new Float32Array(data.positions.length);
+        for (let i = 0; i < data.positions.length; i += 3) {
+          transformedPositions[i]     = (data.positions[i]     - centerX) * normalizeScale;  // X
+          transformedPositions[i + 1] = (data.positions[i + 1] - centerY) * normalizeScale;  // Y
+          transformedPositions[i + 2] = (data.positions[i + 2] - centerZ) * zScale;          // Z
+        }
+        
+        geometry.setAttribute('position', new THREE.BufferAttribute(transformedPositions, 3));
+        geometry.setIndex(new THREE.BufferAttribute(data.indices, 1));
+        geometry.computeVertexNormals();
+        
+        console.log('First few transformed positions:', transformedPositions.slice(0, 15));
+        
+        const material = new THREE.MeshLambertMaterial({
+          color: 0x8B7355,
+          side: THREE.DoubleSide,
+          wireframe: true
+        });
+        
+        const mesh = new THREE.Mesh(geometry, material);
+        scene.add(mesh);
+        
+        console.log('Mesh added to scene at origin');
+        
+      } catch (err) {
+        console.error('Failed to load tile:', err);
+      }
+    };
+
+    onMounted(() => {
+      // Scene
+      scene = new THREE.Scene();
+      scene.background = new THREE.Color(0x87CEEB);
+
+      // Camera
+      camera = new THREE.PerspectiveCamera(
+        75,
+        window.innerWidth / window.innerHeight,
+        0.1,
+        1000
+      );
+      camera.position.set(0, -15, 10);
+      camera.lookAt(0, 0, 0);
+
+      // Renderer
+      renderer = new THREE.WebGLRenderer({
+        canvas: canvas.value,
+        antialias: true
+      });
+      renderer.setSize(window.innerWidth, window.innerHeight);
+
+      // OrbitControls for pan, orbit, zoom
+      controls = new OrbitControls(camera, canvas.value);
+      controls.enableDamping = true;
+      controls.dampingFactor = 0.05;
+      controls.target.set(0, 0, 0);
+
+      // Lights for the terrain
+      const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
+      scene.add(ambientLight);
+      
+      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+      directionalLight.position.set(5, 5, 10);
+      scene.add(directionalLight);
+
+      // Axes helper
+      const axesHelper = new THREE.AxesHelper(15);
+      scene.add(axesHelper);
+
+      // Load lidar
+      loadLidarTile();
+
+      // Animation loop
+      const animate = () => {
+        requestAnimationFrame(animate);
+        controls.update();
+        renderer.render(scene, camera);
+      };
+      
+      animate();
+
+      // Handle resize
+      window.addEventListener('resize', () => {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+      });
+
+      console.log('Three.js initialized');
+      console.log('Scene:', scene);
+      console.log('Camera:', camera);
+    });
+
+    return { canvas };
+  }
+};
+</script>
+
+<style scoped>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+#app {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/ui/src/App2.vue b/ui/src/App2.vue
new file mode 100644
index 0000000..da9e4e8
--- /dev/null
+++ b/ui/src/App2.vue
@@ -0,0 +1,398 @@
+<template>
+  <div id="app">
+    <canvas ref="canvas" class="canvas"></canvas>
+    
+    <div class="control-panel">
+      <div class="control-group">
+        <label>Light Azimuth (E-W)</label>
+        <input 
+          v-model.number="controls_state.azimuth" 
+          type="range" 
+          min="0" 
+          max="360" 
+          step="1"
+          @input="onControlChange"
+        />
+        <span class="value">{{ Math.round(controls_state.azimuth) }}°</span>
+      </div>
+      
+      <div class="control-group">
+        <label>Light Altitude (N-S)</label>
+        <input 
+          v-model.number="controls_state.altitude" 
+          type="range" 
+          min="0" 
+          max="90" 
+          step="1"
+          @input="onControlChange"
+        />
+        <span class="value">{{ Math.round(controls_state.altitude) }}°</span>
+      </div>
+      
+      <div class="control-group">
+        <label>Light Intensity</label>
+        <input 
+          v-model.number="controls_state.intensity" 
+          type="range" 
+          min="0" 
+          max="2" 
+          step="0.1"
+          @input="onControlChange"
+        />
+        <span class="value">{{ controls_state.intensity.toFixed(1) }}</span>
+      </div>
+      
+      <div class="control-group">
+        <label>Height Exaggeration</label>
+        <input 
+          v-model.number="controls_state.heightScale" 
+          type="range" 
+          min="0.1" 
+          max="10" 
+          step="0.1"
+          @input="onControlChange"
+        />
+        <span class="value">{{ controls_state.heightScale.toFixed(1) }}x</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+
+export default {
+  name: 'App1',
+  setup() {
+    const canvas = ref(null);
+    let scene, camera, renderer, threeControls, mesh, directionalLight;
+    
+    const controls_state = ref({
+      azimuth: 45,
+      altitude: 45,
+      intensity: 0.8,
+      heightScale: 1
+    });
+    
+    let geometryCache = null;
+    let centerX, centerY, centerZ, spanZ, normalizeScale;
+
+    const parseMoundFile = async (url) => {
+      const response = await fetch(url);
+      const buffer = await response.arrayBuffer();
+      
+      const view = new DataView(buffer);
+      let offset = 0;
+      
+      const magic = String.fromCharCode(
+        view.getUint8(offset++),
+        view.getUint8(offset++),
+        view.getUint8(offset++),
+        view.getUint8(offset++)
+      );
+      
+      if (magic !== 'LIDR') {
+        throw new Error('Invalid .mound file');
+      }
+      
+      const version = view.getUint32(offset, true); offset += 4;
+      const pointCount = view.getUint32(offset, true); offset += 4;
+      const triangleCount = view.getUint32(offset, true); offset += 4;
+      const minX = view.getFloat32(offset, true); offset += 4;
+      const minY = view.getFloat32(offset, true); offset += 4;
+      const minZ = view.getFloat32(offset, true); offset += 4;
+      const maxX = view.getFloat32(offset, true); offset += 4;
+      const maxY = view.getFloat32(offset, true); offset += 4;
+      const maxZ = view.getFloat32(offset, true); offset += 4;
+      offset += 24; // Skip reserved
+      
+      const positions = new Float32Array(buffer, offset, pointCount * 3);
+      offset += pointCount * 3 * 4;
+      
+      const indices = new Uint32Array(buffer, offset, triangleCount * 3);
+      
+      return {
+        pointCount,
+        triangleCount,
+        bounds: { minX, minY, minZ, maxX, maxY, maxZ },
+        positions,
+        indices
+      };
+    };
+
+    const loadLidarTile = async () => {
+      try {
+        console.log('Loading BS19820747...');
+        const data = await parseMoundFile('/tiles/BS19820747.mound');
+        
+        console.log('Bounds:', data.bounds);
+        console.log('Points:', data.pointCount);
+        console.log('Triangles:', data.triangleCount);
+        
+        const geometry = new THREE.BufferGeometry();
+        
+        // Calculate center and scale first
+        centerX = (data.bounds.minX + data.bounds.maxX) / 2;
+        centerY = (data.bounds.minY + data.bounds.maxY) / 2;
+        centerZ = (data.bounds.minZ + data.bounds.maxZ) / 2;
+        
+        const spanX = data.bounds.maxX - data.bounds.minX;
+        const spanY = data.bounds.maxY - data.bounds.minY;
+        spanZ = data.bounds.maxZ - data.bounds.minZ;
+        const maxSpan = Math.max(spanX, spanY);
+        
+        console.log('Center:', centerX, centerY, centerZ);
+        console.log('Span X:', spanX, 'Y:', spanY, 'Z:', spanZ);
+        console.log('Max span:', maxSpan);
+        
+        // Transform vertices: center and scale
+        normalizeScale = 10 / maxSpan;
+        const zScale = normalizeScale * (maxSpan * 0.1) / spanZ;
+        
+        console.log('Normalize scale:', normalizeScale);
+        console.log('Z scale:', zScale);
+        
+        // Create new position array with transformed coordinates
+        const transformedPositions = new Float32Array(data.positions.length);
+        for (let i = 0; i < data.positions.length; i += 3) {
+          transformedPositions[i]     = (data.positions[i]     - centerX) * normalizeScale;  // X
+          transformedPositions[i + 1] = (data.positions[i + 1] - centerY) * normalizeScale;  // Y
+          transformedPositions[i + 2] = (data.positions[i + 2] - centerZ) * zScale;          // Z
+        }
+        
+        geometry.setAttribute('position', new THREE.BufferAttribute(transformedPositions, 3));
+        geometry.setIndex(new THREE.BufferAttribute(data.indices, 1));
+        geometry.computeVertexNormals();
+        
+        geometryCache = { geometry, baseZ: new Float32Array(data.positions.map((v, i) => i % 3 === 2 ? (v - centerZ) * zScale : 0)), zScale };
+        
+        console.log('First few transformed positions:', transformedPositions.slice(0, 15));
+        
+        const material = new THREE.MeshLambertMaterial({
+          color: 0x8B7355,
+          side: THREE.DoubleSide,
+          wireframe: false
+        });
+        
+        mesh = new THREE.Mesh(geometry, material);
+        scene.add(mesh);
+        
+        // Apply initial height scale
+        updateHeightScale();
+        
+        console.log('Mesh added to scene at origin');
+        
+      } catch (err) {
+        console.error('Failed to load tile:', err);
+      }
+    };
+    
+    const updateHeightScale = () => {
+      if (!geometryCache) return;
+      
+      const positions = geometryCache.geometry.attributes.position.array;
+      const exaggeration = controls_state.value.heightScale;
+      
+      // Only every 3rd value (Z coordinate)
+      for (let i = 2; i < positions.length; i += 3) {
+        positions[i] = geometryCache.baseZ[i] * exaggeration;
+      }
+      
+      geometryCache.geometry.attributes.position.needsUpdate = true;
+      geometryCache.geometry.computeVertexNormals();
+    };
+    
+    const updateLightPosition = () => {
+      if (!directionalLight) return;
+      
+      const azimuth = (controls_state.value.azimuth * Math.PI) / 180;
+      const altitude = (controls_state.value.altitude * Math.PI) / 180;
+      
+      const distance = 20;
+      const x = Math.cos(azimuth) * Math.cos(altitude) * distance;
+      const y = Math.sin(azimuth) * Math.cos(altitude) * distance;
+      const z = Math.sin(altitude) * distance;
+      
+      directionalLight.position.set(x, y, z);
+      directionalLight.intensity = controls_state.value.intensity;
+    };
+    
+    const onControlChange = () => {
+      updateLightPosition();
+      updateHeightScale();
+    };
+
+    onMounted(() => {
+      // Scene
+      scene = new THREE.Scene();
+      scene.background = new THREE.Color(0x87CEEB);
+
+      // Camera
+      camera = new THREE.PerspectiveCamera(
+        75,
+        window.innerWidth / window.innerHeight,
+        0.1,
+        1000
+      );
+      camera.position.set(0, -15, 10);
+      camera.lookAt(0, 0, 0);
+
+      // Renderer
+      renderer = new THREE.WebGLRenderer({
+        canvas: canvas.value,
+        antialias: true
+      });
+      renderer.setSize(window.innerWidth, window.innerHeight);
+
+      // OrbitControls for pan, orbit, zoom
+      threeControls = new OrbitControls(camera, canvas.value);
+      threeControls.enableDamping = true;
+      threeControls.dampingFactor = 0.05;
+      threeControls.target.set(0, 0, 0);
+
+      // Lights for the terrain
+      const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
+      scene.add(ambientLight);
+      
+      directionalLight = new THREE.DirectionalLight(0xffffff, controls_state.value.intensity);
+      scene.add(directionalLight);
+      
+      // Set initial light position
+      updateLightPosition();
+
+      // Axes helper
+      const axesHelper = new THREE.AxesHelper(15);
+      scene.add(axesHelper);
+
+      // Load lidar
+      loadLidarTile();
+
+      // Animation loop
+      const animate = () => {
+        requestAnimationFrame(animate);
+        threeControls.update();
+        renderer.render(scene, camera);
+      };
+      
+      animate();
+
+      // Handle resize
+      window.addEventListener('resize', () => {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+      });
+
+      console.log('Three.js initialized');
+      console.log('Scene:', scene);
+      console.log('Camera:', camera);
+    });
+
+    return { canvas, controls_state, onControlChange };
+  }
+};
+</script>
+
+<style scoped>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+#app {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  position: relative;
+}
+
+.canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.control-panel {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background: rgba(0, 0, 0, 0.75);
+  border-radius: 8px;
+  padding: 16px;
+  width: 280px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  color: white;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  z-index: 100;
+}
+
+.control-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.control-group:last-child {
+  margin-bottom: 0;
+}
+
+.control-group label {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  opacity: 0.9;
+}
+
+.control-group input[type="range"] {
+  width: 100%;
+  height: 4px;
+  -webkit-appearance: none;
+  appearance: none;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 2px;
+  outline: none;
+  cursor: pointer;
+}
+
+.control-group input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  background: #4A9EFF;
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  transition: background 0.2s;
+}
+
+.control-group input[type="range"]::-webkit-slider-thumb:hover {
+  background: #5BADFF;
+}
+
+.control-group input[type="range"]::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  background: #4A9EFF;
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  transition: background 0.2s;
+}
+
+.control-group input[type="range"]::-moz-range-thumb:hover {
+  background: #5BADFF;
+}
+
+.value {
+  font-size: 11px;
+  opacity: 0.7;
+  font-variant-numeric: tabular-nums;
+}
+</style>
\ No newline at end of file