Update viewer.js

viewer.js

@@ -24,7 +24,7 @@ export async function initializeViewer(config, instanceId) {
   const isIOS    = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
   const isMobile = isIOS || /Android/i.test(navigator.userAgent);
 
-  // 1. Read config
+  // 1. Read config -------------------------------------------------------------
   plyUrl = config.ply_url;
   glbUrl = config.glb_url;
   minZoom     = parseFloat(config.minZoom  || "1");
@@ -55,13 +55,13 @@ export async function initializeViewer(config, instanceId) {
   chosenCameraY = isMobile ? cameraYPhone : cameraY;
   chosenCameraZ = isMobile ? cameraZPhone : cameraZ;
 
-  // 2. 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);
 
-  // 3. Create <canvas>
+  // 3. Create <canvas> --------------------------------------------------------
   let oldCanvas = document.getElementById(canvasId);
   if (oldCanvas) oldCanvas.remove();
   const canvas = document.createElement('canvas');
@@ -70,7 +70,7 @@ export async function initializeViewer(config, instanceId) {
   canvas.style.zIndex = "1";
   viewerContainer.insertBefore(canvas, progressDialog);
 
-  // 4. Wheel listener
+  // 4. Wheel listener ---------------------------------------------------------
   canvas.addEventListener('wheel', e => {
     if (cameraEntity && cameraEntity.script && cameraEntity.script.orbitCamera) {
       const orbitCam = cameraEntity.script.orbitCamera;
@@ -87,20 +87,39 @@ export async function initializeViewer(config, instanceId) {
 
   progressDialog.style.display = 'block';
 
-  // 5. Import PlayCanvas
+  // 5. Import PlayCanvas -------------------------------------------------------
   if (!pc) {
     pc = await import("https://esm.run/playcanvas");
     window.pc = pc;
   }
 
   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
-    });
+    // 6. Setup device & app ----------------------------------------------------
+    // --- NEW: robust WebGL-2 → WebGL-1 fallback (fixes iPhone blank screen) ---
+    async function getGraphicsDevice(preferWebgl2 = true) {
+      const baseOpts = {
+        glslangUrl:  "https://playcanvas.vercel.app/static/lib/glslang/glslang.js",
+        twgslUrl:    "https://playcanvas.vercel.app/static/lib/twgsl/twgsl.js",
+        antialias:   false
+      };
+      try {
+        return await pc.createGraphicsDevice(canvas, {
+          ...baseOpts,
+          deviceTypes: preferWebgl2 ? ["webgl2"] : ["webgl1"]
+        });
+      } catch (err) {
+        if (preferWebgl2) {
+          console.warn("[viewer] WebGL2 unavailable, retrying with WebGL1 …", err);
+          return await pc.createGraphicsDevice(canvas, {
+            ...baseOpts,
+            deviceTypes: ["webgl1"]
+          });
+        }
+        throw err;
+      }
+    }
+
+    const device = await getGraphicsDevice(true);  // first try WebGL2
     device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
 
     const opts = new pc.AppOptions();
@@ -126,10 +145,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;
 
-    // Attach ResizeObserver to keep canvas in sync with container size
+    // 7. Resize observer -------------------------------------------------------
     resizeObserver = new ResizeObserver(entries => {
       for (const entry of entries) {
         const { width, height } = entry.contentRect;
@@ -147,7 +164,7 @@ export async function initializeViewer(config, instanceId) {
       window.removeEventListener('resize', resizeCanvas);
     });
 
-    // 7. Assets
+    // 8. 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" }),
@@ -180,7 +197,7 @@ export async function initializeViewer(config, instanceId) {
       app.start();
       app.scene.envAtlas = assets.hdr.resource;
 
-      // Model entity
+      // 9. Scene ----------------------------------------------------------------
       modelEntity = new pc.Entity('model');
       modelEntity.addComponent('gsplat', { asset: assets.model });
       modelEntity.setLocalPosition(modelX, modelY, modelZ);
@@ -188,7 +205,6 @@ export async function initializeViewer(config, instanceId) {
       modelEntity.setLocalScale(modelScale, modelScale, modelScale);
       app.root.addChild(modelEntity);
 
-      // Light
       const dirLight = new pc.Entity('Cascaded Light');
       dirLight.addComponent('light', {
         type: 'directional',
@@ -209,17 +225,15 @@ export async function initializeViewer(config, instanceId) {
       dirLight.setLocalEulerAngles(0, 0, 0);
       app.root.addChild(dirLight);
 
-      // Gallery GLB
       const galleryEntity = assets.galerie.resource.instantiateRenderEntity();
       app.root.addChild(galleryEntity);
 
-      // Camera setup
+      // 10. Camera --------------------------------------------------------------
       cameraEntity = new pc.Entity('camera');
       cameraEntity.addComponent('camera', {
         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,7 +270,7 @@ export async function initializeViewer(config, instanceId) {
       });
       app.root.addChild(cameraEntity);
 
-      // Reset & constrain updates
+      // 11. Misc per-frame guard & resize --------------------------------------
       app.once('update', () => resetViewerCamera());
       app.on('update', dt => {
         if (cameraEntity) {
@@ -267,10 +281,9 @@ export async function initializeViewer(config, instanceId) {
         }
       });
 
-      // Final resize
       app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
 
-      // Tooltips
+      // 12. Tooltips ------------------------------------------------------------
       try {
         const tooltipsModule = await import('./tooltips.js');
         tooltipsModule.initializeTooltips({
@@ -295,6 +308,9 @@ export async function initializeViewer(config, instanceId) {
   }
 }
 
+// -----------------------------------------------------------------------------
+// resetViewerCamera / cleanupViewer remain UNCHANGED
+// -----------------------------------------------------------------------------
 export function resetViewerCamera() {
   try {
     if (!cameraEntity || !modelEntity || !app) return;
@@ -352,7 +368,6 @@ export function cleanupViewer() {
   modelEntity  = null;
   viewerInitialized = false;
 
-  // Disconnect the ResizeObserver to avoid leaks
   if (resizeObserver) {
     resizeObserver.disconnect();
     resizeObserver = null;