Update viewer.js

viewer.js

@@ -1,19 +1,18 @@
-// viewer.js
+// viewer.js -- Drop-in for mikafil-viewer-gs with robust iOS/GLB/PLY support
 
-let pc; // PlayCanvas
+let pc; // PlayCanvas global ref
 export let app = null;
 let cameraEntity = null;
 let modelEntity = null;
 let viewerInitialized = false;
 let resizeObserver = null;
-let loadTimeout = null; // For iOS load fallback
+let loadTimeout = null; // iOS load fallback
 
 let chosenCameraX, chosenCameraY, chosenCameraZ;
 let minZoom, maxZoom, minAngle, maxAngle, minAzimuth, maxAzimuth, minPivotY, minY;
 let modelX, modelY, modelZ, modelScale, modelRotationX, modelRotationY, modelRotationZ;
 let plyUrl, glbUrl;
 
-// iOS detection
 function isIOS() {
   return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
 }
@@ -25,7 +24,7 @@ function logAndAlert(msg) {
 export async function initializeViewer(config, instanceId) {
   if (viewerInitialized) return;
 
-  // Config
+  // Parse config
   plyUrl = config.ply_url;
   glbUrl = config.glb_url;
   minZoom = parseFloat(config.minZoom || "1");
@@ -57,7 +56,7 @@ export async function initializeViewer(config, instanceId) {
   chosenCameraY = mobile ? cameraYPhone : cameraY;
   chosenCameraZ = mobile ? cameraZPhone : cameraZ;
 
-  // DOM
+  // DOM references
   const canvasId = 'canvas-' + instanceId;
   const progressDialog = document.getElementById('progress-dialog-' + instanceId);
   const progressIndicator = document.getElementById('progress-indicator-' + instanceId);
@@ -87,7 +86,6 @@ export async function initializeViewer(config, instanceId) {
 
   progressDialog.style.display = 'block';
 
-  // PlayCanvas
   if (!pc) {
     pc = await import("https://esm.run/playcanvas");
     window.pc = pc;
@@ -96,6 +94,7 @@ export async function initializeViewer(config, instanceId) {
 
   try {
     logAndAlert('[viewer.js] Creating graphics device...');
+    // Use the old-school AppBase+init pattern for max compatibility
     const device = await pc.createGraphicsDevice(canvas, {
       deviceTypes: ["webgl2"],
       glslangUrl: "https://playcanvas.vercel.app/static/lib/glslang/glslang.js",
@@ -104,7 +103,6 @@ export async function initializeViewer(config, instanceId) {
       preserveDrawingBuffer: isIOS() ? true : false,
       alpha: false
     });
-    logAndAlert('[viewer.js] Graphics device created!');
     device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
 
     const opts = new pc.AppOptions();
@@ -127,12 +125,17 @@ export async function initializeViewer(config, instanceId) {
       pc.GSplatHandler
     ];
 
-    app = new pc.Application(canvas, opts);
+    // THIS is the robust way: AppBase + .init()
+    app = new pc.AppBase(canvas);
+    app.init(opts);
     app.setCanvasFillMode(pc.FILLMODE_NONE);
     app.setCanvasResolution(pc.RESOLUTION_AUTO);
+    app.scene.exposure = 0.5;
+    app.scene.toneMapping = pc.TONEMAP_ACES;
 
     logAndAlert('[viewer.js] PlayCanvas application created!');
 
+    // Resize
     resizeObserver = new ResizeObserver(entries => {
       for (const entry of entries) {
         const { width, height } = entry.contentRect;
@@ -142,7 +145,6 @@ export async function initializeViewer(config, instanceId) {
       }
     });
     resizeObserver.observe(viewerContainer);
-
     window.addEventListener('resize', () => {
       if (app) app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
     });
@@ -163,9 +165,8 @@ export async function initializeViewer(config, instanceId) {
     const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
     let lastProg = 0;
 
-    // iOS PLY load timeout/fallback
+    // iOS: fallback timeout
     if (isIOS()) {
-      // 90MB is a big PLY!
       loadTimeout = setTimeout(() => {
         alert("⚠️ 3D model loading is taking unusually long on your device. Large PLY files (>40MB) may exceed memory limits on iOS Safari and cannot be shown. Try a smaller model, or use a desktop browser for best results.");
         progressDialog.innerHTML = `<p style="color:red">Loading failed or too slow. Try a smaller model, or use a desktop browser.</p>`;