Update viewer.js

viewer.js

@@ -1,6 +1,6 @@
 // viewer.js
 // ==============================
-// viewer.js
+// viewer.js (iPhone/Safari context detection & debug)
 // ==============================
 
 let pc;            // will hold the PlayCanvas module once imported
@@ -15,14 +15,26 @@ let minZoom, maxZoom, minAngle, maxAngle, minAzimuth, maxAzimuth, minPivotY, min
 let modelX, modelY, modelZ, modelScale, modelRotationX, modelRotationY, modelRotationZ;
 let plyUrl, glbUrl;
 
-/**
- * initializeViewer(config, instanceId)
- */
+function logAndAlert(msg) {
+  console.log(msg);
+  if (typeof window !== "undefined" && /iPhone|iPad|iPod|Safari/i.test(navigator.userAgent)) {
+    alert(msg);
+  }
+}
+
 export async function initializeViewer(config, instanceId) {
-  if (viewerInitialized) return;
+  if (viewerInitialized) {
+    logAndAlert("Viewer already initialized");
+    return;
+  }
 
-  const isIOS    = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
-  const isMobile = isIOS || /Android/i.test(navigator.userAgent);
+  const userAgent = navigator.userAgent;
+  const isIOS    = /iPad|iPhone|iPod/.test(userAgent) && !window.MSStream;
+  const isSafari = /^((?!chrome|android).)*safari/i.test(userAgent);
+  const isMobile = isIOS || /Android/i.test(userAgent);
+
+  logAndAlert(`UserAgent: ${userAgent}`);
+  logAndAlert(`isIOS: ${isIOS}  isSafari: ${isSafari}`);
 
   // 1. Read config
   plyUrl = config.ply_url;
@@ -89,21 +101,53 @@ export async function initializeViewer(config, instanceId) {
 
   // 5. Import PlayCanvas
   if (!pc) {
-    pc = await import("https://esm.run/playcanvas");
-    window.pc = pc;
+    try {
+      pc = await import("https://esm.run/playcanvas");
+      window.pc = pc;
+      logAndAlert("PlayCanvas module loaded");
+    } catch (e) {
+      logAndAlert("PlayCanvas module import FAILED: " + e);
+      return;
+    }
   }
 
+  // 6. Setup device & app (with robust fallback)
+  let device = null;
   try {
-    // 6. Setup device & app
-    const device = await pc.createGraphicsDevice(canvas, {
-      deviceTypes: ["webgl2"],
-      glslangUrl:  "https://playcanvas.vercel.app/static/lib/glslang/glslang.js",
-      twgslUrl:    "https://playcanvas.vercel.app/static/lib/twgsl/twgsl.js",
-      antialias:   false
-    });
+    try {
+      logAndAlert("Attempting WebGL2 context creation…");
+      device = await pc.createGraphicsDevice(canvas, {
+        deviceTypes: ["webgl2"],
+        glslangUrl:  "https://playcanvas.vercel.app/static/lib/glslang/glslang.js",
+        twgslUrl:    "https://playcanvas.vercel.app/static/lib/twgsl/twgsl.js",
+        antialias:   false
+      });
+      logAndAlert("WebGL2 context acquired.");
+    } catch (err) {
+      logAndAlert("WebGL2 context failed: " + err);
+      logAndAlert("Falling back to WebGL1 context…");
+      device = await pc.createGraphicsDevice(canvas, {
+        deviceTypes: ["webgl1"],
+        glslangUrl:  "https://playcanvas.vercel.app/static/lib/glslang/glslang.js",
+        twgslUrl:    "https://playcanvas.vercel.app/static/lib/twgsl/twgsl.js",
+        antialias:   false
+      });
+      logAndAlert("WebGL1 context acquired.");
+    }
+    if (!device) {
+      logAndAlert("No WebGL context could be created!");
+      return;
+    }
     device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+  } catch (e) {
+    logAndAlert("Graphics device creation failed: " + e);
+    return;
+  }
 
-    const opts = new pc.AppOptions();
+  // 7. App setup
+  let opts;
+  try {
+    opts = new pc.AppOptions();
     opts.graphicsDevice = device;
     opts.mouse = new pc.Mouse(canvas);
     opts.touch = new pc.TouchDevice(canvas);
@@ -126,10 +170,14 @@ export async function initializeViewer(config, instanceId) {
     app = new pc.Application(canvas, opts);
     app.setCanvasFillMode(pc.FILLMODE_NONE);
     app.setCanvasResolution(pc.RESOLUTION_AUTO);
-    //app.scene.exposure    = 0.5;
-    //app.scene.toneMapping = pc.TONEMAP_ACES;
+    logAndAlert("PlayCanvas Application created.");
+  } catch (e) {
+    logAndAlert("PlayCanvas Application creation FAILED: " + e);
+    return;
+  }
 
-    // Attach ResizeObserver to keep canvas in sync with container size
+  // Attach ResizeObserver to keep canvas in sync with container size
+  try {
     resizeObserver = new ResizeObserver(entries => {
       for (const entry of entries) {
         const { width, height } = entry.contentRect;
@@ -146,22 +194,54 @@ export async function initializeViewer(config, instanceId) {
     app.on('destroy', () => {
       window.removeEventListener('resize', resizeCanvas);
     });
+  } catch (e) {
+    logAndAlert("ResizeObserver setup failed: " + e);
+  }
+
+  // 8. Asset loader, with CORS workaround if needed
+  let fetchAssetWithCors = async function(url) {
+    try {
+      const resp = await fetch(url, {mode: 'cors', credentials: 'omit', cache: 'force-cache'});
+      if (!resp.ok) throw new Error("Failed fetch: " + url);
+      return resp.url;
+    } catch (e) {
+      logAndAlert("Asset fetch CORS failed for " + url + ": " + e);
+      return url; // fallback to original
+    }
+  };
+  let plyAssetUrl = plyUrl;
+  let glbAssetUrl = glbUrl;
+  if (isIOS || isSafari) {
+    plyAssetUrl = await fetchAssetWithCors(plyUrl);
+    glbAssetUrl = await fetchAssetWithCors(glbUrl);
+  }
 
-    // 7. Assets
-    const assets = {
-      model: new pc.Asset('gsplat', 'gsplat', { url: plyUrl }),
+  // 9. Assets
+  let assets;
+  try {
+    assets = {
+      model: new pc.Asset('gsplat', 'gsplat', { url: plyAssetUrl }),
       orbit: new pc.Asset('script', 'script', { url: "https://mikafil-viewer-gs.static.hf.space/orbit-camera.js" }),
-      galerie: new pc.Asset('galerie', 'container', { url: glbUrl }),
+      galerie: new pc.Asset('galerie', 'container', { url: glbAssetUrl }),
       hdr: new pc.Asset('hdr', 'texture', {
         url: `https://huggingface.co/datasets/bilca/ply_files/resolve/main/galeries/blanc.png`
       }, { type: pc.TEXTURETYPE_RGBP, mipmaps: false })
     };
+  } catch (e) {
+    logAndAlert("Asset object creation failed: " + e);
+    return;
+  }
 
-    const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
-    let lastProg = 0;
-    assets.model.on('load', () => progressDialog.style.display = 'none');
+  // 10. Loader and progress
+  let loader, lastProg = 0;
+  try {
+    loader = new pc.AssetListLoader(Object.values(assets), app.assets);
+    assets.model.on('load', () => {
+      progressDialog.style.display = 'none';
+      logAndAlert("PLY asset loaded!");
+    });
     assets.model.on('error', err => {
-      console.error("Error loading PLY file:", err);
+      logAndAlert("Error loading PLY file: " + err);
       progressDialog.innerHTML = `<p style="color: red">Error loading model: ${err}</p>`;
     });
 
@@ -175,8 +255,15 @@ export async function initializeViewer(config, instanceId) {
         progressIndicator.value = lastProg;
       }
     }, 100);
+  } catch (e) {
+    logAndAlert("AssetListLoader setup failed: " + e);
+    return;
+  }
 
+  // 11. Start loading and build scene
+  try {
     loader.load(async () => {
+      logAndAlert("Asset loader .load() finished, starting PlayCanvas app…");
       app.start();
       app.scene.envAtlas = assets.hdr.resource;
 
@@ -219,7 +306,6 @@ export async function initializeViewer(config, instanceId) {
         clearColor: config.canvas_background
           ? parseInt(config.canvas_background.substr(1, 2), 16) / 255
           : 0,
-        //toneMapping: pc.TONEMAP_ACES
       });
       cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
       cameraEntity.lookAt(modelEntity.getPosition());
@@ -256,8 +342,11 @@ export async function initializeViewer(config, instanceId) {
       });
       app.root.addChild(cameraEntity);
 
-      // Reset & constrain updates
-      app.once('update', () => resetViewerCamera());
+      // Initial camera reset
+      app.once('update', () => {
+        resetViewerCamera();
+        logAndAlert("First update: scene and camera should be visible now!");
+      });
       app.on('update', dt => {
         if (cameraEntity) {
           const pos = cameraEntity.getPosition();
@@ -281,16 +370,29 @@ export async function initializeViewer(config, instanceId) {
           defaultVisible: !!config.showTooltipsDefault,
           moveDuration: config.tooltipMoveDuration || 0.6
         });
+        logAndAlert("Tooltips loaded");
       } catch (e) {
-        console.error("Error loading tooltips.js:", e);
+        logAndAlert("Error loading tooltips.js: " + e);
       }
 
       progressDialog.style.display = 'none';
       viewerInitialized = true;
+      logAndAlert("Viewer is fully initialized!");
+
+      // DEBUG: Draw loop reach on iOS/Safari only
+      if (isIOS || isSafari) {
+        let firstDraw = true;
+        app.on('frameend', function() {
+          if (firstDraw) {
+            alert('First draw call reached (Safari/iOS)');
+            firstDraw = false;
+          }
+        });
+      }
     });
 
   } catch (error) {
-    console.error("Error initializing PlayCanvas viewer:", error);
+    logAndAlert("Error initializing PlayCanvas viewer: " + error);
     progressDialog.innerHTML = `<p style="color: red">Error loading viewer: ${error.message}</p>`;
   }
 }
@@ -336,8 +438,9 @@ export function resetViewerCamera() {
     orbitCam._updatePosition && orbitCam._updatePosition();
 
     tempEnt.destroy();
+    logAndAlert("Camera reset to defaults.");
   } catch (e) {
-    console.error("Error resetting camera:", e);
+    logAndAlert("Error resetting camera: " + e);
   }
 }
 
@@ -357,4 +460,4 @@ export function cleanupViewer() {
     resizeObserver.disconnect();
     resizeObserver = null;
   }
-}
+}