Update SplatLoader to handle progress updates, both for main file and any extra files, aggregating totals. Misc. improvements to examples. (#112)

examples/dynamic-lighting/index.html

@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<html>
 
 <head>
   <meta charset="utf-8">

examples/editor/index.html

@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<html>
 
 <head>
   <meta charset="utf-8">

examples/envmap/index.html

@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<html>
 
 <head>
   <meta charset="utf-8">
@@ -39,7 +40,7 @@
   </script>
   <script type="module">
     import * as THREE from "three";
-    import { SplatMesh, SparkRenderer } from "@sparkjsdev/spark";
+    import { SplatMesh, SparkRenderer, PackedSplats } from "@sparkjsdev/spark";
     import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
     import { getAssetFileURL } from "/examples/js/get-asset-url.js";
 
@@ -55,13 +56,14 @@
     const spark = new SparkRenderer({ renderer });
 
     const splatURL = await getAssetFileURL("fireplace.spz");
-    const background = new SplatMesh({ url: splatURL });
+    const packedSplats = new PackedSplats({ url: splatURL });
+    const background = new SplatMesh({ packedSplats });
     background.quaternion.set(1, 0, 0, 0);
     background.position.set(0.5, 0, -1);
     background.scale.setScalar(0.5);
     scene.add(background);
 
-    const background2 = new SplatMesh({ url: splatURL });
+    const background2 = new SplatMesh({ packedSplats });
     background2.quaternion.set(1, 0, 0, 0);
     background2.rotation.y = Math.PI;
     background2.position.set(-0.5, 0, 0.0);
@@ -81,6 +83,7 @@
     scene.add(duck);
 
     let lastTime;
+    let renderedEnvMap = false;
     renderer.setAnimationLoop(function animate(time) {
       const deltaTime = time - (lastTime || time);
       lastTime = time;

examples/hello-world/index.html

@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<html>
 
 <head>
   <meta charset="utf-8">

examples/interactivity/index.html

@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<html>
 
 <head>
   <meta charset="utf-8">

examples/multiple-splats/index.html

@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<html>
 
 <head>
   <meta charset="utf-8">
@@ -34,7 +35,7 @@
   </script>
   <script type="module">
     import * as THREE from "three";
-    import { SplatMesh } from "@sparkjsdev/spark";
+    import { SplatMesh, PackedSplats } from "@sparkjsdev/spark";
     import { EXRLoader } from "three/addons/loaders/EXRLoader.js";
     import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
     import { getAssetFileURL } from "/examples/js/get-asset-url.js";
@@ -49,16 +50,17 @@
     renderer.setClearColor(new THREE.Color(0xFFFFFF), 1);
     document.body.appendChild(renderer.domElement)
 
+    let splatURL = await getAssetFileURL("butterfly-ai.spz");
+    const butterflySplats = new PackedSplats({ url: splatURL });
     const butterflies = [];
     for (let i = 0; i < 6; i++) {
-      let splatURL = await getAssetFileURL("butterfly-ai.spz");
-      const splat = new SplatMesh({ url: splatURL });
+      const splat = new SplatMesh({ packedSplats: butterflySplats });
       splat.quaternion.set(1, 0, 0, 0);
       scene.add(splat);
       butterflies.push(splat);
     }
 
-    let splatURL = await getAssetFileURL("cat.spz");
+    splatURL = await getAssetFileURL("cat.spz");
     const cat = new SplatMesh({ url: splatURL });
     cat.quaternion.set(1, 0, 0, 0);
     cat.scale.setScalar(0.5);

examples/multiple-viewpoints/index.html

@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<html>
 
 <head>
   <meta charset="utf-8">

examples/particle-simulation/index.html

@@ -1,4 +1,6 @@
 <!DOCTYPE html>
+<html>
+
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />

examples/procedural-splats/index.html

@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<html>
 
 <head>
   <meta charset="utf-8">

examples/raycasting/index.html

@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<html>
 
 <head>
   <meta charset="utf-8">
@@ -47,8 +48,9 @@
     const NUM_ROBOTS = 5;
     const robots = [];
     const splatURL = await getAssetFileURL("robot-head.spz");
+    const packedSplats = new PackedSplats({ url: splatURL });
     for (let i = 0; i < NUM_ROBOTS; i++) {
-      const robot = new SplatMesh({ url: splatURL });
+      const robot = new SplatMesh({ packedSplats });
       robot.rotation.x = Math.PI;
       robot.scale.setScalar(0.2);
       robot.position.set(0, 0, i);

examples/sogs/index.html

@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<html>
 
 <head>
   <meta charset="utf-8">
@@ -25,14 +26,15 @@
     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 { SplatMesh } 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 camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1000);
     camera.position.set(0, 1.5, -1.2);
 
     const renderer = new THREE.WebGLRenderer();
+    renderer.setPixelRatio(window.devicePixelRatio);
     renderer.setSize(window.innerWidth, window.innerHeight);
     document.body.appendChild(renderer.domElement);
 

examples/splat-texture/index.html

@@ -100,7 +100,7 @@
     const spark = new SparkRenderer({
         renderer,
         maxStdDev: 1.0,
-        focalDistance: 0,
+        focalDistance: 4.0,
     });
     const splatTexture = {
         enable: true,