Update viewer.js

viewer.js

@@ -1,19 +1,19 @@
-// viewer.js - iOS/Android/Desktop GSplat+GLB viewer, robust drop-in
+// viewer.js
 
-let pc;
+let pc; // PlayCanvas
 export let app = null;
 let cameraEntity = null;
 let modelEntity = null;
 let viewerInitialized = false;
 let resizeObserver = null;
-let loadTimeout = null;
+let loadTimeout = null; // For iOS load fallback
 
-// 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,6 +25,7 @@ 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");
@@ -56,7 +57,7 @@ export async function initializeViewer(config, instanceId) {
   chosenCameraY = mobile ? cameraYPhone : cameraY;
   chosenCameraZ = mobile ? cameraZPhone : cameraZ;
 
-  // DOM setup
+  // DOM
   const canvasId = 'canvas-' + instanceId;
   const progressDialog = document.getElementById('progress-dialog-' + instanceId);
   const progressIndicator = document.getElementById('progress-indicator-' + instanceId);
@@ -68,11 +69,8 @@ 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;
@@ -89,9 +87,9 @@ export async function initializeViewer(config, instanceId) {
 
   progressDialog.style.display = 'block';
 
-  // PlayCanvas import
+  // PlayCanvas
   if (!pc) {
-    pc = await import("https://esm.run/playcanvas@1.68.4"); // Stick to a known-good, stable version!
+    pc = await import("https://esm.run/playcanvas");
     window.pc = pc;
     logAndAlert('[viewer.js] PlayCanvas module loaded.');
   }
@@ -99,11 +97,14 @@ export async function initializeViewer(config, instanceId) {
   try {
     logAndAlert('[viewer.js] Creating graphics device...');
     const device = await pc.createGraphicsDevice(canvas, {
-      deviceTypes: ["webgl2", "webgl1"],
-      antialias: true,
-      preserveDrawingBuffer: isIOS(), // True on iOS, false elsewhere
+      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,
       alpha: false
     });
+    logAndAlert('[viewer.js] Graphics device created!');
     device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
 
     const opts = new pc.AppOptions();
@@ -126,23 +127,18 @@ 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);
@@ -154,27 +150,26 @@ export async function initializeViewer(config, instanceId) {
       window.removeEventListener('resize', resizeCanvas);
     });
 
-    // ASSETS
-    // Use a neutral skybox/texture; iOS has issues with "RGBP" PNG as HDR
+    // 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" }),
       galerie: new pc.Asset('galerie', 'container', { url: glbUrl }),
       hdr: new pc.Asset('hdr', 'texture', {
-        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 })
+        url: https://huggingface.co/datasets/bilca/ply_files/resolve/main/galeries/blanc.png
+      }, { type: pc.TEXTURETYPE_RGBP, mipmaps: false })
     };
 
-    // Loader
     const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
     let lastProg = 0;
 
-    // iOS fallback: PLYs can hang
+    // iOS PLY load timeout/fallback
     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);
+        progressDialog.innerHTML = <p style="color:red">Loading failed or too slow. Try a smaller model, or use a desktop browser.</p>;
+      }, 20000); // 20 seconds
     }
 
     assets.model.on('load', () => {
@@ -182,16 +177,16 @@ export async function initializeViewer(config, instanceId) {
       progressDialog.style.display = 'none';
       if (assets.model.resource && assets.model.resource._buffer) {
         let buf = assets.model.resource._buffer;
-        logAndAlert(`[viewer.js] PLY/GSplat asset loaded! Buffer byteLength: ${buf.byteLength || buf.length || 'n/a'}`);
+        logAndAlert([viewer.js] PLY/GSplat asset loaded! Buffer byteLength: ${buf.byteLength || buf.length || 'n/a'});
       } else {
-        logAndAlert(`[viewer.js] PLY/GSplat asset loaded! [NO BUFFER?]`);
+        logAndAlert([viewer.js] PLY/GSplat asset loaded! [NO BUFFER?]);
       }
     });
 
     assets.model.on('error', err => {
       if (loadTimeout) { clearTimeout(loadTimeout); loadTimeout = null; }
       logAndAlert('[viewer.js] Error loading model: ' + err);
-      progressDialog.innerHTML = `<p style="color: red">Error loading model: ${err}</p>`;
+      progressDialog.innerHTML = <p style="color: red">Error loading model: ${err}</p>;
     });
 
     const progCheck = setInterval(() => {
@@ -209,18 +204,9 @@ 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;
 
-      // 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
+      // Model entity
       modelEntity = new pc.Entity('model');
       try {
         modelEntity.addComponent('gsplat', { asset: assets.model });
@@ -228,23 +214,33 @@ 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 at [${modelX}, ${modelY}, ${modelZ}] scale ${modelScale}`);
+        logAndAlert('[viewer.js] Model entity added to scene!');
       } catch (e) {
         logAndAlert('[viewer.js] Error adding model entity: ' + e.message);
       }
 
-      // 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
+      // 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
       });
-      ambient.setLocalEulerAngles(45, 30, 0);
-      app.root.addChild(ambient);
+      dirLight.setLocalEulerAngles(0, 0, 0);
+      app.root.addChild(dirLight);
 
-      // Scene GLB container (optional)
+      // Gallery GLB
       if (assets.galerie && assets.galerie.resource) {
         try {
           const galleryEntity = assets.galerie.resource.instantiateRenderEntity();
@@ -255,13 +251,12 @@ export async function initializeViewer(config, instanceId) {
         }
       }
 
-      // Camera
+      // Camera setup
       cameraEntity = new pc.Entity('camera');
       cameraEntity.addComponent('camera', {
-        clearColor: [0.133,0.133,0.133,1.0], // Never transparent
-        fov: 60,
-        nearClip: 0.1,
-        farClip: 1000
+        clearColor: config.canvas_background
+          ? parseInt(config.canvas_background.substr(1, 2), 16) / 255
+          : 0,
       });
       cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
       cameraEntity.lookAt(modelEntity.getPosition());
@@ -299,6 +294,24 @@ 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);
 
@@ -325,7 +338,7 @@ export async function initializeViewer(config, instanceId) {
   } catch (error) {
     if (loadTimeout) { clearTimeout(loadTimeout); loadTimeout = null; }
     logAndAlert("[viewer.js] Error initializing PlayCanvas viewer: " + error.message);
-    progressDialog.innerHTML = `<p style="color: red">Error loading viewer: ${error.message}</p>`;
+    progressDialog.innerHTML = <p style="color: red">Error loading viewer: ${error.message}</p>;
   }
 }
 
@@ -390,4 +403,4 @@ export function cleanupViewer() {
     resizeObserver.disconnect();
     resizeObserver = null;
   }
-}
+}