Update viewer.js

viewer.js

@@ -1,7 +1,5 @@
 // viewer.js
 // ==============================
-// PlayCanvas viewer: iOS/Safari deep step-by-step debug edition
-// ==============================
 
 let pc;            // will hold the PlayCanvas module once imported
 export let app = null;
@@ -15,27 +13,18 @@ let minZoom, maxZoom, minAngle, maxAngle, minAzimuth, maxAzimuth, minPivotY, min
 let modelX, modelY, modelZ, modelScale, modelRotationX, modelRotationY, modelRotationZ;
 let plyUrl, glbUrl;
 
-// --- 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) return;
 
-  // 1. iOS/Safari detection for debugging
-  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+  // Detect iOS and Safari
+  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);
 
-  // 2. Read config
+  // 1. Read config
   plyUrl = config.ply_url;
   glbUrl = config.glb_url;
   minZoom     = parseFloat(config.minZoom  || "1");
@@ -66,13 +55,13 @@ export async function initializeViewer(config, instanceId) {
   chosenCameraY = isMobile ? cameraYPhone : cameraY;
   chosenCameraZ = isMobile ? cameraZPhone : cameraZ;
 
-  // 3. Grab DOM
+  // 2. 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);
 
-  // 4. Create <canvas>
+  // 3. Create <canvas>
   let oldCanvas = document.getElementById(canvasId);
   if (oldCanvas) oldCanvas.remove();
   const canvas = document.createElement('canvas');
@@ -81,13 +70,6 @@ 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) {
@@ -109,20 +91,19 @@ export async function initializeViewer(config, instanceId) {
   if (!pc) {
     pc = await import("https://esm.run/playcanvas");
     window.pc = pc;
-    if (isIOS || isSafari) alert("PlayCanvas module loaded");
   }
 
   try {
     // 6. Setup device & app
-    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",
       twgslUrl:    "https://playcanvas.vercel.app/static/lib/twgsl/twgsl.js",
-      antialias:   false
+      antialias:   false,
+      // ---- CRUCIAL FOR iOS/Safari BLANK SCREEN BUG: ----
+      preserveDrawingBuffer: isIOS || isSafari ? true : false
     });
     device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
-    if (isIOS || isSafari) alert("WebGL2 context acquired");
 
     const opts = new pc.AppOptions();
     opts.graphicsDevice = device;
@@ -148,8 +129,6 @@ export async function initializeViewer(config, instanceId) {
     app.setCanvasFillMode(pc.FILLMODE_NONE);
     app.setCanvasResolution(pc.RESOLUTION_AUTO);
 
-    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) {
@@ -180,12 +159,8 @@ 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("[viewer.js] model asset loaded");
-      progressDialog.style.display = 'none';
-    });
+    assets.model.on('load', () => progressDialog.style.display = 'none');
     assets.model.on('error', 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>`;
     });
@@ -202,170 +177,118 @@ export async function initializeViewer(config, instanceId) {
     }, 100);
 
     loader.load(async () => {
-      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() {};
+      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('orbitCameraInputTouch', {
-          attributes: {
-            orbitSensitivity: 0.6,
-            distanceSensitivity: 0.5
-          }
-        });
-        app.root.addChild(cameraEntity);
-        if (isIOS || isSafari) alert("[viewer.js] Camera entity created, configured and added to scene");
-
-        // Camera reset/scene visible
-        app.once('update', () => {
-          resetViewerCamera();
-          if (isIOS || isSafari) alert("[viewer.js] Camera reset to defaults after first update");
-        });
-
-        // --- 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);
-            }
-          }
-        });
-
-        // --- 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);
+      });
+      cameraEntity.script.create('orbitCameraInputMouse', {
+        attributes: {
+          orbitSensitivity: isMobile ? 0.6 : 0.3,
+          distanceSensitivity: isMobile ? 0.5 : 0.4
         }
-
-        // 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);
+      });
+      if (cameraEntity.script.orbitCameraInputMouse) {
+        cameraEntity.script.orbitCameraInputMouse.onMouseWheel = function() {};
+      }
+      cameraEntity.script.create('orbitCameraInputTouch', {
+        attributes: {
+          orbitSensitivity: 0.6,
+          distanceSensitivity: 0.5
+        }
+      });
+      app.root.addChild(cameraEntity);
+
+      // Reset & constrain updates
+      app.once('update', () => resetViewerCamera());
+      app.on('update', dt => {
+        if (cameraEntity) {
+          const pos = cameraEntity.getPosition();
+          if (pos.y < minY) {
+            cameraEntity.setPosition(pos.x, minY, pos.z);
+          }
         }
+      });
 
-        progressDialog.style.display = 'none';
-        viewerInitialized = true;
-        if (isIOS || isSafari) alert("[viewer.js] Viewer is fully initialized!");
+      // Final resize
+      app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
 
-      } 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;
+      // 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
+        });
+      } catch (e) {
+        console.error("Error loading tooltips.js:", e);
       }
+
+      progressDialog.style.display = 'none';
+      viewerInitialized = true;
     });
 
   } catch (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>`;
   }
@@ -412,9 +335,7 @@ 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);
   }
 }