Update viewer.js

viewer.js

@@ -1,6 +1,6 @@
 // viewer.js
 // ==============================
-// PlayCanvas viewer: iOS/Safari canvas/render loop debug/fix edition
+// PlayCanvas viewer: iOS/Safari deep step-by-step debug edition
 // ==============================
 
 let pc;            // will hold the PlayCanvas module once imported
@@ -114,7 +114,7 @@ export async function initializeViewer(config, instanceId) {
 
   try {
     // 6. Setup device & app
-    if (isIOS || isSafari) alert("Attempting WebGL2 context creation...");
+    if (isIOS || isSafari) alert("Attemptiong WebGL2 context creation...");
     const device = await pc.createGraphicsDevice(canvas, {
       deviceTypes: ["webgl2"],
       glslangUrl:  "https://playcanvas.vercel.app/static/lib/glslang/glslang.js",
@@ -181,7 +181,7 @@ export async function initializeViewer(config, instanceId) {
     const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
     let lastProg = 0;
     assets.model.on('load', () => {
-      if (isIOS || isSafari) alert("PLY asset loaded!");
+      if (isIOS || isSafari) alert("[viewer.js] model asset loaded");
       progressDialog.style.display = 'none';
     });
     assets.model.on('error', err => {
@@ -202,152 +202,166 @@ export async function initializeViewer(config, instanceId) {
     }, 100);
 
     loader.load(async () => {
-      if (isIOS || isSafari) alert("Asset loaded .load() finished, starting PlayCanvas app...");
-      app.start();
-      app.scene.envAtlas = assets.hdr.resource;
-
-      // Model entity
-      modelEntity = new pc.Entity('model');
-      modelEntity.addComponent('gsplat', { asset: assets.model });
-      modelEntity.setLocalPosition(modelX, modelY, modelZ);
-      modelEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
-      modelEntity.setLocalScale(modelScale, modelScale, modelScale);
-      app.root.addChild(modelEntity);
-
-      // Light
-      const dirLight = new pc.Entity('Cascaded Light');
-      dirLight.addComponent('light', {
-        type: 'directional',
-        color: pc.Color.WHITE,
-        shadowBias: 0.3,
-        normalOffsetBias: 0.2,
-        intensity: 1.0,
-        soft: true,
-        shadowResolution: 4096,
-        penumbraSize: 7,
-        penumbraFalloff: 1.5,
-        shadowSamples: 128,
-        shadowBlockerSamples: 16,
-        castShadows: true,
-        shadowType: pc.SHADOW_PCSS_32F,
-        shadowDistance: 1000
-      });
-      dirLight.setLocalEulerAngles(0, 0, 0);
-      app.root.addChild(dirLight);
-
-      // Gallery GLB
-      const galleryEntity = assets.galerie.resource.instantiateRenderEntity();
-      app.root.addChild(galleryEntity);
-
-      // Camera setup
-      cameraEntity = new pc.Entity('camera');
-      cameraEntity.addComponent('camera', {
-        clearColor: config.canvas_background
-          ? parseInt(config.canvas_background.substr(1, 2), 16) / 255
-          : 0,
-      });
-      cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
-      cameraEntity.lookAt(modelEntity.getPosition());
-
-      cameraEntity.addComponent('script');
-      cameraEntity.script.create('orbitCamera', {
-        attributes: {
-          inertiaFactor: 0.2,
-          focusEntity: modelEntity,
-          distanceMax: maxZoom,
-          distanceMin: minZoom,
-          pitchAngleMax: maxAngle,
-          pitchAngleMin: minAngle,
-          yawAngleMax: maxAzimuth,
-          yawAngleMin: minAzimuth,
-          minPivotY: minPivotY,
-          frameOnStart: false
-        }
-      });
-      cameraEntity.script.create('orbitCameraInputMouse', {
-        attributes: {
-          orbitSensitivity: isMobile ? 0.6 : 0.3,
-          distanceSensitivity: isMobile ? 0.5 : 0.4
-        }
-      });
-      if (cameraEntity.script.orbitCameraInputMouse) {
-        cameraEntity.script.orbitCameraInputMouse.onMouseWheel = function() {};
-      }
-      cameraEntity.script.create('orbitCameraInputTouch', {
-        attributes: {
-          orbitSensitivity: 0.6,
-          distanceSensitivity: 0.5
-        }
-      });
-      app.root.addChild(cameraEntity);
-
-      // Camera reset/scene visible
-      app.once('update', () => {
-        resetViewerCamera();
-        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();
-          if (pos.y < minY) {
-            cameraEntity.setPosition(pos.x, minY, pos.z);
+      try {
+        if (isIOS || isSafari) alert("[viewer.js] loader.load callback: assets ready!");
+
+        app.start();
+        if (isIOS || isSafari) alert("[viewer.js] app.start() called");
+
+        app.scene.envAtlas = assets.hdr.resource;
+        if (isIOS || isSafari) alert("[viewer.js] HDR environment applied");
+
+        // Model entity
+        modelEntity = new pc.Entity('model');
+        modelEntity.addComponent('gsplat', { asset: assets.model });
+        modelEntity.setLocalPosition(modelX, modelY, modelZ);
+        modelEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
+        modelEntity.setLocalScale(modelScale, modelScale, modelScale);
+        app.root.addChild(modelEntity);
+        if (isIOS || isSafari) alert("[viewer.js] Model entity created and added to scene");
+
+        // Light
+        const dirLight = new pc.Entity('Cascaded Light');
+        dirLight.addComponent('light', {
+          type: 'directional',
+          color: pc.Color.WHITE,
+          shadowBias: 0.3,
+          normalOffsetBias: 0.2,
+          intensity: 1.0,
+          soft: true,
+          shadowResolution: 4096,
+          penumbraSize: 7,
+          penumbraFalloff: 1.5,
+          shadowSamples: 128,
+          shadowBlockerSamples: 16,
+          castShadows: true,
+          shadowType: pc.SHADOW_PCSS_32F,
+          shadowDistance: 1000
+        });
+        dirLight.setLocalEulerAngles(0, 0, 0);
+        app.root.addChild(dirLight);
+        if (isIOS || isSafari) alert("[viewer.js] Directional light added");
+
+        // Gallery GLB
+        const galleryEntity = assets.galerie.resource.instantiateRenderEntity();
+        app.root.addChild(galleryEntity);
+        if (isIOS || isSafari) alert("[viewer.js] Gallery (GLB) entity added");
+
+        // Camera setup
+        cameraEntity = new pc.Entity('camera');
+        cameraEntity.addComponent('camera', {
+          clearColor: config.canvas_background
+            ? parseInt(config.canvas_background.substr(1, 2), 16) / 255
+            : 0,
+        });
+        cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
+        cameraEntity.lookAt(modelEntity.getPosition());
+
+        cameraEntity.addComponent('script');
+        cameraEntity.script.create('orbitCamera', {
+          attributes: {
+            inertiaFactor: 0.2,
+            focusEntity: modelEntity,
+            distanceMax: maxZoom,
+            distanceMin: minZoom,
+            pitchAngleMax: maxAngle,
+            pitchAngleMin: minAngle,
+            yawAngleMax: maxAzimuth,
+            yawAngleMin: minAzimuth,
+            minPivotY: minPivotY,
+            frameOnStart: false
+          }
+        });
+        cameraEntity.script.create('orbitCameraInputMouse', {
+          attributes: {
+            orbitSensitivity: isMobile ? 0.6 : 0.3,
+            distanceSensitivity: isMobile ? 0.5 : 0.4
           }
+        });
+        if (cameraEntity.script.orbitCameraInputMouse) {
+          cameraEntity.script.orbitCameraInputMouse.onMouseWheel = function() {};
         }
-      });
-
-      // --- 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);
+        cameraEntity.script.create('orbitCameraInputTouch', {
+          attributes: {
+            orbitSensitivity: 0.6,
+            distanceSensitivity: 0.5
           }
-        }, 350);
-      } else {
-        app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
-      }
+        });
+        app.root.addChild(cameraEntity);
+        if (isIOS || isSafari) alert("[viewer.js] Camera entity created, configured and added to scene");
 
-      // Tooltips
-      try {
-        const tooltipsModule = await import('./tooltips.js');
-        tooltipsModule.initializeTooltips({
-          app,
-          cameraEntity,
-          modelEntity,
-          tooltipsUrl: config.tooltips_url,
-          defaultVisible: !!config.showTooltipsDefault,
-          moveDuration: config.tooltipMoveDuration || 0.6
+        // Camera reset/scene visible
+        app.once('update', () => {
+          resetViewerCamera();
+          if (isIOS || isSafari) alert("[viewer.js] Camera reset to defaults after first update");
         });
-        if (isIOS || isSafari) alert("Tooltips loaded");
-      } catch (e) {
-        console.error("Error loading tooltips.js:", e);
-      }
 
-      progressDialog.style.display = 'none';
-      viewerInitialized = true;
+        // --- MAIN: Insert debug 'prerender' hook (fires before *every* frame render) ---
+        let prerenderAlerted = false;
+        app.on('prerender', function () {
+          if ((isIOS || isSafari) && !prerenderAlerted) {
+            prerenderAlerted = true;
+            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();
+            if (pos.y < minY) {
+              cameraEntity.setPosition(pos.x, minY, pos.z);
+            }
+          }
+        });
 
-      if (isIOS || isSafari) alert("Viewer is fully initialized!");
+        // --- 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 {
+          const tooltipsModule = await import('./tooltips.js');
+          tooltipsModule.initializeTooltips({
+            app,
+            cameraEntity,
+            modelEntity,
+            tooltipsUrl: config.tooltips_url,
+            defaultVisible: !!config.showTooltipsDefault,
+            moveDuration: config.tooltipMoveDuration || 0.6
+          });
+          if (isIOS || isSafari) alert("[viewer.js] Tooltips loaded");
+        } catch (e) {
+          if (isIOS || isSafari) alert("[viewer.js] Error loading tooltips.js: " + e);
+          console.error("Error loading tooltips.js:", e);
+        }
+
+        progressDialog.style.display = 'none';
+        viewerInitialized = true;
+        if (isIOS || isSafari) alert("[viewer.js] Viewer is fully initialized!");
+
+      } catch (innerErr) {
+        alert("[viewer.js] ERROR during scene setup: " + (innerErr && innerErr.message ? innerErr.message : innerErr));
+        console.error("[viewer.js] Scene setup error:", innerErr);
+        throw innerErr;
+      }
     });
 
   } catch (error) {
@@ -398,7 +412,9 @@ export function resetViewerCamera() {
     orbitCam._updatePosition && orbitCam._updatePosition();
 
     tempEnt.destroy();
+    if (isIOSorSafari()) alert("[viewer.js] Camera reset to defaults");
   } catch (e) {
+    alert("[viewer.js] Error resetting camera: " + e);
     console.error("Error resetting camera:", e);
   }
 }
@@ -414,6 +430,7 @@ export function cleanupViewer() {
   modelEntity  = null;
   viewerInitialized = false;
 
+  // Disconnect the ResizeObserver to avoid leaks
   if (resizeObserver) {
     resizeObserver.disconnect();
     resizeObserver = null;