Update viewer.js

viewer.js

@@ -1,3 +1,4 @@
+// viewer.js
 // ==============================
 // viewer.js
 // ==============================
@@ -20,6 +21,8 @@ let plyUrl, glbUrl;
 export async function initializeViewer(config, instanceId) {
   if (viewerInitialized) return;
 
+  alert("Viewer init starting...");
+
   const isIOS    = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
   const isMobile = isIOS || /Android/i.test(navigator.userAgent);
 
@@ -102,17 +105,17 @@ export async function initializeViewer(config, instanceId) {
         antialias:   false
       };
       try {
-        return await pc.createGraphicsDevice(canvas, {
+        const dev = await pc.createGraphicsDevice(canvas, {
           ...baseOpts,
           deviceTypes: preferWebgl2 ? ["webgl2"] : ["webgl1"]
         });
+        alert(preferWebgl2 ? "WebGL2 context OK" : "WebGL1 context OK");
+        return dev;
       } catch (err) {
         if (preferWebgl2) {
           console.warn("[viewer] WebGL2 unavailable, retrying with WebGL1 …", err);
-          return await pc.createGraphicsDevice(canvas, {
-            ...baseOpts,
-            deviceTypes: ["webgl1"]
-          });
+          alert("WebGL2 unavailable on this device; falling back to WebGL1");
+          return getGraphicsDevice(false);
         }
         throw err;
       }
@@ -121,6 +124,8 @@ export async function initializeViewer(config, instanceId) {
     const device = await getGraphicsDevice(true);  // first try WebGL2
     device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
 
+    alert("Graphics device initialized; creating App…");
+
     const opts = new pc.AppOptions();
     opts.graphicsDevice = device;
     opts.mouse = new pc.Mouse(canvas);
@@ -169,16 +174,21 @@ export async function initializeViewer(config, instanceId) {
       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
+        url: `https://huggingface.co/datasets/bilca/ply_files/resolve/main/galeries/blanc.png`
       }, { type: pc.TEXTURETYPE_RGBP, mipmaps: false })
     };
 
     const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
     let lastProg = 0;
-    assets.model.on('load', () => progressDialog.style.display = 'none');
+
+    assets.model.on('load', () => {
+      alert("PLY model asset loaded successfully");
+      progressDialog.style.display = 'none';
+    });
     assets.model.on('error', err => {
+      alert("Error loading PLY file: " + err);
       console.error("Error loading PLY file:", 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(() => {
@@ -192,7 +202,9 @@ export async function initializeViewer(config, instanceId) {
       }
     }, 100);
 
+    alert("Starting asset loader…");
     loader.load(async () => {
+      alert("All assets loaded; starting app…");
       app.start();
       app.scene.envAtlas = assets.hdr.resource;
 
@@ -269,6 +281,8 @@ export async function initializeViewer(config, instanceId) {
       });
       app.root.addChild(cameraEntity);
 
+      alert("Camera and controls set up; rendering should now appear.");
+
       // 11. Misc per-frame guard & resize --------------------------------------
       app.once('update', () => resetViewerCamera());
       app.on('update', dt => {
@@ -299,11 +313,13 @@ export async function initializeViewer(config, instanceId) {
 
       progressDialog.style.display = 'none';
       viewerInitialized = true;
+      alert("Viewer initialization complete.");
     });
 
   } catch (error) {
+    alert("Error initializing PlayCanvas viewer: " + error);
     console.error("Error initializing PlayCanvas viewer:", error);
-    progressDialog.innerHTML = <p style="color: red">Error loading viewer: ${error.message}</p>;
+    progressDialog.innerHTML = `<p style="color: red">Error loading viewer: ${error.message}</p>`;
   }
 }
 
@@ -371,4 +387,4 @@ export function cleanupViewer() {
     resizeObserver.disconnect();
     resizeObserver = null;
   }
-}
+}