Upload folder using huggingface_hub

README.md

@@ -1,10 +1,9 @@
 ---
 title: Noddyverse Explorer
-emoji: ⚡
+emoji: 🌍
 colorFrom: indigo
 colorTo: purple
 sdk: static
 pinned: false
+license: cc-by-4.0
 ---
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

data/DYKE_DYKE_DYKE_20-09-04-15-13-14-866983543.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1215f1671c79daed89572026684478ad66643cfdabd58dacd5ced72b1820295a
+size 191228

data/DYKE_DYKE_DYKE_20-09-04-15-23-15-571651575.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2e335c56932875fec55e217f0ebc944b062c1ab6051edf6aea668a91ed618a90
+size 226916

data/DYKE_FAULT_FOLD_20-09-04-15-10-34-746860823.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c7ea625855c7681ac89e87f6cbe330adc722e3fd61d4ce14e765dd02f0949dd8
+size 155568

data/DYKE_FAULT_FOLD_20-09-04-15-27-15-271172160.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4530bd3891cc3ab09fcb4c2abeda30a36daf7d70be0bf02a5434e80f302d3859
+size 134164

data/FAULT_FAULT_FAULT_20-09-04-15-10-55-650240871.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:741111b45dc60cb13d3f51a5aa29ab28e42d23621e49a7dbab2b9736d4a44542
+size 98656

data/FAULT_FAULT_FAULT_20-09-04-15-11-35-249388807.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a6a765c66858a3ab937bb62f0857d34ce73e8c5d35d32e97cba683b5a3c1c384
+size 166864

data/FOLD_FAULT_UNCONFORMITY_20-09-04-15-22-57-108968161.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0450a70a95af152ab9f99e62aa37d4ff3f51b639c6c1e731f72d043ade007d82
+size 218080

data/FOLD_FAULT_UNCONFORMITY_20-09-04-15-30-27-806964861.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:58731e5604c8d53d36818b5362ae81c0bca098272583990f09a056542f08b269
+size 163704

data/FOLD_FOLD_FOLD_20-09-04-15-10-30-738239236.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:46ae7a106e81bafa2603cb0032aca17ebe8692cd6e14eae727739067adbec43c
+size 195044

data/FOLD_FOLD_FOLD_20-09-04-15-12-01-552434953.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e4023c6525926410353a891996a4ffc36280b2ac692c71052f74fa9f8b9a54fa
+size 213584

data/PLUG_PLUG_PLUG_20-09-04-15-22-31-290339215.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:19c185592ea6c0ef28ddfc9744c5ad11860ff8e26d7b1a2c6635ee54ce665d46
+size 142584

data/PLUG_PLUG_PLUG_20-09-04-15-34-27-811124008.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b4707c4cc5b6c462478c56aae405c70f9c64834661eba11600330b410e07020f
+size 168924

data/PLUG_SHEAR-ZONE_TILT_20-09-04-15-13-16-695630284.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8986ee495e0598b5f05d3e100f8e47777b9b56a11d40329383350af835de9341
+size 160436

data/PLUG_SHEAR-ZONE_TILT_20-09-04-15-20-46-049109221.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2a3e20aaa5284c9cef7b4a5a1c88aef3a9d3dbb68ba7859ef717afc50d7016e9
+size 130188

data/SHEAR-ZONE_SHEAR-ZONE_SHEAR-ZONE_20-09-04-15-11-17-868781593.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9cd03e94ecc4b065321005cef3cb481436ee4b382fcab3259e163e42fc3fd81d
+size 95184

data/SHEAR-ZONE_SHEAR-ZONE_SHEAR-ZONE_20-09-04-15-12-07-100352181.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:04b109a4d55e095ca49918095ac5dfc11a28785a23544548f625a76be7d707fd
+size 100024

data/TILT_TILT_TILT_20-09-04-15-54-46-708920477.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9b041e761750f6d63541995137676fc587d4e419e123ac8436d41213b21d2b12
+size 100544

data/TILT_TILT_TILT_20-09-04-16-40-18-405539396.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b6b23e2ea0239c1f354093b2935d8ee8e7a6d465d1c21a8ea8f69828de7359e2
+size 140024

data/UNCONFORMITY_UNCONFORMITY_UNCONFORMITY_20-09-04-15-16-52-886739346.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a6d6c23ba5abd1e5477c9909499e3bf8c66ca92169e41366a23f2b23cb4dab0a
+size 125824

data/UNCONFORMITY_UNCONFORMITY_UNCONFORMITY_20-09-04-15-41-38-711387686.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:52966bdf684d2867aeaec50f294c475b83e799f16770758b2bd4281a467d0e81
+size 139676

data/manifest.json

