Update viewer.js

viewer.js

@@ -1,7 +1,6 @@
 // viewer.js
 // ==============================
-// viewer.js
-// ==============================
+// WhatsApp iOS: Fallback to webgl1 if webgl2 fails
 
 let pc;            // will hold the PlayCanvas module once imported
 export let app = null;
@@ -15,6 +14,15 @@ let minZoom, maxZoom, minAngle, maxAngle, minAzimuth, maxAzimuth, minPivotY, min
 let modelX, modelY, modelZ, modelScale, modelRotationX, modelRotationY, modelRotationZ;
 let plyUrl, glbUrl;
 
+function isWhatsappIOS() {
+  return /iphone|ipod|ipad/i.test(navigator.userAgent) &&
+         /WhatsApp/i.test(navigator.userAgent);
+}
+function isInstagramIOS() {
+  return /iphone|ipod|ipad/i.test(navigator.userAgent) &&
+         /Instagram/i.test(navigator.userAgent);
+}
+
 /**
  * initializeViewer(config, instanceId)
  */
@@ -23,6 +31,15 @@ export async function initializeViewer(config, instanceId) {
 
   const isIOS    = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
   const isMobile = isIOS || /Android/i.test(navigator.userAgent);
+  const isWA = isWhatsappIOS();
+  const isIG = isInstagramIOS();
+
+  if (isWA) {
+    alert("WhatsApp iOS detected: trying WebGL fallback.");
+  }
+  if (isIG) {
+    // Optional: alert("Instagram iOS detected.");
+  }
 
   // 1. Read config
   plyUrl = config.ply_url;
@@ -95,14 +112,43 @@ export async function initializeViewer(config, instanceId) {
 
   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
-    });
-    device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+    let device = null;
+    let contextSuccess = false;
+    let contextType = null;
 
+    // Try webgl2, then webgl1
+    try {
+      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);
+      contextType = "webgl2";
+      contextSuccess = true;
+      alert("WebGL2 context creation successful.");
+    } catch (err) {
+      // Try webgl1 if webgl2 fails
+      try {
+        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
+        });
+        device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+        contextType = "webgl1";
+        contextSuccess = true;
+        alert("WebGL1 context creation successful (WebGL2 failed).");
+      } catch (err2) {
+        alert("WebGL context creation FAILED.\nWhatsApp iOS browser does not support WebGL. Try opening this link in Safari or another browser.");
+        progressDialog.innerHTML = `<p style="color: red">WebGL is not supported in this browser. Please try opening in Safari or Chrome.</p>`;
+        throw err2;
+      }
+    }
+
+    // ... continue as before ...
     const opts = new pc.AppOptions();
     opts.graphicsDevice = device;
     opts.mouse = new pc.Mouse(canvas);
@@ -126,8 +172,6 @@ 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
     resizeObserver = new ResizeObserver(entries => {
@@ -219,7 +263,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());
@@ -295,6 +338,7 @@ export async function initializeViewer(config, instanceId) {
   }
 }
 
+// (resetViewerCamera and cleanupViewer unchanged)
 export function resetViewerCamera() {
   try {
     if (!cameraEntity || !modelEntity || !app) return;
@@ -357,4 +401,4 @@ export function cleanupViewer() {
     resizeObserver.disconnect();
     resizeObserver = null;
   }
-}
+}