Update viewer.js

viewer.js

@@ -1,19 +1,19 @@
-// viewer.js
+// viewer.js - iOS/Android/Desktop GSplat+GLB viewer, robust drop-in
 
-let pc; // PlayCanvas
+let pc;
 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;
 
+// Camera/model config
 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 +25,6 @@ function logAndAlert(msg) {
 export async function initializeViewer(config, instanceId) {
   if (viewerInitialized) return;
 
-  // 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 setup
   const canvasId = 'canvas-' + instanceId;
   const progressDialog = document.getElementById('progress-dialog-' + instanceId);
   const progressIndicator = document.getElementById('progress-indicator-' + instanceId);
@@ -69,8 +68,11 @@ export async function initializeViewer(config, instanceId) {
   canvas.id = canvasId;
   canvas.className = 'ply-canvas';
   canvas.style.zIndex = "1";
+  canvas.style.display = "block";
+  canvas.style.background = "#222"; // Ensure not transparent
   viewerContainer.insertBefore(canvas, progressDialog);
 
+  // Scroll/wheel zoom (all platforms)
   canvas.addEventListener('wheel', e => {
     if (cameraEntity && cameraEntity.script && cameraEntity.script.orbitCamera) {
       const orbitCam = cameraEntity.script.orbitCamera;
@@ -87,9 +89,9 @@ export async function initializeViewer(config, instanceId) {
 
   progressDialog.style.display = 'block';
 
-  // PlayCanvas
+  // PlayCanvas import
   if (!pc) {
-    pc = await import("https://esm.run/playcanvas");
+    pc = await import("https://esm.run/playcanvas@1.68.4"); // Stick to a known-good, stable version!
     window.pc = pc;
     logAndAlert('[viewer.js] PlayCanvas module loaded.');
   }
@@ -97,14 +99,11 @@ export async function initializeViewer(config, instanceId) {
   try {
     logAndAlert('[viewer.js] Creating graphics device...');
     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,
-      preserveDrawingBuffer: isIOS() ? true : false,
+      deviceTypes: ["webgl2", "webgl1"],
+      antialias: true,
+      preserveDrawingBuffer: isIOS(), // True on iOS, false elsewhere
       alpha: false
     });
-    logAndAlert('[viewer.js] Graphics device created!');
     device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
 
     const opts = new pc.AppOptions();
@@ -127,18 +126,23 @@ export async function initializeViewer(config, instanceId) {
       pc.GSplatHandler
     ];
 
+    // Use new Application constructor only!
     app = new pc.Application(canvas, opts);
     app.setCanvasFillMode(pc.FILLMODE_NONE);
     app.setCanvasResolution(pc.RESOLUTION_AUTO);
 
+    // iOS: ensure clearColor is NOT transparent, and toneMapping is standard
+    app.scene.exposure = 1.1;
+    app.scene.toneMapping = pc.TONEMAP_ACES;
+    app.scene.gammaCorrection = pc.GAMMA_SRGB;
+
     logAndAlert('[viewer.js] PlayCanvas application created!');
 
+    // Resize support
     resizeObserver = new ResizeObserver(entries => {
       for (const entry of entries) {
         const { width, height } = entry.contentRect;
-        if (app) {
-          app.resizeCanvas(width, height);
-        }
+        if (app) app.resizeCanvas(width, height);
       }
     });
     resizeObserver.observe(viewerContainer);
@@ -150,26 +154,27 @@ export async function initializeViewer(config, instanceId) {
       window.removeEventListener('resize', resizeCanvas);
     });
 
-    // Assets
+    // ASSETS
+    // Use a neutral skybox/texture; iOS has issues with "RGBP" PNG as HDR
     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" }),
       galerie: new pc.Asset('galerie', 'container', { url: glbUrl }),
       hdr: new pc.Asset('hdr', 'texture', {
-        url: `https://huggingface.co/datasets/bilca/ply_files/resolve/main/galeries/blanc.png`
-      }, { type: pc.TEXTURETYPE_RGBP, mipmaps: false })
+        url: `https://cdn.jsdelivr.net/gh/playcanvas/playcanvas.github.io@master/static/assets/textures/skybox/skybox_hdr_03.hdr`
+      }, { type: pc.TEXTURETYPE_RGBM, mipmaps: false })
     };
 
+    // Loader
     const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
     let lastProg = 0;
 
-    // iOS PLY load timeout/fallback
+    // iOS fallback: PLYs can hang
     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>`;
-      }, 20000); // 20 seconds
+      }, 20000);
     }
 
     assets.model.on('load', () => {
@@ -204,9 +209,18 @@ export async function initializeViewer(config, instanceId) {
       if (loadTimeout) { clearTimeout(loadTimeout); loadTimeout = null; }
       logAndAlert('[viewer.js] All assets loaded; starting app.');
       app.start();
-      app.scene.envAtlas = assets.hdr.resource;
 
-      // Model entity
+      // If HDR loads, set as skybox/envAtlas; else fallback to default lighting
+      if (assets.hdr.resource) {
+        try {
+          app.scene.envAtlas = assets.hdr.resource;
+          logAndAlert('[viewer.js] EnvAtlas set.');
+        } catch (e) {
+          logAndAlert('[viewer.js] Failed to set envAtlas: ' + e.message);
+        }
+      }
+
+      // Model
       modelEntity = new pc.Entity('model');
       try {
         modelEntity.addComponent('gsplat', { asset: assets.model });
@@ -214,33 +228,23 @@ export async function initializeViewer(config, instanceId) {
         modelEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
         modelEntity.setLocalScale(modelScale, modelScale, modelScale);
         app.root.addChild(modelEntity);
-        logAndAlert('[viewer.js] Model entity added to scene!');
+        logAndAlert(`[viewer.js] Model entity added at [${modelX}, ${modelY}, ${modelZ}] scale ${modelScale}`);
       } catch (e) {
         logAndAlert('[viewer.js] Error adding model entity: ' + e.message);
       }
 
-      // 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
+      // Add strong ambient light (fixes "black" on iOS if env map fails)
+      const ambient = new pc.Entity("ambient-light");
+      ambient.addComponent("light", {
+        type: "directional",
+        intensity: 1.1,
+        color: new pc.Color(1,1,1),
+        castShadows: false
       });
-      dirLight.setLocalEulerAngles(0, 0, 0);
-      app.root.addChild(dirLight);
+      ambient.setLocalEulerAngles(45, 30, 0);
+      app.root.addChild(ambient);
 
-      // Gallery GLB
+      // Scene GLB container (optional)
       if (assets.galerie && assets.galerie.resource) {
         try {
           const galleryEntity = assets.galerie.resource.instantiateRenderEntity();
@@ -251,12 +255,13 @@ export async function initializeViewer(config, instanceId) {
         }
       }
 
-      // Camera setup
+      // Camera
       cameraEntity = new pc.Entity('camera');
       cameraEntity.addComponent('camera', {
-        clearColor: config.canvas_background
-          ? parseInt(config.canvas_background.substr(1, 2), 16) / 255
-          : 0,
+        clearColor: [0.133,0.133,0.133,1.0], // Never transparent
+        fov: 60,
+        nearClip: 0.1,
+        farClip: 1000
       });
       cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
       cameraEntity.lookAt(modelEntity.getPosition());
@@ -294,24 +299,6 @@ export async function initializeViewer(config, instanceId) {
       app.root.addChild(cameraEntity);
       logAndAlert('[viewer.js] Camera entity added to scene!');
 
-      // Reset & constrain updates
-      app.once('update', () => {
-        logAndAlert('[viewer.js] First app update! Resetting camera.');
-        resetViewerCamera();
-      });
-      app.on('update', dt => {
-        if (cameraEntity) {
-          const pos = cameraEntity.getPosition();
-          if (pos.y < minY) {
-            cameraEntity.setPosition(pos.x, minY, pos.z);
-          }
-        }
-        if (!window._pcFirstUpdate) {
-          window._pcFirstUpdate = true;
-          logAndAlert('[viewer.js] Entered update/render loop!');
-        }
-      });
-
       // Final resize
       app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
 
@@ -403,4 +390,4 @@ export function cleanupViewer() {
     resizeObserver.disconnect();
     resizeObserver = null;
   }
-}
+}