@@ -0,0 +1,46 @@
+{
+  "grid_size": 50,
+  "field_size": 100,
+  "types": {
+    "DYKE_DYKE_DYKE": [
+      "DYKE_DYKE_DYKE_20-09-04-15-13-14-866983543.bin",
+      "DYKE_DYKE_DYKE_20-09-04-15-23-15-571651575.bin"
+    ],
+    "DYKE_FAULT_FOLD": [
+      "DYKE_FAULT_FOLD_20-09-04-15-10-34-746860823.bin",
+      "DYKE_FAULT_FOLD_20-09-04-15-27-15-271172160.bin"
+    ],
+    "FAULT_FAULT_FAULT": [
+      "FAULT_FAULT_FAULT_20-09-04-15-10-55-650240871.bin",
+      "FAULT_FAULT_FAULT_20-09-04-15-11-35-249388807.bin"
+    ],
+    "FOLD_FAULT_UNCONFORMITY": [
+      "FOLD_FAULT_UNCONFORMITY_20-09-04-15-22-57-108968161.bin",
+      "FOLD_FAULT_UNCONFORMITY_20-09-04-15-30-27-806964861.bin"
+    ],
+    "FOLD_FOLD_FOLD": [
+      "FOLD_FOLD_FOLD_20-09-04-15-10-30-738239236.bin",
+      "FOLD_FOLD_FOLD_20-09-04-15-12-01-552434953.bin"
+    ],
+    "PLUG_PLUG_PLUG": [
+      "PLUG_PLUG_PLUG_20-09-04-15-22-31-290339215.bin",
+      "PLUG_PLUG_PLUG_20-09-04-15-34-27-811124008.bin"
+    ],
+    "PLUG_SHEAR-ZONE_TILT": [
+      "PLUG_SHEAR-ZONE_TILT_20-09-04-15-13-16-695630284.bin",
+      "PLUG_SHEAR-ZONE_TILT_20-09-04-15-20-46-049109221.bin"
+    ],
+    "SHEAR-ZONE_SHEAR-ZONE_SHEAR-ZONE": [
+      "SHEAR-ZONE_SHEAR-ZONE_SHEAR-ZONE_20-09-04-15-11-17-868781593.bin",
+      "SHEAR-ZONE_SHEAR-ZONE_SHEAR-ZONE_20-09-04-15-12-07-100352181.bin"
+    ],
+    "TILT_TILT_TILT": [
+      "TILT_TILT_TILT_20-09-04-15-54-46-708920477.bin",
+      "TILT_TILT_TILT_20-09-04-16-40-18-405539396.bin"
+    ],
+    "UNCONFORMITY_UNCONFORMITY_UNCONFORMITY": [
+      "UNCONFORMITY_UNCONFORMITY_UNCONFORMITY_20-09-04-15-16-52-886739346.bin",
+      "UNCONFORMITY_UNCONFORMITY_UNCONFORMITY_20-09-04-15-41-38-711387686.bin"
+    ]
+  }
+}

index.html

