Update viewer.js

viewer.js

@@ -1,5 +1,4 @@
 // viewer.js
-// ==============================
 
 let pc;            // will hold the PlayCanvas module once imported
 export let app = null;
@@ -13,15 +12,20 @@ let minZoom, maxZoom, minAngle, maxAngle, minAzimuth, maxAzimuth, minPivotY, min
 let modelX, modelY, modelZ, modelScale, modelRotationX, modelRotationY, modelRotationZ;
 let plyUrl, glbUrl;
 
+// iOS & Safari detection
+function isIOS() {
+  return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+}
+function isSafari() {
+  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}
+
 /**
  * initializeViewer(config, instanceId)
  */
 export async function initializeViewer(config, instanceId) {
   if (viewerInitialized) return;
 
-  const isIOS    = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
-  const isMobile = isIOS || /Android/i.test(navigator.userAgent);
-
   // 1. Read config
   plyUrl = config.ply_url;
   glbUrl = config.glb_url;
@@ -49,9 +53,10 @@ export async function initializeViewer(config, instanceId) {
   const cameraYPhone = (config.cameraYPhone !== undefined) ? parseFloat(config.cameraYPhone) : cameraY;
   const cameraZPhone = (config.cameraZPhone !== undefined) ? parseFloat(config.cameraZPhone) : (cameraZ * 1.5);
 
-  chosenCameraX = isMobile ? cameraXPhone : cameraX;
-  chosenCameraY = isMobile ? cameraYPhone : cameraY;
-  chosenCameraZ = isMobile ? cameraZPhone : cameraZ;
+  const mobile = isIOS() || /Android/i.test(navigator.userAgent);
+  chosenCameraX = mobile ? cameraXPhone : cameraX;
+  chosenCameraY = mobile ? cameraYPhone : cameraY;
+  chosenCameraZ = mobile ? cameraZPhone : cameraZ;
 
   // 2. Grab DOM
   const canvasId          = 'canvas-' + instanceId;
@@ -89,16 +94,21 @@ export async function initializeViewer(config, instanceId) {
   if (!pc) {
     pc = await import("https://esm.run/playcanvas");
     window.pc = pc;
+    alert('[viewer.js] PlayCanvas module loaded.');
   }
 
   try {
     // 6. Setup device & app
+    alert('[viewer.js] Creating graphics device...');
     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
+      antialias:   false,
+      preserveDrawingBuffer: isIOS() || isSafari() ? true : false,
+      alpha: false
     });
+    alert('[viewer.js] Graphics device created!');
     device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
 
     const opts = new pc.AppOptions();
@@ -124,8 +134,8 @@ 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;
+
+    alert('[viewer.js] PlayCanvas application created!');
 
     // Attach ResizeObserver to keep canvas in sync with container size
     resizeObserver = new ResizeObserver(entries => {
@@ -157,9 +167,12 @@ export async function initializeViewer(config, instanceId) {
 
     const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
     let lastProg = 0;
-    assets.model.on('load', () => progressDialog.style.display = 'none');
+    assets.model.on('load', () => {
+      progressDialog.style.display = 'none';
+      alert('[viewer.js] PLY/GSplat asset loaded!');
+    });
     assets.model.on('error', err => {
-      console.error("Error loading PLY file:", err);
+      alert('[viewer.js] Error loading model: ' + err);
       progressDialog.innerHTML = <p style="color: red">Error loading model: ${err}</p>;
     });
 
@@ -175,6 +188,7 @@ export async function initializeViewer(config, instanceId) {
     }, 100);
 
     loader.load(async () => {
+      alert('[viewer.js] All assets loaded; starting app.');
       app.start();
       app.scene.envAtlas = assets.hdr.resource;
 
@@ -185,6 +199,7 @@ export async function initializeViewer(config, instanceId) {
       modelEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
       modelEntity.setLocalScale(modelScale, modelScale, modelScale);
       app.root.addChild(modelEntity);
+      alert('[viewer.js] Model entity added to scene!');
 
       // Light
       const dirLight = new pc.Entity('Cascaded Light');
@@ -208,8 +223,11 @@ export async function initializeViewer(config, instanceId) {
       app.root.addChild(dirLight);
 
       // Gallery GLB
-      const galleryEntity = assets.galerie.resource.instantiateRenderEntity();
-      app.root.addChild(galleryEntity);
+      if (assets.galerie && assets.galerie.resource) {
+        const galleryEntity = assets.galerie.resource.instantiateRenderEntity();
+        app.root.addChild(galleryEntity);
+        alert('[viewer.js] GLB entity added to scene!');
+      }
 
       // Camera setup
       cameraEntity = new pc.Entity('camera');
@@ -217,7 +235,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());
@@ -239,8 +256,8 @@ export async function initializeViewer(config, instanceId) {
       });
       cameraEntity.script.create('orbitCameraInputMouse', {
         attributes: {
-          orbitSensitivity: isMobile ? 0.6 : 0.3,
-          distanceSensitivity: isMobile ? 0.5 : 0.4
+          orbitSensitivity: mobile ? 0.6 : 0.3,
+          distanceSensitivity: mobile ? 0.5 : 0.4
         }
       });
       if (cameraEntity.script.orbitCameraInputMouse) {
@@ -253,9 +270,13 @@ export async function initializeViewer(config, instanceId) {
         }
       });
       app.root.addChild(cameraEntity);
+      alert('[viewer.js] Camera entity added to scene!');
 
       // Reset & constrain updates
-      app.once('update', () => resetViewerCamera());
+      app.once('update', () => {
+        alert('[viewer.js] First app update! Resetting camera.');
+        resetViewerCamera();
+      });
       app.on('update', dt => {
         if (cameraEntity) {
           const pos = cameraEntity.getPosition();
@@ -263,6 +284,11 @@ export async function initializeViewer(config, instanceId) {
             cameraEntity.setPosition(pos.x, minY, pos.z);
           }
         }
+        // Diagnostics: Only show once
+        if (!window._pcFirstUpdate) {
+          window._pcFirstUpdate = true;
+          alert('[viewer.js] Entered update/render loop!');
+        }
       });
 
       // Final resize
@@ -285,9 +311,11 @@ export async function initializeViewer(config, instanceId) {
 
       progressDialog.style.display = 'none';
       viewerInitialized = true;
+      alert('[viewer.js] Viewer fully initialized and running!');
     });
 
   } catch (error) {
+    alert("[viewer.js] Error initializing PlayCanvas viewer: " + error.message);
     console.error("Error initializing PlayCanvas viewer:", error);
     progressDialog.innerHTML = <p style="color: red">Error loading viewer: ${error.message}</p>;
   }