Update viewer.js

viewer.js

@@ -1,7 +1,7 @@
 // viewer.js
 // ==============================
 
-let pc;            
+let pc;
 export let app = null;
 let cameraEntity = null;
 let modelEntity = null;
@@ -19,10 +19,10 @@ export async function initializeViewer(config, instanceId) {
   const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
   const isMobile = isIOS || /Android/i.test(navigator.userAgent);
 
-  // SOGS usage: we expect config.sogs_json_url
   sogsJsonUrl = config.sogs_json_url;
   if (!sogsJsonUrl) {
-    throw new Error('Missing config.sogs_json_url for optimized SOGS/webp loading.');
+    alert('Missing config.sogs_json_url for SOGS/webp loading.');
+    return;
   }
 
   minZoom = parseFloat(config.minZoom || "1");
@@ -76,10 +76,7 @@ export async function initializeViewer(config, instanceId) {
   canvas.addEventListener('gestureend', e => e.preventDefault());
   canvas.addEventListener('dblclick', e => e.preventDefault());
   canvas.addEventListener('touchstart', e => { if (e.touches.length > 1) e.preventDefault(); }, { passive: false });
-
-  canvas.addEventListener('wheel', (e) => {
-    e.preventDefault();
-  }, { passive: false });
+  canvas.addEventListener('wheel', (e) => { e.preventDefault(); }, { passive: false });
 
   progressDialog.style.display = 'block';
 
@@ -129,30 +126,36 @@ export async function initializeViewer(config, instanceId) {
   window.addEventListener('resize', () => app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight));
   app.on('destroy', () => resizeObserver.disconnect());
 
-  // Load orbit camera scripts
+  // Load orbit camera scripts and gsplat script
   const orbitAsset = new pc.Asset('orbit', 'script', { url: "https://mikafil-viewer-gs.static.hf.space/orbit-camera.js" });
   app.assets.add(orbitAsset);
+  const gsplatAsset = new pc.Asset('gsplat', 'script', { url: "gsplat.js" }); // If using relative URL
+
+  app.assets.add(gsplatAsset);
 
-  // Load SOGS json (contains metadata and webp references)
+  // Fetch SOGS meta.json and webp textures
   let sogsData, sogsTextures = {};
   try {
     const jsonResp = await fetch(sogsJsonUrl);
     sogsData = await jsonResp.json();
-    if (!Array.isArray(sogsData.images)) throw new Error('sogs_json missing .images array');
-    // Preload all webp textures as PlayCanvas textures
-    for (let i = 0; i < sogsData.images.length; ++i) {
-      const imageInfo = sogsData.images[i];
-      let url = imageInfo.path || imageInfo.url;
-      if (!/^https?:\/\//.test(url) && sogsJsonUrl) {
-        // resolve relative to sogsJsonUrl
-        const baseUrl = sogsJsonUrl.split('/').slice(0, -1).join('/');
-        url = `${baseUrl}/${url}`;
-      }
-      // Load texture asset synchronously (block start until all images ready)
-      sogsTextures[imageInfo.name || `img${i}`] = await new Promise((resolve, reject) => {
-        const asset = new pc.Asset(imageInfo.name || `img${i}`, 'texture', { url });
+
+    // Parse meta to get file list
+    let meta = sogsData;
+    let filesSet = new Set();
+    if (meta.means && meta.means.files) meta.means.files.forEach(f => filesSet.add(f));
+    if (meta.scales && meta.scales.files) meta.scales.files.forEach(f => filesSet.add(f));
+    if (meta.quats && meta.quats.files) meta.quats.files.forEach(f => filesSet.add(f));
+    if (meta.sh0 && meta.sh0.files) meta.sh0.files.forEach(f => filesSet.add(f));
+
+    // For each, fetch as a Texture
+    let baseUrl = sogsJsonUrl.split('/').slice(0, -1).join('/');
+    for (let fname of filesSet) {
+      let url = fname.startsWith('http') ? fname : `${baseUrl}/${fname}`;
+      // Use PlayCanvas Texture Asset
+      sogsTextures[fname] = await new Promise((resolve, reject) => {
+        const asset = new pc.Asset(fname, 'texture', { url });
         app.assets.add(asset);
-        asset.ready(resolve.bind(null, asset.resource));
+        asset.ready(() => resolve(asset.resource));
         asset.on('error', reject);
         app.assets.load(asset);
       });
@@ -163,80 +166,78 @@ export async function initializeViewer(config, instanceId) {
     throw e;
   }
 
-  // Continue once orbit script is loaded
-  orbitAsset.ready(async () => {
-    app.start();
-    progressDialog.style.display = 'none';
-
-    // Add the SOGS/webp point cloud as a "gsplat" entity/component
-    modelEntity = new pc.Entity('model');
-
-    // Here you would use your SOGS-compatible GSplat renderer component.
-    // Let's define a placeholder `gsplat` script which you must replace
-    // with your PlayCanvas SOGS/gsplat renderer.
-    modelEntity.addComponent('script');
-    modelEntity.script.create('gsplat', {
-      attributes: {
-        sogsData: sogsData,
-        textures: sogsTextures
-      }
-    });
-
-    modelEntity.setLocalPosition(modelX, modelY, modelZ);
-    modelEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
-    modelEntity.setLocalScale(modelScale, modelScale, modelScale);
-    app.root.addChild(modelEntity);
+  // Continue after both scripts loaded
+  orbitAsset.ready(() => {
+    gsplatAsset.ready(() => {
+      app.start();
+      progressDialog.style.display = 'none';
+
+      // Add GSplat entity and script
+      modelEntity = new pc.Entity('model');
+      modelEntity.addComponent('script');
+      modelEntity.script.create('gsplat', {
+        attributes: {
+          sogsData: sogsData,
+          textures: sogsTextures
+        }
+      });
 
-    // Camera entity
-    cameraEntity = new pc.Entity('camera');
-    cameraEntity.addComponent('camera', { clearColor: new pc.Color(1, 1, 1, 1) }); // White BG
-    cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
-    cameraEntity.lookAt(modelEntity.getPosition());
-    cameraEntity.addComponent('script');
-
-    cameraEntity.script.create('orbitCamera', {
-      attributes: {
-        focusEntity: modelEntity,
-        inertiaFactor: 0.2,
-        distanceMax: maxZoom,
-        distanceMin: minZoom,
-        pitchAngleMax: maxAngle,
-        pitchAngleMin: minAngle,
-        yawAngleMax: maxAzimuth,
-        yawAngleMin: minAzimuth,
-        minY: minY,
-        frameOnStart: false
-      }
+      modelEntity.setLocalPosition(modelX, modelY, modelZ);
+      modelEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
+      modelEntity.setLocalScale(modelScale, modelScale, modelScale);
+      app.root.addChild(modelEntity);
+
+      // Camera entity
+      cameraEntity = new pc.Entity('camera');
+      cameraEntity.addComponent('camera', { clearColor: new pc.Color(1, 1, 1, 1) });
+      cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
+      cameraEntity.lookAt(modelEntity.getPosition());
+      cameraEntity.addComponent('script');
+      cameraEntity.script.create('orbitCamera', {
+        attributes: {
+          focusEntity: modelEntity,
+          inertiaFactor: 0.2,
+          distanceMax: maxZoom,
+          distanceMin: minZoom,
+          pitchAngleMax: maxAngle,
+          pitchAngleMin: minAngle,
+          yawAngleMax: maxAzimuth,
+          yawAngleMin: minAzimuth,
+          minY: minY,
+          frameOnStart: false
+        }
+      });
+      cameraEntity.script.create('orbitCameraInputMouse');
+      cameraEntity.script.create('orbitCameraInputTouch');
+      app.root.addChild(cameraEntity);
+
+      app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
+      app.once('update', () => resetViewerCamera());
+
+      // Optional: tooltips
+      try {
+        if (config.tooltips_url) {
+          import('./tooltips.js').then(tooltipsModule => {
+            tooltipsModule.initializeTooltips({
+              app,
+              cameraEntity,
+              modelEntity,
+              tooltipsUrl: config.tooltips_url,
+              defaultVisible: !!config.showTooltipsDefault,
+              moveDuration: config.tooltipMoveDuration || 0.6
+            });
+          }).catch(e => {});
+        }
+      } catch (e) {}
+
+      viewerInitialized = true;
     });
-    cameraEntity.script.create('orbitCameraInputMouse');
-    cameraEntity.script.create('orbitCameraInputTouch');
-    app.root.addChild(cameraEntity);
-
-    app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
-    app.once('update', () => resetViewerCamera());
-
-    // Optional: tooltips
-    try {
-      if (config.tooltips_url) {
-        import('./tooltips.js').then(tooltipsModule => {
-          tooltipsModule.initializeTooltips({
-            app,
-            cameraEntity,
-            modelEntity,
-            tooltipsUrl: config.tooltips_url,
-            defaultVisible: !!config.showTooltipsDefault,
-            moveDuration: config.tooltipMoveDuration || 0.6
-          });
-        }).catch(e => {});
-      }
-    } catch (e) {}
-
-    viewerInitialized = true;
+    app.assets.load(gsplatAsset);
   });
   app.assets.load(orbitAsset);
 }
 
-// Reset camera helper, unchanged from PLY version
+// Reset camera helper
 export function resetViewerCamera() {
   try {
     if (!cameraEntity || !modelEntity || !app) return;