From 9a7af2c7e947304b649319d9a7282ee1b6767f86 Mon Sep 17 00:00:00 2001
From: Diego Marcos Segura <diego.marcos@gmail.com>
Date: Thu, 10 Jul 2025 01:29:26 -0400
Subject: [PATCH] Add example for SOGS compression

---
 examples/assets.json     | 204 ++++++++++++++++++++-------------------
 examples/sogs/index.html |  65 +++++++++++++
 2 files changed, 169 insertions(+), 100 deletions(-)
 create mode 100644 examples/sogs/index.html

diff --git a/examples/assets.json b/examples/assets.json
index 436fabc..b078323 100644
--- a/examples/assets.json
+++ b/examples/assets.json
@@ -1,31 +1,7 @@
 {
-  "robot-head.spz": {
-    "url": "https://sparkjs.dev/assets/splats/robot-head.spz",
-    "directory": "splats"
-  },
-  "forge.spz": {
-    "url": "https://sparkjs.dev/assets/splats/forge.spz",
-    "directory": "splats"
-  },
-  "butterfly-wings-closed.spz": {
-    "url": "https://sparkjs.dev/assets/splats/butterfly-wings-closed.spz",
-    "directory": "splats"
-  },
-  "butterfly.spz": {
-    "url": "https://sparkjs.dev/assets/splats/butterfly.spz",
-    "directory": "splats"
-  },
-  "butterfly-ai.spz": {
-    "url": "https://sparkjs.dev/assets/splats/butterfly-ai.spz",
-    "directory": "splats"
-  },
-  "fireplace.spz": {
-    "url": "https://sparkjs.dev/assets/splats/fireplace.spz",
-    "directory": "splats"
-  },
-  "snow-street.spz": {
-    "url": "https://sparkjs.dev/assets/splats/snow-street.spz",
-    "directory": "splats"
+  "arrow.glb": {
+    "url": "https://sparkjs.dev/assets/models/arrow.glb",
+    "directory": "models"
   },
   "branzino-amarin.spz": {
     "url": "https://sparkjs.dev/assets/splats/food/branzino-amarin.spz",
@@ -35,6 +11,26 @@
     "url": "https://sparkjs.dev/assets/splats/food/burger-from-amboy.spz",
     "directory": "splats/food"
   },
+  "butterfly.png": {
+    "url": "https://sparkjs.dev/assets/images/butterfly.png",
+    "directory": "images"
+  },
+  "butterfly.spz": {
+    "url": "https://sparkjs.dev/assets/splats/butterfly.spz",
+    "directory": "splats"
+  },
+  "butterfly-ai.spz": {
+    "url": "https://sparkjs.dev/assets/splats/butterfly-ai.spz",
+    "directory": "splats"
+  },
+  "butterfly-wings-closed.spz": {
+    "url": "https://sparkjs.dev/assets/splats/butterfly-wings-closed.spz",
+    "directory": "splats"
+  },
+  "cat.spz": {
+    "url": "https://sparkjs.dev/assets/splats/cat.spz",
+    "directory": "splats"
+  },
   "clams-and-caviar-by-ikoyi.spz": {
     "url": "https://sparkjs.dev/assets/splats/food/clams-and-caviar-by-ikoyi.spz",
     "directory": "splats/food"
@@ -43,74 +39,6 @@
     "url": "https://sparkjs.dev/assets/splats/food/coral-caviar.spz",
     "directory": "splats/food"
   },
-  "double-double-from-InNOut.spz": {
-    "url": "https://sparkjs.dev/assets/splats/food/double-Double-from-InNOut.spz",
-    "directory": "splats/food"
-  },
-  "gyro.spz": {
-    "url": "https://sparkjs.dev/assets/splats/food/gyro.spz",
-    "directory": "splats/food"
-  },
-  "iberico-sandwich-by-reserve.spz": {
-    "url": "https://sparkjs.dev/assets/splats/food/iberico-sandwich-by-reserve.spz",
-    "directory": "splats/food"
-  },
-  "primerib-tamos.spz": {
-    "url": "https://sparkjs.dev/assets/splats/food/primerib-tamos.spz",
-    "directory": "splats/food"
-  },
-  "steaksandwich-mels.spz": {
-    "url": "https://sparkjs.dev/assets/splats/food/steaksandwich-mels.spz",
-    "directory": "splats/food"
-  },
-  "pad-thai.spz": {
-    "url": "https://sparkjs.dev/assets/splats/food/pad-thai.spz",
-    "directory": "splats/food"
-  },
-  "tomahawk-niku.spz": {
-    "url": "https://sparkjs.dev/assets/splats/food/tomahawk-niku.spz",
-    "directory": "splats/food"
-  },
-  "rubberduck.glb": {
-    "url": "https://sparkjs.dev/assets/models/rubberduck.glb",
-    "directory": "models"
-  },
-  "table.glb": {
-    "url": "https://sparkjs.dev/assets/models/table.glb",
-    "directory": "models"
-  },
-  "butterfly.png": {
-    "url": "https://sparkjs.dev/assets/images/butterfly.png",
-    "directory": "images"
-  },
-  "sky.jpeg": {
-    "url": "https://sparkjs.dev/assets/images/sky.jpeg",
-    "directory": "images"
-  },
-  "furry-logo-pedestal.spz": {
-    "url": "https://sparkjs.dev/assets/splats/furry-logo-pedestal.spz",
-    "directory": "splats"
-  },
-  "cat.spz": {
-    "url": "https://sparkjs.dev/assets/splats/cat.spz",
-    "directory": "splats"
-  },
-  "dessert.spz": {
-    "url": "https://sparkjs.dev/assets/splats/dessert.spz",
-    "directory": "splats"
-  },
-  "penguin.spz": {
-    "url": "https://sparkjs.dev/assets/splats/penguin.spz",
-    "directory": "splats"
-  },
-  "woobles.spz": {
-    "url": "https://sparkjs.dev/assets/splats/woobles.spz",
-    "directory": "splats"
-  },
-  "arrow.glb": {
-    "url": "https://sparkjs.dev/assets/models/arrow.glb",
-    "directory": "models"
-  },
   "dali-env.glb": {
     "url": "https://sparkjs.dev/assets/models/dali-env.glb",
     "directory": "models"
@@ -119,16 +47,92 @@
     "url": "https://sparkjs.dev/assets/models/dali-table.glb",
     "directory": "models"
   },
-  "valley.spz": {
-    "url": "https://sparkjs.dev/assets/splats/valley.spz",
+  "dessert.spz": {
+    "url": "https://sparkjs.dev/assets/splats/dessert.spz",
+    "directory": "splats"
+  },
+  "double-double-from-InNOut.spz": {
+    "url": "https://sparkjs.dev/assets/splats/food/double-Double-from-InNOut.spz",
+    "directory": "splats/food"
+  },
+  "fireplace.spz": {
+    "url": "https://sparkjs.dev/assets/splats/fireplace.spz",
+    "directory": "splats"
+  },
+  "forge.spz": {
+    "url": "https://sparkjs.dev/assets/splats/forge.spz",
+    "directory": "splats"
+  },
+  "furry-logo-pedestal.spz": {
+    "url": "https://sparkjs.dev/assets/splats/furry-logo-pedestal.spz",
+    "directory": "splats"
+  },
+  "gyro.spz": {
+    "url": "https://sparkjs.dev/assets/splats/food/gyro.spz",
+    "directory": "splats/food"
+  },
+  "heart.png": {
+    "url": "https://sparkjs.dev/assets/images/heart.png",
+    "directory": "images"
+  },
+  "iberico-sandwich-by-reserve.spz": {
+    "url": "https://sparkjs.dev/assets/splats/food/iberico-sandwich-by-reserve.spz",
+    "directory": "splats/food"
+  },
+  "pad-thai.spz": {
+    "url": "https://sparkjs.dev/assets/splats/food/pad-thai.spz",
+    "directory": "splats/food"
+  },
+  "penguin.spz": {
+    "url": "https://sparkjs.dev/assets/splats/penguin.spz",
+    "directory": "splats"
+  },
+  "primerib-tamos.spz": {
+    "url": "https://sparkjs.dev/assets/splats/food/primerib-tamos.spz",
+    "directory": "splats/food"
+  },
+  "robot-head.spz": {
+    "url": "https://sparkjs.dev/assets/splats/robot-head.spz",
+    "directory": "splats"
+  },
+  "rubberduck.glb": {
+    "url": "https://sparkjs.dev/assets/models/rubberduck.glb",
+    "directory": "models"
+  },
+  "sky.jpeg": {
+    "url": "https://sparkjs.dev/assets/images/sky.jpeg",
+    "directory": "images"
+  },
+  "snow-street.spz": {
+    "url": "https://sparkjs.dev/assets/splats/snow-street.spz",
     "directory": "splats"
   },
   "star.png": {
     "url": "https://sparkjs.dev/assets/images/star.png",
     "directory": "images"
   },
-  "heart.png": {
-    "url": "https://sparkjs.dev/assets/images/heart.png",
-    "directory": "images"
+  "steaksandwich-mels.spz": {
+    "url": "https://sparkjs.dev/assets/splats/food/steaksandwich-mels.spz",
+    "directory": "splats/food"
+  },
+  "sutro.zip": {
+    "url": "https://sparkjs.dev/assets/splats/sutro.zip",
+    "directory": "splats"
+  },
+  "table.glb": {
+    "url": "https://sparkjs.dev/assets/models/table.glb",
+    "directory": "models"
+  },
+  "tomahawk-niku.spz": {
+    "url": "https://sparkjs.dev/assets/splats/food/tomahawk-niku.spz",
+    "directory": "splats/food"
+  },
+  "valley.spz": {
+    "url": "https://sparkjs.dev/assets/splats/valley.spz",
+    "directory": "splats"
+  },
+  "woobles.spz": {
+    "url": "https://sparkjs.dev/assets/splats/woobles.spz",
+    "directory": "splats"
   }
 }
diff --git a/examples/sogs/index.html b/examples/sogs/index.html
new file mode 100644
index 0000000..0d7161d
--- /dev/null
+++ b/examples/sogs/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Spark • SOGS</title>
+  <style>
+    body {
+      margin: 0;
+    }
+  </style>
+</head>
+
+<body>
+  <script type="importmap">
+    {
+      "imports": {
+        "three": "/examples/js/vendor/three/build/three.module.js",
+        "@sparkjsdev/spark": "/dist/spark.module.js"
+      }
+    }
+  </script>
+  <script type="module">
+    import * as THREE from "three";
+    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+    import { Sky } from 'three/addons/objects/Sky.js';
+    import { SplatMesh, SparkRenderer } from "@sparkjsdev/spark";
+    import { getAssetFileURL } from "/examples/js/get-asset-url.js";
+
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
+    camera.position.set(0, 1.5, -1.2);
+
+
+    const renderer = new THREE.WebGLRenderer();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    document.body.appendChild(renderer.domElement);
+
+    const splatURL = await getAssetFileURL("sutro.zip");
+    const botanical = new SplatMesh({ url: splatURL });
+    botanical.quaternion.set(1, 0, 0, 0);
+    scene.add(botanical);
+
+    const sky = new Sky();
+    sky.scale.setScalar(450000);
+    const phi = THREE.MathUtils.degToRad(20);
+    const theta = THREE.MathUtils.degToRad(90);
+    const sunPosition = new THREE.Vector3().setFromSphericalCoords(1, phi, theta);
+    sky.material.uniforms.sunPosition.value = sunPosition;
+    scene.add( sky );
+
+    const controls = new OrbitControls(camera, renderer.domElement);
+    controls.target.set(0, 1.5, 0);
+    controls.minDistance = 1.0;
+    controls.maxDistance = 8.0;
+    controls.enablePan = false;
+
+    renderer.setAnimationLoop(function animate(time) {
+      controls.update(camera);
+      renderer.render(scene, camera);
+    });
+  </script>
+</body>
+
+</html>