@@ -1,19 +1,579 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Noddyverse Explorer</title>
+<style>
+*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+/* ── Splash screen (dark, with fluid) ── */
+#splash{position:fixed;top:0;left:0;width:100%;height:100%;z-index:200;background:#070410;
+  display:flex;align-items:center;justify-content:center;flex-direction:column;cursor:pointer;
+  transition:opacity 0.8s ease;font-family:'Inter',system-ui,sans-serif}
+#splash.hidden{opacity:0;pointer-events:none}
+#fluid-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:201;pointer-events:none}
+#splash-content{position:relative;z-index:202;text-align:center;color:#e0dce8;pointer-events:none;max-width:620px;padding:0 24px}
+#splash-content h1{font-size:3rem;font-weight:700;
+  background:linear-gradient(135deg,#7c3aed,#a855f7,#6366f1);
+  -webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:16px;letter-spacing:-0.03em}
+#splash-content p{font-size:1.05rem;color:#9a92ad;line-height:1.6;margin-bottom:32px}
+#splash-content .cta{font-size:0.85rem;color:#6366f1;letter-spacing:0.1em;text-transform:uppercase;
+  animation:pulse 2s ease-in-out infinite}
+@keyframes pulse{0%,100%{opacity:0.5}50%{opacity:1}}
+
+/* ── App (light theme) ── */
+:root{--bg:#f8f9fc;--surface:#ffffff;--surface2:#f0f1f5;--border:#e2e4ea;
+  --text:#1a1a2e;--text2:#6b7084;--accent:#7c3aed;--accent2:#a855f7}
+html,body{height:100%;overflow:hidden;font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text)}
+#app{position:relative;z-index:1;display:flex;height:100vh;opacity:0;transition:opacity 0.6s ease 0.4s}
+#app.visible{opacity:1}
+
+/* Sidebar */
+#sidebar{width:270px;min-width:270px;background:var(--surface);
+  border-right:1px solid var(--border);padding:20px;display:flex;flex-direction:column;gap:14px;overflow-y:auto}
+#sidebar h1{font-size:1.2rem;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent2));
+  -webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-0.02em}
+#sidebar p.sub{font-size:0.72rem;color:var(--text2);line-height:1.5;margin-top:-6px}
+.control-group{display:flex;flex-direction:column;gap:5px}
+.control-group label{font-size:0.65rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--text2);font-weight:600}
+select{background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:8px;
+  padding:9px 32px 9px 10px;font-size:0.82rem;cursor:pointer;outline:none;transition:border-color 0.2s;
+  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7084'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+  background-repeat:no-repeat;background-position:right 10px center}
+select:hover,select:focus{border-color:var(--accent)}
+
+.info-card{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px;font-size:0.72rem;line-height:1.6}
+.info-card .label{color:var(--text2);font-size:0.62rem;text-transform:uppercase;letter-spacing:0.06em}
+.info-card .value{color:var(--text);font-weight:600}
+.legend{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
+.legend-item{display:flex;align-items:center;gap:3px;font-size:0.62rem;color:var(--text2)}
+.legend-swatch{width:10px;height:10px;border-radius:2px;border:1px solid rgba(0,0,0,0.1)}
+
+.credits{font-size:0.58rem;color:var(--text2);line-height:1.5;margin-top:auto;padding-top:8px;border-top:1px solid var(--border)}
+
+/* Loading */
+#loading-bar{position:absolute;top:0;left:0;width:0%;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));
+  z-index:50;transition:width 0.3s;border-radius:0 2px 2px 0}
+#loading-bar.hidden{opacity:0}
+
+/* Main content */
+#main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
+#viewer-container{flex:1;position:relative;min-height:0;background:var(--surface)}
+#three-canvas{width:100%;height:100%;display:block}
+#viewer-label{position:absolute;top:10px;left:14px;font-size:0.68rem;color:var(--text2);
+  background:rgba(255,255,255,0.85);padding:3px 10px;border-radius:6px;backdrop-filter:blur(8px);pointer-events:none;
+  border:1px solid var(--border)}
+
+#fields-panel{height:210px;min-height:210px;display:flex;border-top:1px solid var(--border);background:var(--surface)}
+.field-container{flex:1;padding:10px 14px;display:flex;flex-direction:column;position:relative}
+.field-container+.field-container{border-left:1px solid var(--border)}
+.field-title{font-size:0.68rem;color:var(--text2);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:5px;font-weight:600}
+.field-canvas-wrap{flex:1;position:relative;display:flex;align-items:center;justify-content:center}
+.field-canvas-wrap canvas{max-width:100%;max-height:100%;border-radius:4px;border:1px solid var(--border)}
+.colorbar{position:absolute;right:2px;top:0;bottom:0;width:16px;display:flex;flex-direction:column;
+  align-items:center;justify-content:space-between;font-size:0.52rem;color:var(--text2)}
+.colorbar-gradient{width:8px;flex:1;border-radius:3px;margin:2px 0;border:1px solid var(--border)}
+</style>
+</head>
+<body>
+
+<!-- ============ SPLASH SCREEN ============ -->
+<div id="splash">
+  <canvas id="fluid-canvas"></canvas>
+  <div id="splash-content">
+    <h1>Noddyverse Explorer</h1>
+    <p>Explore 3D synthetic geological models with interactive gravity and magnetic field visualizations.
+       Built from the Noddyverse dataset — one million models generated with the Noddy modelling engine.</p>
+    <div class="cta">Click anywhere to explore</div>
+  </div>
+</div>
+
+<!-- ============ MAIN APP ============ -->
+<div id="app">
+  <div id="loading-bar"></div>
+  <div id="sidebar">
+    <div>
+      <h1>Noddyverse Explorer</h1>
+      <p class="sub">Drag to rotate the 3D model. Scroll to zoom. Select different geology types below.</p>
+    </div>
+    <div class="control-group">
+      <label>Geology Type</label>
+      <select id="type-select"></select>
+    </div>
+    <div class="control-group">
+      <label>Sample</label>
+      <select id="sample-select"></select>
+    </div>
+    <div class="info-card" id="info-card">
+      <div><span class="label">Surface voxels: </span><span class="value" id="info-voxels">—</span></div>
+      <div><span class="label">Grid: </span><span class="value" id="info-grid">50 x 50 x 50</span></div>
+      <div><span class="label">Lithology classes: </span><span class="value" id="info-classes">—</span></div>
+      <div style="margin-top:6px"><span class="label">Legend</span>
+        <div class="legend" id="legend"></div>
+      </div>
+    </div>
+    <div class="credits">
+      Data: Noddyverse (Jessell et al., 2022)<br>
+      DOI: 10.25914/p91d-x082 &middot; License: CC-BY 4.0
+    </div>
+  </div>
+
+  <div id="main">
+    <div id="viewer-container">
+      <canvas id="three-canvas"></canvas>
+      <div id="viewer-label">3D Geology Model — surface voxels colored by lithology</div>
+    </div>
+    <div id="fields-panel">
+      <div class="field-container">
+        <div class="field-title">Gravity Field (mGal)</div>
+        <div class="field-canvas-wrap">
+          <canvas id="grv-canvas"></canvas>
+          <div class="colorbar"><span id="grv-max"></span><div class="colorbar-gradient" id="grv-bar"></div><span id="grv-min"></span></div>
+        </div>
+      </div>
+      <div class="field-container">
+        <div class="field-title">Magnetic Field (nT)</div>
+        <div class="field-canvas-wrap">
+          <canvas id="mag-canvas"></canvas>
+          <div class="colorbar"><span id="mag-max"></span><div class="colorbar-gradient" id="mag-bar"></div><span id="mag-min"></span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script type="importmap">
+{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.163.0/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.163.0/examples/jsm/"}}
+</script>
+
+<script type="module">
+import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+// ============================================================
+//  SPLASH → APP TRANSITION
+// ============================================================
+const splash = document.getElementById('splash');
+const app = document.getElementById('app');
+let appStarted = false;
+
+splash.addEventListener('click', () => {
+  if (appStarted) return;
+  appStarted = true;
+  splash.classList.add('hidden');
+  app.classList.add('visible');
+  // Stop fluid rendering after transition
+  setTimeout(() => { fluidRunning = false; }, 1000);
+  loadManifest();
+});
+
+// ============================================================
+//  FLUID SIMULATION (WebGL, runs only on splash)
+// ============================================================
+let fluidRunning = true;
+const FluidSim = (() => {
+  const canvas = document.getElementById('fluid-canvas');
+  const gl = canvas.getContext('webgl', { alpha: true, premultipliedAlpha: false });
+  if (!gl) return { init(){}, loop(){} };
+
+  const ext = gl.getExtension('OES_texture_half_float');
+  gl.getExtension('OES_texture_half_float_linear');
+  const halfFloat = ext ? ext.HALF_FLOAT_OES : gl.UNSIGNED_BYTE;
+
+  let simW = 128, simH = 128, dyeW = 512, dyeH = 512;
+  let pointer = { x: 0.5, y: 0.5, dx: 0, dy: 0, moved: false };
+
+  function resize() {
+    canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
+    const a = canvas.width / canvas.height;
+    simH = Math.round(128 / a); dyeH = Math.round(512 / a);
+  }
+
+  function compileShader(type, src) {
+    const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); return s;
+  }
+  function createProgram(vs, fs) {
+    const p = gl.createProgram();
+    gl.attachShader(p, compileShader(gl.VERTEX_SHADER, vs));
+    gl.attachShader(p, compileShader(gl.FRAGMENT_SHADER, fs));
+    gl.linkProgram(p);
+    const u = {}, n = gl.getProgramParameter(p, gl.ACTIVE_UNIFORMS);
+    for (let i = 0; i < n; i++) { const info = gl.getActiveUniform(p, i); u[info.name] = gl.getUniformLocation(p, info.name); }
+    return { program: p, uniforms: u };
+  }
+
+  const baseVS = `attribute vec2 aPosition;varying vec2 vUv;varying vec2 vL;varying vec2 vR;varying vec2 vT;varying vec2 vB;uniform vec2 texelSize;
+    void main(){vUv=aPosition*0.5+0.5;vL=vUv-vec2(texelSize.x,0);vR=vUv+vec2(texelSize.x,0);
+    vT=vUv+vec2(0,texelSize.y);vB=vUv-vec2(0,texelSize.y);gl_Position=vec4(aPosition,0,1);}`;
+  const splatFS = `precision highp float;varying vec2 vUv;uniform sampler2D uTarget;uniform float aspectRatio;
+    uniform vec3 color;uniform vec2 point;uniform float radius;
+    void main(){vec2 p=vUv-point;p.x*=aspectRatio;vec3 s=exp(-dot(p,p)/radius)*color;
+    gl_FragColor=vec4(texture2D(uTarget,vUv).xyz+s,1.0);}`;
+  const advFS = `precision highp float;varying vec2 vUv;uniform sampler2D uVelocity;uniform sampler2D uSource;
+    uniform vec2 texelSize;uniform float dt;uniform float dissipation;
+    void main(){vec2 c=vUv-dt*texture2D(uVelocity,vUv).xy*texelSize;gl_FragColor=dissipation*texture2D(uSource,c);gl_FragColor.a=1.0;}`;
+  const divFS = `precision highp float;varying vec2 vL;varying vec2 vR;varying vec2 vT;varying vec2 vB;uniform sampler2D uVelocity;
+    void main(){float L=texture2D(uVelocity,vL).x;float R=texture2D(uVelocity,vR).x;
+    float T=texture2D(uVelocity,vT).y;float B=texture2D(uVelocity,vB).y;gl_FragColor=vec4(0.5*(R-L+T-B),0,0,1);}`;
+  const pressFS = `precision highp float;varying vec2 vUv;varying vec2 vL;varying vec2 vR;varying vec2 vT;varying vec2 vB;
+    uniform sampler2D uPressure;uniform sampler2D uDivergence;
+    void main(){float L=texture2D(uPressure,vL).x;float R=texture2D(uPressure,vR).x;
+    float T=texture2D(uPressure,vT).x;float B=texture2D(uPressure,vB).x;
+    float d=texture2D(uDivergence,vUv).x;gl_FragColor=vec4((L+R+B+T-d)*0.25,0,0,1);}`;
+  const gradFS = `precision highp float;varying vec2 vUv;varying vec2 vL;varying vec2 vR;varying vec2 vT;varying vec2 vB;
+    uniform sampler2D uPressure;uniform sampler2D uVelocity;
+    void main(){float L=texture2D(uPressure,vL).x;float R=texture2D(uPressure,vR).x;
+    float T=texture2D(uPressure,vT).x;float B=texture2D(uPressure,vB).x;
+    vec2 v=texture2D(uVelocity,vUv).xy-vec2(R-L,T-B);gl_FragColor=vec4(v,0,1);}`;
+  const curlFS = `precision highp float;varying vec2 vL;varying vec2 vR;varying vec2 vT;varying vec2 vB;uniform sampler2D uVelocity;
+    void main(){float L=texture2D(uVelocity,vL).y;float R=texture2D(uVelocity,vR).y;
+    float T=texture2D(uVelocity,vT).x;float B=texture2D(uVelocity,vB).x;gl_FragColor=vec4(0.5*((R-L)-(T-B)),0,0,1);}`;
+  const vortFS = `precision highp float;varying vec2 vUv;varying vec2 vL;varying vec2 vR;varying vec2 vT;varying vec2 vB;
+    uniform sampler2D uVelocity;uniform sampler2D uCurl;uniform float curl;uniform vec2 texelSize;
+    void main(){float L=texture2D(uCurl,vL).x;float R=texture2D(uCurl,vR).x;
+    float T=texture2D(uCurl,vT).x;float B=texture2D(uCurl,vB).x;float C=texture2D(uCurl,vUv).x;
+    vec2 f=0.5*vec2(abs(T)-abs(B),abs(R)-abs(L));f/=length(f)+1e-5;f*=curl*C;f.y*=-1.0;
+    gl_FragColor=vec4(texture2D(uVelocity,vUv).xy+f*texelSize,0,1);}`;
+  const dispFS = `precision highp float;varying vec2 vUv;uniform sampler2D uTexture;
+    void main(){vec3 c=texture2D(uTexture,vUv).rgb;gl_FragColor=vec4(c,length(c)*0.7);}`;
+
+  let splatP, advP, divP, pressP, gradP, dispP, curlP, vortP;
+  let velocity, pressure, divergence, dye, curlFBO;
+
+  function createFBO(w, h) {
+    const t = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, t);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, halfFloat, null);
+    const fb = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, t, 0);
+    gl.viewport(0, 0, w, h); gl.clear(gl.COLOR_BUFFER_BIT);
+    return { texture: t, fb, w, h };
+  }
+  function createDoubleFBO(w, h) {
+    let a = createFBO(w, h), b = createFBO(w, h);
+    return { get read(){ return a; }, get write(){ return b; }, swap(){ const t=a;a=b;b=t; } };
+  }
+  function blit(tgt) {
+    if (tgt) { gl.bindFramebuffer(gl.FRAMEBUFFER, tgt.fb); gl.viewport(0,0,tgt.w,tgt.h); }
+    else { gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.viewport(0,0,canvas.width,canvas.height); }
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  }
+
+  function init() {
+    resize();
+    const buf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,1,1]), gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    splatP=createProgram(baseVS,splatFS); advP=createProgram(baseVS,advFS);
+    divP=createProgram(baseVS,divFS); pressP=createProgram(baseVS,pressFS);
+    gradP=createProgram(baseVS,gradFS); dispP=createProgram(baseVS,dispFS);
+    curlP=createProgram(baseVS,curlFS); vortP=createProgram(baseVS,vortFS);
+    velocity=createDoubleFBO(simW,simH); pressure=createDoubleFBO(simW,simH);
+    divergence=createFBO(simW,simH); curlFBO=createFBO(simW,simH); dye=createDoubleFBO(dyeW,dyeH);
+  }
+
+  function doSplat(x, y, dx, dy, color) {
+    gl.useProgram(splatP.program);
+    gl.uniform1i(splatP.uniforms.uTarget,0); gl.uniform1f(splatP.uniforms.aspectRatio,canvas.width/canvas.height);
+    gl.uniform2f(splatP.uniforms.point,x,y); gl.uniform3f(splatP.uniforms.color,dx,dy,0);
+    gl.uniform1f(splatP.uniforms.radius,0.0003);
+    gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D,velocity.read.texture);
+    blit(velocity.write); velocity.swap();
+    gl.uniform3fv(splatP.uniforms.color,color); gl.uniform1f(splatP.uniforms.radius,0.005);
+    gl.bindTexture(gl.TEXTURE_2D,dye.read.texture); blit(dye.write); dye.swap();
+  }
+
+  function step(dt) {
+    gl.disable(gl.BLEND);
+    const sTS=[1/simW,1/simH], dTS=[1/dyeW,1/dyeH];
+    // Curl
+    gl.useProgram(curlP.program); gl.uniform2fv(curlP.uniforms.texelSize,sTS);
+    gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D,velocity.read.texture);
+    gl.uniform1i(curlP.uniforms.uVelocity,0); blit(curlFBO);
+    // Vorticity
+    gl.useProgram(vortP.program); gl.uniform2fv(vortP.uniforms.texelSize,sTS); gl.uniform1f(vortP.uniforms.curl,20);
+    gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D,velocity.read.texture); gl.uniform1i(vortP.uniforms.uVelocity,0);
+    gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D,curlFBO.texture); gl.uniform1i(vortP.uniforms.uCurl,1);
+    blit(velocity.write); velocity.swap();
+    // Advect velocity
+    gl.useProgram(advP.program); gl.uniform2fv(advP.uniforms.texelSize,sTS);
+    gl.uniform1f(advP.uniforms.dt,dt); gl.uniform1f(advP.uniforms.dissipation,1.0);
+    gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D,velocity.read.texture); gl.uniform1i(advP.uniforms.uVelocity,0);
+    gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D,velocity.read.texture); gl.uniform1i(advP.uniforms.uSource,1);
+    blit(velocity.write); velocity.swap();
+    // Advect dye
+    gl.uniform2fv(advP.uniforms.texelSize,dTS); gl.uniform1f(advP.uniforms.dissipation,0.97);
+    gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D,velocity.read.texture);
+    gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D,dye.read.texture); gl.uniform1i(advP.uniforms.uSource,1);
+    blit(dye.write); dye.swap();
+    // Divergence
+    gl.useProgram(divP.program); gl.uniform2fv(divP.uniforms.texelSize,sTS);
+    gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D,velocity.read.texture); gl.uniform1i(divP.uniforms.uVelocity,0);
+    blit(divergence);
+    // Pressure
+    gl.useProgram(pressP.program); gl.uniform2fv(pressP.uniforms.texelSize,sTS);
+    gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D,divergence.texture); gl.uniform1i(pressP.uniforms.uDivergence,1);
+    for(let i=0;i<6;i++){gl.activeTexture(gl.TEXTURE0);gl.bindTexture(gl.TEXTURE_2D,pressure.read.texture);
+      gl.uniform1i(pressP.uniforms.uPressure,0);blit(pressure.write);pressure.swap();}
+    // Gradient subtract
+    gl.useProgram(gradP.program); gl.uniform2fv(gradP.uniforms.texelSize,sTS);
+    gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D,pressure.read.texture); gl.uniform1i(gradP.uniforms.uPressure,0);
+    gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D,velocity.read.texture); gl.uniform1i(gradP.uniforms.uVelocity,1);
+    blit(velocity.write); velocity.swap();
+    // Display
+    gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA);
+    gl.useProgram(dispP.program); gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D,dye.read.texture); gl.uniform1i(dispP.uniforms.uTexture,0); blit(null);
+  }
+
+  let lastT = 0;
+  function loop(time) {
+    if (!fluidRunning) return;
+    const dt = Math.min((time - lastT) / 1000, 0.016); lastT = time;
+    if (pointer.moved) {
+      doSplat(pointer.x, pointer.y, pointer.dx*8, pointer.dy*8, [0.15, 0.0, 0.6]);
+      pointer.moved = false;
+    }
+    step(dt || 0.016);
+    requestAnimationFrame(loop);
+  }
+
+  window.addEventListener('resize', () => {
+    if (!fluidRunning) return;
+    resize(); velocity=createDoubleFBO(simW,simH); pressure=createDoubleFBO(simW,simH);
+    divergence=createFBO(simW,simH); curlFBO=createFBO(simW,simH); dye=createDoubleFBO(dyeW,dyeH);
+  });
+  document.addEventListener('mousemove', e => {
+    const x=e.clientX/canvas.width, y=1-e.clientY/canvas.height;
+    pointer.dx=(x-pointer.x)*10; pointer.dy=(y-pointer.y)*10;
+    pointer.x=x; pointer.y=y; pointer.moved=true;
+  });
+  document.addEventListener('touchmove', e => {
+    e.preventDefault(); const t=e.touches[0];
+    const x=t.clientX/canvas.width, y=1-t.clientY/canvas.height;
+    pointer.dx=(x-pointer.x)*10; pointer.dy=(y-pointer.y)*10;
+    pointer.x=x; pointer.y=y; pointer.moved=true;
+  }, { passive: false });
+
+  return { init, loop };
+})();
+
+FluidSim.init();
+requestAnimationFrame(FluidSim.loop);
+
+// ============================================================
+//  COLORS
+// ============================================================
+const LITH_COLORS = [
+  null,
+  [0.26,0.52,0.96],[0.94,0.40,0.27],[0.30,0.78,0.47],[0.90,0.70,0.20],
+  [0.70,0.35,0.85],[0.20,0.82,0.82],[0.92,0.50,0.70],[0.55,0.75,0.30],
+  [0.98,0.60,0.40],[0.45,0.55,0.90],[0.80,0.80,0.30],[0.40,0.70,0.70],
+  [0.85,0.45,0.55],[0.60,0.60,0.40],[0.55,0.40,0.70],[0.75,0.55,0.35],
+  [0.35,0.65,0.55],[0.80,0.35,0.35],[0.50,0.80,0.60],[0.70,0.50,0.80],
+];
+
+// ============================================================
+//  THREE.JS 3D VIEWER
+// ============================================================
+const GRID = 50;
+const threeCanvas = document.getElementById('three-canvas');
+const renderer = new THREE.WebGLRenderer({ canvas: threeCanvas, antialias: true });
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+renderer.setClearColor(0xf8f9fc, 1);
+
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 300);
+camera.position.set(70, 55, 70);
+const controls = new OrbitControls(camera, threeCanvas);
+controls.enableDamping = true; controls.dampingFactor = 0.08;
+controls.target.set(GRID/2, GRID/2, GRID/2); controls.update();
+
+scene.add(new THREE.AmbientLight(0xffffff, 0.6));
+const d1 = new THREE.DirectionalLight(0xffffff, 0.8); d1.position.set(60, 90, 70); scene.add(d1);
+const d2 = new THREE.DirectionalLight(0x8888cc, 0.3); d2.position.set(-40, -20, -40); scene.add(d2);
+
+// Wireframe bounding box
+const boxGeo = new THREE.BoxGeometry(GRID, GRID, GRID);
+const boxEdge = new THREE.LineSegments(
+  new THREE.EdgesGeometry(boxGeo),
+  new THREE.LineBasicMaterial({ color: 0xccccdd })
+);
+boxEdge.position.set(GRID/2, GRID/2, GRID/2);
+scene.add(boxEdge);
+
+// Axis labels
+function makeLabel(text, pos) {
+  const c = document.createElement('canvas'); c.width=64; c.height=32;
+  const ctx = c.getContext('2d'); ctx.fillStyle='#6b7084'; ctx.font='bold 20px Inter,sans-serif';
+  ctx.textAlign='center'; ctx.textBaseline='middle'; ctx.fillText(text,32,16);
+  const tex = new THREE.CanvasTexture(c);
+  const sp = new THREE.Sprite(new THREE.SpriteMaterial({map:tex,transparent:true}));
+  sp.position.copy(pos); sp.scale.set(6,3,1); scene.add(sp);
+}
+makeLabel('X', new THREE.Vector3(GRID/2, -4, -4));
+makeLabel('Y', new THREE.Vector3(-4, -4, GRID/2));
+makeLabel('Depth', new THREE.Vector3(-6, GRID/2, -4));
+
+let currentMesh = null;
+
+function render3D() {
+  requestAnimationFrame(render3D); controls.update();
+  const rect = threeCanvas.parentElement.getBoundingClientRect();
+  const w = rect.width, h = rect.height;
+  if (threeCanvas.width !== w*renderer.getPixelRatio() || threeCanvas.height !== h*renderer.getPixelRatio()) {
+    renderer.setSize(w, h, false); camera.aspect = w/h; camera.updateProjectionMatrix();
+  }
+  renderer.render(scene, camera);
+}
+render3D();
+
+function loadVoxels(data) {
+  if (currentMesh) { scene.remove(currentMesh); currentMesh.geometry.dispose(); currentMesh.material.dispose(); }
+  const { surfaceVoxels, nClasses } = data;
+  const n = surfaceVoxels.length / 4;
+  const geo = new THREE.BoxGeometry(1, 1, 1);
+  const mat = new THREE.MeshPhongMaterial({ vertexColors: true, shininess: 40 });
+  const mesh = new THREE.InstancedMesh(geo, mat, n);
+  const dummy = new THREE.Object3D();
+  const color = new THREE.Color();
+
+  for (let i = 0; i < n; i++) {
+    // Binary stores: [dim0, dim1, dim2, class]
+    // dim0 = depth layers (0=top), dim1 = northing(Y), dim2 = easting(X)
+    // Three.js: X=easting, Y=up(inverted depth), Z=northing
+    const dim0 = surfaceVoxels[i * 4];     // depth
+    const dim1 = surfaceVoxels[i * 4 + 1]; // northing
+    const dim2 = surfaceVoxels[i * 4 + 2]; // easting
+    const cls  = surfaceVoxels[i * 4 + 3];
+
+    dummy.position.set(dim2 + 0.5, (GRID - 1 - dim0) + 0.5, dim1 + 0.5);
+    dummy.updateMatrix();
+    mesh.setMatrixAt(i, dummy.matrix);
+    const c = LITH_COLORS[cls] || [0.5, 0.5, 0.5];
+    color.setRGB(c[0], c[1], c[2]);
+    mesh.setColorAt(i, color);
+  }
+  mesh.instanceMatrix.needsUpdate = true;
+  mesh.instanceColor.needsUpdate = true;
+  scene.add(mesh);
+  currentMesh = mesh;
+
+  document.getElementById('info-voxels').textContent = n.toLocaleString();
+  document.getElementById('info-classes').textContent = nClasses;
+  const legend = document.getElementById('legend'); legend.innerHTML = '';
+  for (let i = 1; i <= nClasses; i++) {
+    const c = LITH_COLORS[i] || [0.5,0.5,0.5];
+    const div = document.createElement('div'); div.className = 'legend-item';
+    div.innerHTML = `<span class="legend-swatch" style="background:rgb(${c[0]*255|0},${c[1]*255|0},${c[2]*255|0})"></span>${i}`;
+    legend.appendChild(div);
+  }
+}
+
+// ============================================================
+//  HEATMAPS
+// ============================================================
+function viridis(t) {
+  t = Math.max(0, Math.min(1, t));
+  return [Math.max(0,Math.min(255,(68+t*(1-t)*600-t*t*350)|0)),
+          Math.max(0,Math.min(255,(2+t*330-t*t*130)|0)),
+          Math.max(0,Math.min(255,(85+t*180-t*t*350+t*t*t*200)|0))];
+}
+function magma(t) {
+  t = Math.max(0, Math.min(1, t));
+  return [Math.max(0,Math.min(255,(1+t*780-t*t*500+t*t*t*200)|0)),
+          Math.max(0,Math.min(255,(0+t*50+t*t*500-t*t*t*350)|0)),
+          Math.max(0,Math.min(255,(40+t*560-t*t*900+t*t*t*550)|0))];
+}
+
+function renderHeatmap(canvasId, data, rows, cols, cmap, barId, minId, maxId) {
+  const canvas = document.getElementById(canvasId);
+  canvas.width = cols; canvas.height = rows;
+  const ctx = canvas.getContext('2d');
+  const img = ctx.createImageData(cols, rows);
+  let min = Infinity, max = -Infinity;
+  for (let i = 0; i < data.length; i++) { if(data[i]<min)min=data[i]; if(data[i]>max)max=data[i]; }
+  const range = max - min || 1;
+  for (let i = 0; i < data.length; i++) {
+    const [r,g,b] = cmap((data[i]-min)/range);
+    img.data[i*4]=r; img.data[i*4+1]=g; img.data[i*4+2]=b; img.data[i*4+3]=255;
+  }
+  ctx.putImageData(img, 0, 0);
+  document.getElementById(minId).textContent = min.toFixed(1);
+  document.getElementById(maxId).textContent = max.toFixed(1);
+  const bar = document.getElementById(barId);
+  let grad = 'linear-gradient(to bottom,';
+  for (let i = 0; i <= 20; i++) {
+    const [r,g,b] = cmap(1-i/20);
+    grad += `rgb(${r},${g},${b})${i<20?',':''}`;
+  }
+  bar.style.background = grad + ')';
+}
+
+// ============================================================
+//  DATA LOADING
+// ============================================================
+let manifest = null;
+
+async function loadManifest() {
+  const resp = await fetch('data/manifest.json');
+  manifest = await resp.json();
+  const typeSelect = document.getElementById('type-select');
+  Object.keys(manifest.types).forEach(type => {
+    const opt = document.createElement('option'); opt.value = type;
+    opt.textContent = type.replace(/_/g, ' \u2192 ').replace(/SHEAR-ZONE/g,'SHEAR ZONE');
+    typeSelect.appendChild(opt);
+  });
+  typeSelect.addEventListener('change', populateSamples);
+  document.getElementById('sample-select').addEventListener('change', loadSample);
+  populateSamples();
+}
+
+function populateSamples() {
+  const type = document.getElementById('type-select').value;
+  const sel = document.getElementById('sample-select'); sel.innerHTML = '';
+  manifest.types[type].forEach((name, i) => {
+    const opt = document.createElement('option'); opt.value = name;
+    opt.textContent = `Sample ${i+1}`; sel.appendChild(opt);
+  });
+  loadSample();
+}
+
+async function loadSample() {
+  const fileName = document.getElementById('sample-select').value;
+  if (!fileName) return;
+  const bar = document.getElementById('loading-bar');
+  bar.classList.remove('hidden'); bar.style.width = '30%';
+
+  try {
+    const resp = await fetch(`data/${fileName}`);
+    bar.style.width = '70%';
+    const buf = await resp.arrayBuffer();
+    bar.style.width = '90%';
+    const view = new DataView(buf);
+    let off = 0;
+    const nSurface = view.getUint32(off,true); off+=4;
+    const grvR = view.getUint32(off,true); off+=4;
+    const grvC = view.getUint32(off,true); off+=4;
+    const magR = view.getUint32(off,true); off+=4;
+    const magC = view.getUint32(off,true); off+=4;
+    const nCls = view.getUint32(off,true); off+=4;
+    const sv = new Uint8Array(buf, off, nSurface*4); off += nSurface*4;
+    const grv = new Float32Array(buf, off, grvR*grvC); off += grvR*grvC*4;
+    const mag = new Float32Array(buf, off, magR*magC);
+
+    loadVoxels({ surfaceVoxels: sv, nClasses: nCls });
+    renderHeatmap('grv-canvas', grv, grvR, grvC, viridis, 'grv-bar', 'grv-min', 'grv-max');
+    renderHeatmap('mag-canvas', mag, magR, magC, magma, 'mag-bar', 'mag-min', 'mag-max');
+    bar.style.width = '100%';
+  } catch(e) { console.error('Load failed:', e); }
+  setTimeout(() => { bar.style.width = '0%'; bar.classList.add('hidden'); }, 400);
+}
+</script>
+</body>
 </html>