Update viewer.js

viewer.js

@@ -1,6 +1,6 @@
 // viewer.js
 // ==============================
-// viewer.js (iPhone/Safari context detection & debug)
+// PlayCanvas viewer: iOS/Safari canvas/render loop debug/fix edition
 // ==============================
 
 let pc;            // will hold the PlayCanvas module once imported
@@ -15,28 +15,27 @@ let minZoom, maxZoom, minAngle, maxAngle, minAzimuth, maxAzimuth, minPivotY, min
 let modelX, modelY, modelZ, modelScale, modelRotationX, modelRotationY, modelRotationZ;
 let plyUrl, glbUrl;
 
-function logAndAlert(msg) {
-  console.log(msg);
-  if (typeof window !== "undefined" && /iPhone|iPad|iPod|Safari/i.test(navigator.userAgent)) {
-    alert(msg);
-  }
+// --- iOS/Safari detection helper
+function isIOSorSafari() {
+  const ua = navigator.userAgent;
+  return (
+    /iPad|iPhone|iPod/.test(ua) ||
+    (/Safari/.test(ua) && !/Chrome/.test(ua) && !/Android/.test(ua))
+  );
 }
 
+/**
+ * initializeViewer(config, instanceId)
+ */
 export async function initializeViewer(config, instanceId) {
-  if (viewerInitialized) {
-    logAndAlert("Viewer already initialized");
-    return;
-  }
-
-  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);
+  if (viewerInitialized) return;
 
-  logAndAlert(`UserAgent: ${userAgent}`);
-  logAndAlert(`isIOS: ${isIOS}  isSafari: ${isSafari}`);
+  // 1. iOS/Safari detection for debugging
+  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+  const isMobile = isIOS || /Android/i.test(navigator.userAgent);
 
-  // 1. Read config
+  // 2. Read config
   plyUrl = config.ply_url;
   glbUrl = config.glb_url;
   minZoom     = parseFloat(config.minZoom  || "1");
@@ -67,13 +66,13 @@ export async function initializeViewer(config, instanceId) {
   chosenCameraY = isMobile ? cameraYPhone : cameraY;
   chosenCameraZ = isMobile ? cameraZPhone : cameraZ;
 
-  // 2. Grab DOM
+  // 3. Grab DOM
   const canvasId          = 'canvas-' + instanceId;
   const progressDialog    = document.getElementById('progress-dialog-' + instanceId);
   const progressIndicator = document.getElementById('progress-indicator-' + instanceId);
   const viewerContainer   = document.getElementById('viewer-container-' + instanceId);
 
-  // 3. Create <canvas>
+  // 4. Create <canvas>
   let oldCanvas = document.getElementById(canvasId);
   if (oldCanvas) oldCanvas.remove();
   const canvas = document.createElement('canvas');
@@ -82,6 +81,13 @@ export async function initializeViewer(config, instanceId) {
   canvas.style.zIndex = "1";
   viewerContainer.insertBefore(canvas, progressDialog);
 
+  // --- iOS canvas workaround: prevent high pixelRatio upscaling (avoid WebGL1/2 buffer mismatch)
+  if (isIOS || isSafari) {
+    canvas.style.imageRendering = 'pixelated';
+    canvas.width  = viewerContainer.clientWidth  || 320;
+    canvas.height = viewerContainer.clientHeight || 240;
+  }
+
   // 4. Wheel listener
   canvas.addEventListener('wheel', e => {
     if (cameraEntity && cameraEntity.script && cameraEntity.script.orbitCamera) {
@@ -101,53 +107,24 @@ export async function initializeViewer(config, instanceId) {
 
   // 5. Import PlayCanvas
   if (!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;
-    }
+    pc = await import("https://esm.run/playcanvas");
+    window.pc = pc;
+    if (isIOS || isSafari) alert("PlayCanvas module loaded");
   }
 
-  // 6. Setup device & app (with robust fallback)
-  let device = null;
   try {
-    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;
-    }
+    // 6. Setup device & app
+    if (isIOS || isSafari) alert("Attempting WebGL2 context creation...");
+    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
+    });
     device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
-  } catch (e) {
-    logAndAlert("Graphics device creation failed: " + e);
-    return;
-  }
+    if (isIOS || isSafari) alert("WebGL2 context acquired");
 
-  // 7. App setup
-  let opts;
-  try {
-    opts = new pc.AppOptions();
+    const opts = new pc.AppOptions();
     opts.graphicsDevice = device;
     opts.mouse = new pc.Mouse(canvas);
     opts.touch = new pc.TouchDevice(canvas);
@@ -170,14 +147,10 @@ export async function initializeViewer(config, instanceId) {
     app = new pc.Application(canvas, opts);
     app.setCanvasFillMode(pc.FILLMODE_NONE);
     app.setCanvasResolution(pc.RESOLUTION_AUTO);
-    logAndAlert("PlayCanvas Application created.");
-  } catch (e) {
-    logAndAlert("PlayCanvas Application creation FAILED: " + e);
-    return;
-  }
 
-  // Attach ResizeObserver to keep canvas in sync with container size
-  try {
+    if (isIOS || isSafari) alert("PlayCanvas Application created");
+
+    // Attach ResizeObserver to keep canvas in sync with container size
     resizeObserver = new ResizeObserver(entries => {
       for (const entry of entries) {
         const { width, height } = entry.contentRect;
@@ -194,54 +167,26 @@ 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);
-  }
-
-  // 9. Assets
-  let assets;
-  try {
-    assets = {
-      model: new pc.Asset('gsplat', 'gsplat', { url: plyAssetUrl }),
+    // 7. Assets
+    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" }),
-      galerie: new pc.Asset('galerie', 'container', { url: glbAssetUrl }),
+      galerie: new pc.Asset('galerie', 'container', { url: glbUrl }),
       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;
-  }
 
-  // 10. Loader and progress
-  let loader, lastProg = 0;
-  try {
-    loader = new pc.AssetListLoader(Object.values(assets), app.assets);
+    const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
+    let lastProg = 0;
     assets.model.on('load', () => {
+      if (isIOS || isSafari) alert("PLY asset loaded!");
       progressDialog.style.display = 'none';
-      logAndAlert("PLY asset loaded!");
     });
     assets.model.on('error', err => {
-      logAndAlert("Error loading PLY file: " + err);
+      alert("Error loading PLY file: " + err);
+      console.error("Error loading PLY file:", err);
       progressDialog.innerHTML = `<p style="color: red">Error loading model: ${err}</p>`;
     });
 
@@ -255,15 +200,9 @@ 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…");
+      if (isIOS || isSafari) alert("Asset loaded .load() finished, starting PlayCanvas app...");
       app.start();
       app.scene.envAtlas = assets.hdr.resource;
 
@@ -342,11 +281,28 @@ export async function initializeViewer(config, instanceId) {
       });
       app.root.addChild(cameraEntity);
 
-      // Initial camera reset
+      // Camera reset/scene visible
       app.once('update', () => {
         resetViewerCamera();
-        logAndAlert("First update: scene and camera should be visible now!");
+        if (isIOS || isSafari) alert("Camera reset to defaults");
       });
+
+      // --- MAIN: Insert debug 'prerender' hook (fires before *every* frame render) ---
+      let prerenderAlerted = false;
+      app.on('prerender', function () {
+        if ((isIOS || isSafari) && !prerenderAlerted) {
+          prerenderAlerted = true;
+          // Additional test: dump framebuffer size and context info
+          const gl = app.graphicsDevice.gl;
+          let glInfo = "";
+          try {
+            glInfo = gl ? "WebGL context exists, viewport: " + gl.drawingBufferWidth + "x" + gl.drawingBufferHeight : "No GL context";
+          } catch (e) {}
+          alert("[viewer.js] prerender: FIRST draw! " + glInfo);
+          console.log("[viewer.js] prerender: FIRST draw!", glInfo);
+        }
+      });
+
       app.on('update', dt => {
         if (cameraEntity) {
           const pos = cameraEntity.getPosition();
@@ -356,8 +312,21 @@ export async function initializeViewer(config, instanceId) {
         }
       });
 
-      // Final resize
-      app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
+      // --- iOS/Safari workaround: force resize after delay in case initial canvas size is 0x0 ---
+      if (isIOS || isSafari) {
+        setTimeout(() => {
+          try {
+            canvas.width  = viewerContainer.clientWidth  || 320;
+            canvas.height = viewerContainer.clientHeight || 240;
+            app.resizeCanvas(canvas.width, canvas.height);
+            console.log("[viewer.js] iOS canvas forced resize:", canvas.width, canvas.height);
+          } catch (e) {
+            console.warn("[viewer.js] iOS resize workaround failed:", e);
+          }
+        }, 350);
+      } else {
+        app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
+      }
 
       // Tooltips
       try {
@@ -370,29 +339,20 @@ export async function initializeViewer(config, instanceId) {
           defaultVisible: !!config.showTooltipsDefault,
           moveDuration: config.tooltipMoveDuration || 0.6
         });
-        logAndAlert("Tooltips loaded");
+        if (isIOS || isSafari) alert("Tooltips loaded");
       } catch (e) {
-        logAndAlert("Error loading tooltips.js: " + e);
+        console.error("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;
-          }
-        });
-      }
+      if (isIOS || isSafari) alert("Viewer is fully initialized!");
     });
 
   } catch (error) {
-    logAndAlert("Error initializing PlayCanvas viewer: " + error);
+    alert("Error initializing PlayCanvas viewer: " + error);
+    console.error("Error initializing PlayCanvas viewer:", error);
     progressDialog.innerHTML = `<p style="color: red">Error loading viewer: ${error.message}</p>`;
   }
 }
@@ -438,9 +398,8 @@ export function resetViewerCamera() {
     orbitCam._updatePosition && orbitCam._updatePosition();
 
     tempEnt.destroy();
-    logAndAlert("Camera reset to defaults.");
   } catch (e) {
-    logAndAlert("Error resetting camera: " + e);
+    console.error("Error resetting camera:", e);
   }
 }
 
@@ -455,7 +414,6 @@ export function cleanupViewer() {
   modelEntity  = null;
   viewerInitialized = false;
 
-  // Disconnect the ResizeObserver to avoid leaks
   if (resizeObserver) {
     resizeObserver.disconnect();
     resizeObserver = null;