Update viewer.js

viewer.js

@@ -11,7 +11,7 @@ let resizeObserver = null;
 let chosenCameraX, chosenCameraY, chosenCameraZ;
 let minZoom, maxZoom, minAngle, maxAngle, minAzimuth, maxAzimuth, minPivotY, minY;
 let modelX, modelY, modelZ, modelScale, modelRotationX, modelRotationY, modelRotationZ;
-let plyUrl, glbUrl;
+let sogsJsonUrl;
 
 export async function initializeViewer(config, instanceId) {
   if (viewerInitialized) return;
@@ -19,8 +19,12 @@ export async function initializeViewer(config, instanceId) {
   const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
   const isMobile = isIOS || /Android/i.test(navigator.userAgent);
 
-  plyUrl = config.ply_url;
-  glbUrl = config.glb_url;
+  // 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.');
+  }
+
   minZoom = parseFloat(config.minZoom || "1");
   maxZoom = parseFloat(config.maxZoom || "20");
   minAngle = parseFloat(config.minAngle || "-45");
@@ -73,9 +77,8 @@ export async function initializeViewer(config, instanceId) {
   canvas.addEventListener('dblclick', e => e.preventDefault());
   canvas.addEventListener('touchstart', e => { if (e.touches.length > 1) e.preventDefault(); }, { passive: false });
 
-  // --- The following line attaches mouse wheel suppression to canvas only ---
   canvas.addEventListener('wheel', (e) => {
-    e.preventDefault(); // Only block page scroll if mouse is over viewer
+    e.preventDefault();
   }, { passive: false });
 
   progressDialog.style.display = 'block';
@@ -85,7 +88,7 @@ export async function initializeViewer(config, instanceId) {
     window.pc = pc;
   }
 
-  // Create app first
+  // Create PlayCanvas app
   const device = await pc.createGraphicsDevice(canvas, {
     deviceTypes: ["webgl2"],
     glslangUrl: "https://playcanvas.vercel.app/static/lib/glslang/glslang.js",
@@ -96,7 +99,6 @@ export async function initializeViewer(config, instanceId) {
 
   const opts = new pc.AppOptions();
   opts.graphicsDevice = device;
-  // Attach input only to canvas
   opts.mouse = new pc.Mouse(canvas);
   opts.touch = new pc.TouchDevice(canvas);
   opts.componentSystems = [
@@ -104,15 +106,13 @@ export async function initializeViewer(config, instanceId) {
     pc.CameraComponentSystem,
     pc.LightComponentSystem,
     pc.ScriptComponentSystem,
-    pc.GSplatComponentSystem,
     pc.CollisionComponentSystem,
     pc.RigidbodyComponentSystem
   ];
   opts.resourceHandlers = [
     pc.TextureHandler,
     pc.ContainerHandler,
-    pc.ScriptHandler,
-    pc.GSplatHandler
+    pc.ScriptHandler
   ];
 
   app = new pc.Application(canvas, opts);
@@ -129,41 +129,71 @@ export async function initializeViewer(config, instanceId) {
   window.addEventListener('resize', () => app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight));
   app.on('destroy', () => resizeObserver.disconnect());
 
-  // Assets after app exists
-  const assets = {
-    model: new pc.Asset('gsplat', 'gsplat', { url: plyUrl }),
-    orbit: new pc.Asset('script', 'script', { url: "https://mikafil-viewer-gs.static.hf.space/orbit-camera.js" }),
-    glb: new pc.Asset('glb', 'container', { url: glbUrl }),
-  };
-  for (const key in assets) app.assets.add(assets[key]);
+  // Load orbit camera scripts
+  const orbitAsset = new pc.Asset('orbit', 'script', { url: "https://mikafil-viewer-gs.static.hf.space/orbit-camera.js" });
+  app.assets.add(orbitAsset);
+
+  // Load SOGS json (contains metadata and webp references)
+  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 });
+        app.assets.add(asset);
+        asset.ready(resolve.bind(null, asset.resource));
+        asset.on('error', reject);
+        app.assets.load(asset);
+      });
+    }
+  } catch (e) {
+    progressDialog.style.display = 'none';
+    alert("Failed to load SOGS JSON/images: " + e.message);
+    throw e;
+  }
 
-  const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
-  loader.load(() => {
+  // Continue once orbit script is loaded
+  orbitAsset.ready(async () => {
     app.start();
     progressDialog.style.display = 'none';
 
-    // Add PLY/GSplat model
+    // Add the SOGS/webp point cloud as a "gsplat" entity/component
     modelEntity = new pc.Entity('model');
-    modelEntity.addComponent('gsplat', { asset: assets.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);
 
-    // --- Add the GLB entity ---
-    if (assets.glb && assets.glb.resource && assets.glb.resource.instantiateRenderEntity) {
-      const glbEntity = assets.glb.resource.instantiateRenderEntity();
-      app.root.addChild(glbEntity);
-    }
-
+    // Camera entity
     cameraEntity = new pc.Entity('camera');
-    // PURE WHITE BACKGROUND
-    cameraEntity.addComponent('camera', { clearColor: new pc.Color(1, 1, 1, 1) }); // White RGBA
+    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');
 
-    // === MAIN FIX: Pass ALL relevant attributes including minY ===
     cameraEntity.script.create('orbitCamera', {
       attributes: {
         focusEntity: modelEntity,
@@ -183,10 +213,9 @@ export async function initializeViewer(config, instanceId) {
     app.root.addChild(cameraEntity);
 
     app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
-
     app.once('update', () => resetViewerCamera());
 
-    // Tooltips supported if tooltips_url set
+    // Optional: tooltips
     try {
       if (config.tooltips_url) {
         import('./tooltips.js').then(tooltipsModule => {
@@ -198,18 +227,16 @@ export async function initializeViewer(config, instanceId) {
             defaultVisible: !!config.showTooltipsDefault,
             moveDuration: config.tooltipMoveDuration || 0.6
           });
-        }).catch(e => {
-          // Tooltips optional: fail silently if missing
-        });
+        }).catch(e => {});
       }
-    } catch (e) {
-      // Tooltips optional, fail silently
-    }
+    } catch (e) {}
 
     viewerInitialized = true;
   });
+  app.assets.load(orbitAsset);
 }
 
+// Reset camera helper, unchanged from PLY version
 export function resetViewerCamera() {
   try {
     if (!cameraEntity || !modelEntity || !app) return;
@@ -251,7 +278,5 @@ export function resetViewerCamera() {
     if (orbitCam._updatePosition) orbitCam._updatePosition();
 
     tempEnt.destroy();
-  } catch (e) {
-    // Silent fail
-  }
+  } catch (e) {}
 }