Add stochastic splat rendering example

examples.html

@@ -241,6 +241,7 @@
           'debug-color': '/examples/debug-color/index.html',
           'depth-of-field': '/examples/depth-of-field/index.html',
           'splat-texture': '/examples/splat-texture/index.html',
+          'stochastic': '/examples/stochastic/index.html',
           'editor': '/examples/editor/index.html'
         };
 
@@ -440,6 +441,7 @@
           <a href="#debug-color" data-example="debug-color" class="example-link">Debug Coloring</a>
           <a href="#depth-of-field" data-example="depth-of-field" class="example-link">Depth of Field</a>
           <a href="#splat-texture" data-example="splat-texture" class="example-link">Splat Texture</a>
+          <a href="#stochastic" data-example="stochastic" class="example-link">Stochastic Rendering</a>
           <a href="#editor" data-example="editor" class="example-link">Editor</a>
         </div>
       </div>

examples/stochastic/index.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Spark • Stochastic Rendering</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 { SparkRenderer, SparkControls, SplatMesh, VRButton } 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);
+    const renderer = new THREE.WebGLRenderer();
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    document.body.appendChild(renderer.domElement)
+
+    // Make a local frame of reference that we can move to control
+    // the camera, or as a frame of reference in WebXR mode
+    const localFrame = new THREE.Group();
+    scene.add(localFrame);
+
+    // Lower the splat rendering width to sqrt(5) std devs for more performance
+    const spark = new SparkRenderer({ renderer, maxStdDev: Math.sqrt(5) });
+    spark.defaultView.stochastic = true;
+    localFrame.add(spark);
+    localFrame.add(camera);
+
+    const splatURL = await getAssetFileURL("valley.spz");
+    const background = new SplatMesh({ url: splatURL });
+    background.quaternion.set(1, 0, 0, 0);
+    background.scale.setScalar(0.5);
+    scene.add(background);
+
+    const vrButton = VRButton.createButton(renderer);
+    if (vrButton) {
+      // WebXR is available, so show the button
+      document.body.appendChild(vrButton);
+    }
+
+    let lastCameraPos = new THREE.Vector3(0, 0, 0);
+    const controls = new SparkControls({ canvas: renderer.domElement });
+
+    renderer.setAnimationLoop(function animate(time, xrFrame) {
+      controls.update(localFrame);
+
+      // This is a hack to make a "local" frame work reliably across
+      // Quest 3 and Vision Pro. Any big discontinuity in the camera
+      // results in a reverse shift of the local frame to compensate.
+      if (lastCameraPos.distanceTo(camera.position) > 0.5) {
+        localFrame.position.copy(camera.position).multiplyScalar(-1);
+      }
+      lastCameraPos.copy(camera.position);
+
+      renderer.render(scene, camera);
+    });
+  </script>
+</body>
+
+</html>

index.html

@@ -149,6 +149,7 @@
         <li><a href="/examples/depth-of-field/">Depth of Field</a></li>
         <li><a href="/examples/splat-texture/">Splat Texture</a></li>
         <li><a href="/examples/sogs/">SOGS Compression</a></li>
+        <li><a href="/examples/stochastic/">Stochastic Rendering</a></li>
         <li><a href="/examples/editor/">Editor</a></li>
         <li><a href="/examples/viewer/">Viewer</a></li>
       </ul>