Update viewer.js

viewer.js

@@ -10,6 +10,7 @@ let minZoom, maxZoom, minAngle, maxAngle, minAzimuth, maxAzimuth, minPivotY, min
 let modelX, modelY, modelZ, modelScale, modelRotationX, modelRotationY, modelRotationZ;
 let sogsUrl, glbUrl, canvasBg;
 
+// ---- Utility: hex color to RGBA ----
 function hexToRgbaArray(hex) {
   try {
     hex = hex.replace("#", "");
@@ -23,24 +24,23 @@ function hexToRgbaArray(hex) {
       (num & 0xFF) / 255
     ];
   } catch (e) {
-    alert("hexToRgbaArray error: " + e);
+    console.error("hexToRgbaArray error: " + e);
     return [1, 1, 1, 1];
   }
 }
 
 export async function initializeViewer(config, instanceId) {
-  alert("initializeViewer: start");
-
   if (viewerInitialized) {
-    alert("Already initialized!");
+    console.warn("Already initialized!");
     return;
   }
 
+  // ---- Platform Detection ----
   const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
   const isMobile = isIOS || /Android/i.test(navigator.userAgent);
 
   try {
-    // Parse config
+    // ---- Parse Config ----
     sogsUrl   = config.sogs_json_url;
     glbUrl    = config.glb_url;
     canvasBg  = config.canvas_background || "#ffffff";
@@ -77,20 +77,18 @@ export async function initializeViewer(config, instanceId) {
     const progressIndicator= document.getElementById('progress-indicator-' + instanceId);
     const viewerContainer  = document.getElementById('viewer-container-' + instanceId);
 
+    // Remove previous canvas if present
     let oldCanvas = document.getElementById(canvasId);
     if (oldCanvas) oldCanvas.remove();
 
+    // ---- Create and Insert Canvas ----
     const canvas = document.createElement('canvas');
     canvas.id = canvasId;
     canvas.className = 'ply-canvas';
     canvas.style.width = "100%";
     canvas.style.height = "100%";
     canvas.setAttribute('tabindex', '0');
-    viewerContainer.insertBefore(canvas, progressDialog);
-
-    // Apply background color from config if present
     canvas.style.background = canvasBg;
-
     canvas.style.touchAction = "none";
     canvas.style.webkitTouchCallout = "none";
     canvas.addEventListener('gesturestart', e => e.preventDefault());
@@ -98,35 +96,31 @@ 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 });
-
-    // --- Mouse wheel suppression
-    canvas.addEventListener('wheel', (e) => {
-      e.preventDefault(); // Only block page scroll if mouse is over viewer
-    }, { passive: false });
+    // Mouse wheel suppression
+    canvas.addEventListener('wheel', (e) => { e.preventDefault(); }, { passive: false });
+    viewerContainer.insertBefore(canvas, progressDialog);
 
     if (progressDialog) progressDialog.style.display = 'block';
 
-    alert("Canvas created. Loading PlayCanvas...");
-
+    // ---- Load PlayCanvas ----
     if (!pc) {
       pc = await import("https://cdn.jsdelivr.net/npm/playcanvas@latest/+esm");
       window.pc = pc;
-      alert("PlayCanvas imported.");
     }
 
-    // Create app and graphics device
+    // ---- Create Graphics Device and App ----
     let device;
     try {
+      // Robust: force pixel ratio to 1 on mobile to avoid Safari VRAM crash!
       device = await pc.createGraphicsDevice(canvas, {
-        deviceTypes: ["webgl2", "webgl1"],
+        deviceTypes: ["webgl2", "webgl1"], // Try WebGL2, fallback to WebGL1
         glslangUrl: "https://mikafil-viewer-sgos.static.hf.space/static/lib/glslang/glslang.js",
         twgslUrl:   "https://mikafil-viewer-sgos.static.hf.space/static/lib/twgsl/twgsl.js",
-        antialias: false
+        antialias: false // Must be false for splats, memory safety
       });
-      device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
-      alert("Graphics device created.");
+      device.maxPixelRatio = isMobile ? 1 : Math.min(window.devicePixelRatio, 2); // <-- CRUCIAL!
     } catch (e) {
-      alert("Graphics device error: " + e);
+      console.error("Graphics device error: " + e);
       throw e;
     }
 
@@ -154,14 +148,12 @@ export async function initializeViewer(config, instanceId) {
     app.setCanvasFillMode(pc.FILLMODE_NONE);
     app.setCanvasResolution(pc.RESOLUTION_AUTO);
 
-    alert("App created.");
-
-    // Resizing
+    // ---- Resize Observer ----
     resizeObserver = new ResizeObserver(entries => {
       entries.forEach(entry => {
         try {
           app.resizeCanvas(entry.contentRect.width, entry.contentRect.height);
-        } catch (e) { alert("resizeCanvas error: " + e); }
+        } catch (e) { console.error("resizeCanvas error: " + e); }
       });
     });
     resizeObserver.observe(viewerContainer);
@@ -169,44 +161,41 @@ export async function initializeViewer(config, instanceId) {
     window.addEventListener('resize', () => {
       try {
         app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
-      } catch (e) { alert("resizeCanvas error: " + e); }
+      } catch (e) { console.error("resizeCanvas error: " + e); }
     });
     app.on('destroy', () => resizeObserver.disconnect());
 
-    // Prepare asset loading (SOGS as 'gsplat')
+    // ---- Assets Setup ----
     const assets = {
       sogs: new pc.Asset('gsplat', 'gsplat', { url: sogsUrl }),
       orbit: new pc.Asset('script', 'script', { url: "https://mikafil-viewer-sgos.static.hf.space/orbit-camera.js" }),
-      glb: new pc.Asset('glb', 'container', { url: glbUrl }),
+      glb: glbUrl ? new pc.Asset('glb', 'container', { url: glbUrl }) : null,
     };
-    for (const key in assets) app.assets.add(assets[key]);
-
-    // Individual asset error listeners
-    assets.sogs.on('error', (err) => { alert("SOGS asset error: " + err); });
-    assets.orbit.on('error', (err) => { alert("Orbit-camera.js asset error: " + err); });
-    if (assets.glb) assets.glb.on('error', (err) => { alert("GLB asset error: " + err); });
+    for (const key in assets) if (assets[key]) app.assets.add(assets[key]);
 
-    assets.sogs.ready(() => { alert("SOGS asset ready."); });
-    assets.orbit.ready(() => { alert("orbit-camera.js asset ready."); });
-    if (assets.glb) assets.glb.ready(() => { alert("GLB asset ready."); });
+    assets.sogs.on('error', (err) => { console.error("SOGS asset error: " + err); });
+    assets.orbit.on('error', (err) => { console.error("Orbit-camera.js asset error: " + err); });
+    if (assets.glb) assets.glb.on('error', (err) => { console.error("GLB asset error: " + err); });
 
-    const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
+    // ---- Loader ----
+    const loader = new pc.AssetListLoader(
+      Object.values(assets).filter(Boolean),
+      app.assets
+    );
 
-    loader.on('error', (err) => { alert("Asset loader error: " + err); });
+    loader.on('error', (err) => { console.error("Asset loader error: " + err); });
 
     loader.load(() => {
-      alert("All assets loaded. Starting app...");
-
       try {
         app.start();
       } catch (e) {
-        alert("app.start() error: " + e);
+        console.error("app.start() error: " + e);
         throw e;
       }
 
       if (progressDialog) progressDialog.style.display = 'none';
 
-      // Add SOGS model
+      // ---- Add SOGS Model ----
       try {
         modelEntity = new pc.Entity('model');
         modelEntity.addComponent('gsplat', { asset: assets.sogs });
@@ -214,24 +203,22 @@ export async function initializeViewer(config, instanceId) {
         modelEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
         modelEntity.setLocalScale(modelScale, modelScale, modelScale);
         app.root.addChild(modelEntity);
-        alert("Model entity added!");
       } catch (e) {
-        alert("Model entity error: " + e);
+        console.error("Model entity error: " + e);
         throw e;
       }
 
-      // Add the GLB entity if provided
+      // ---- Add GLB if provided ----
       try {
         if (assets.glb && assets.glb.resource && assets.glb.resource.instantiateRenderEntity) {
           const glbEntity = assets.glb.resource.instantiateRenderEntity();
           app.root.addChild(glbEntity);
-          alert("GLB entity added.");
         }
       } catch (e) {
-        alert("GLB entity error: " + e);
+        console.error("GLB entity error: " + e);
       }
 
-      // CAMERA
+      // ---- Camera Setup ----
       try {
         cameraEntity = new pc.Entity('camera');
         // Support background color
@@ -244,7 +231,7 @@ export async function initializeViewer(config, instanceId) {
         cameraEntity.lookAt(modelEntity.getPosition());
         cameraEntity.addComponent('script');
 
-        // Pass all attributes to Orbit Camera script
+        // Orbit camera script attributes
         cameraEntity.script.create('orbitCamera', {
           attributes: {
             focusEntity: modelEntity,
@@ -262,27 +249,23 @@ export async function initializeViewer(config, instanceId) {
         cameraEntity.script.create('orbitCameraInputMouse');
         cameraEntity.script.create('orbitCameraInputTouch');
         app.root.addChild(cameraEntity);
-
-        alert("Camera added.");
       } catch (e) {
-        alert("Camera error: " + e);
+        console.error("Camera error: " + e);
       }
 
       try {
         app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
-        alert("resizeCanvas called.");
       } catch (e) {
-        alert("resizeCanvas error: " + e);
+        console.error("resizeCanvas error: " + e);
       }
 
       try {
         app.once('update', () => resetViewerCamera());
-        alert("resetViewerCamera scheduled.");
       } catch (e) {
-        alert("resetViewerCamera schedule error: " + e);
+        console.error("resetViewerCamera schedule error: " + e);
       }
 
-      // Tooltips support (optional)
+      // ---- Tooltips (Optional) ----
       try {
         if (config.tooltips_url) {
           import('https://mikafil-viewer-sgos.static.hf.space/tooltips.js').then(tooltipsModule => {
@@ -294,35 +277,33 @@ export async function initializeViewer(config, instanceId) {
               defaultVisible: !!config.showTooltipsDefault,
               moveDuration: config.tooltipMoveDuration || 0.6
             });
-            alert("Tooltips loaded.");
-          }).catch(e => { alert("Tooltips module error: " + e); });
+          }).catch(e => { console.error("Tooltips module error: " + e); });
         }
       } catch (e) {
-        alert("Tooltips try-catch error: " + e);
+        console.error("Tooltips try-catch error: " + e);
       }
 
       viewerInitialized = true;
-      alert("Viewer initialized success!");
+      console.log("Viewer initialized success!");
     });
 
-    alert("Asset loader started.");
+    console.log("Asset loader started.");
   } catch (e) {
-    alert("Main try-catch error: " + e);
+    console.error("Main try-catch error: " + e);
     throw e;
   }
 }
 
 // Resets the viewer camera (as in your PLY example)
 export function resetViewerCamera() {
-  alert("resetViewerCamera called.");
   try {
     if (!cameraEntity || !modelEntity || !app) {
-      alert("resetViewerCamera: cameraEntity/modelEntity/app not ready");
+      console.warn("resetViewerCamera: cameraEntity/modelEntity/app not ready");
       return;
     }
     const orbitCam = cameraEntity.script.orbitCamera;
     if (!orbitCam) {
-      alert("resetViewerCamera: orbitCam missing");
+      console.warn("resetViewerCamera: orbitCam missing");
       return;
     }
 
@@ -361,8 +342,7 @@ export function resetViewerCamera() {
     if (orbitCam._updatePosition) orbitCam._updatePosition();
 
     tempEnt.destroy();
-    alert("resetViewerCamera: success");
   } catch (e) {
-    alert("resetViewerCamera: error: " + e);
+    console.error("resetViewerCamera: error: " + e);
   }
 }