Update viewer_2.js

viewer_2.js

@@ -1,4 +1,4 @@
-/*(function(){
+(function(){
   let logDiv = document.createElement('div');
   logDiv.style.position = 'fixed';
   logDiv.style.bottom = '0';
@@ -35,9 +35,9 @@
   window.onerror = function(msg, src, lineno, colno, error){
     printLog('[ERR] ' + msg + ' at ' + src + ':' + lineno, '#f55');
   };
-})();*/
+})();
 
-// viewer.js
+// viewer_2.js
 // ==============================
 
 let pc;            
@@ -65,6 +65,9 @@ function traverse(entity, callback) {
 export async function initializeViewer(config, instanceId) {
   if (viewerInitialized) return;
 
+  console.log("Initializing viewer for instance:", instanceId);
+  console.log(config);
+
   glbUrl = config.glb_url;
   minZoom = 0.2;
   maxZoom = 2;
@@ -89,7 +92,6 @@ export async function initializeViewer(config, instanceId) {
 
   const canvasId = 'canvas-' + instanceId;
   const progressDialog = document.getElementById('progress-dialog-' + instanceId);
-  const progressIndicator = document.getElementById('progress-indicator-' + instanceId);
   const viewerContainer = document.getElementById('viewer-container-' + instanceId);
 
   let oldCanvas = document.getElementById(canvasId);
@@ -121,20 +123,26 @@ export async function initializeViewer(config, instanceId) {
   if (!pc) {
     pc = await import("https://esm.run/playcanvas");
     window.pc = pc;
+    console.log("PlayCanvas loaded:", pc.version || "(no version field)");
   }
 
-  // Create app first
+  // Device selection for iOS reliability
+  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+  console.log("iOS detected:", isIOS);
+
+  // Create PlayCanvas graphics device (iOS: webgl1 only!)
   const device = await pc.createGraphicsDevice(canvas, {
-    deviceTypes: ["webgl2", "webgl1"],
+    deviceTypes: isIOS ? ["webgl1"] : ["webgl2", "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);
+  console.log("Graphics device created:", device);
 
+  // AppOptions setup
   const opts = new pc.AppOptions();
   opts.graphicsDevice = device;
-  // Attach input only to canvas
   opts.mouse = new pc.Mouse(canvas);
   opts.touch = new pc.TouchDevice(canvas);
   opts.componentSystems = [
@@ -153,12 +161,15 @@ export async function initializeViewer(config, instanceId) {
     pc.GSplatHandler
   ];
 
-
-  ///////// APP comme dans exemple ///////
-  ////////////////////////////////////////
-  app = new pc.Application(canvas, opts);
-  //app = new pc.AppBase(canvas);
-  //app.init(opts);
+  // Use Application (NOT AppBase)
+  try {
+    app = new pc.Application(canvas, opts);
+    console.log("App initialized:", app);
+  } catch (e) {
+    console.error("Failed to initialize pc.Application:", e);
+    progressDialog.style.display = 'none';
+    return;
+  }
 
   app.setCanvasFillMode(pc.FILLMODE_NONE);
   app.setCanvasResolution(pc.RESOLUTION_AUTO);
@@ -178,9 +189,9 @@ export async function initializeViewer(config, instanceId) {
     orbit: new pc.Asset('script', 'script', { url: "https://mikafil-viewer-glb.static.hf.space/orbit-camera.js" }),
     glb: new pc.Asset('glb', 'container', { url: glbUrl }),
     hdr: new pc.Asset(
-        'hdr-env-atlas', 'texture', 
-        {url: 'https://playcanvas.vercel.app/static/assets/cubemaps/helipad-env-atlas.png'},
-        { type: pc.TEXTURETYPE_RGBP, mipmaps: false }
+      'hdr-env-atlas', 'texture', 
+      { url: 'https://playcanvas.vercel.app/static/assets/cubemaps/helipad-env-atlas.png' },
+      { type: pc.TEXTURETYPE_RGBP, mipmaps: false }
     ),
     ao_map: new pc.Asset('color', 'texture', { url: 'https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/retop_2/emit_map_2k.png' }),
     op_map: new pc.Asset('color', 'texture', { url: 'https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/retop_2/op_map_2k.png' }),
@@ -189,12 +200,14 @@ export async function initializeViewer(config, instanceId) {
 
   for (const key in assets) app.assets.add(assets[key]);
 
-
+  // Load assets before starting!
   const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
   loader.load(() => {
     app.start();
     progressDialog.style.display = 'none';
+    console.log("App started, assets loaded.");
 
+    // --- Scene setup ---
     app.scene.envAtlas = assets.hdr.resource;
     app.scene.skyboxRotation = new pc.Quat().setFromEulerAngles(0, -90, 0);
     app.scene.skyboxIntensity = 4;
@@ -205,15 +218,12 @@ export async function initializeViewer(config, instanceId) {
     app.scene.layers.remove(depthLayer);
     app.scene.layers.insertOpaque(depthLayer, 2);
 
-
     // --- Add the GLB entity ---
     glbEntity = assets.glb.resource.instantiateRenderEntity();
     app.root.addChild(glbEntity);
 
     // 2. Materials for main model & tube
     const ao = assets.ao_map.resource;
-    //const op = assets.op_map.resource;
-    //const thickness = assets.thickness_map.resource;
 
     // mat transparent
     matTransparent = new pc.StandardMaterial();
@@ -225,11 +235,11 @@ export async function initializeViewer(config, instanceId) {
     matTransparent.useMetalness = true;
     matTransparent.useDynamicRefraction = true;
     matTransparent.depthWrite = true;
-    matTransparent.refraction= 0.8;
+    matTransparent.refraction = 0.8;
     matTransparent.refractionIndex = 1;
     matTransparent.thickness = 0.02;
-    //matTransparent.thicknessMap = thickness;
-    //matTransparent.opacityMap = op;
+    //matTransparent.thicknessMap = assets.thickness_map.resource;
+    //matTransparent.opacityMap = assets.op_map.resource;
     //matTransparent.opacityMapChannel = "r";
     matTransparent.opacity = 0.97;
     matTransparent.emissive = new pc.Color(1, 1, 1);
@@ -245,21 +255,20 @@ export async function initializeViewer(config, instanceId) {
       }
     });
 
-
     glbEntity.setPosition(modelX, modelY, modelZ);
     glbEntity.setLocalScale(modelScale, modelScale, modelScale);
     glbEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
 
     cameraEntity = new pc.Entity('camera');
     // PURE WHITE BACKGROUND
-    cameraEntity.addComponent('camera'); // White RGBA
+    cameraEntity.addComponent('camera');
     cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
     cameraEntity.lookAt(glbEntity.getPosition());
     cameraEntity.addComponent('script');
 
     cameraEntity.camera.requestSceneColorMap(true);
 
-    // === MAIN FIX: Pass ALL relevant attributes including minY ===
+    // === Pass ALL relevant attributes including minY ===
     cameraEntity.script.create('orbitCamera', {
       attributes: {
         focusEntity: glbEntity,
@@ -303,25 +312,24 @@ export async function initializeViewer(config, instanceId) {
     }
 
     viewerInitialized = true;
+    console.log("Viewer initialized and ready.");
   });
 
 }
 
 export function resetViewerCamera() {
-console.log(glbEntity.getPosition());
   try {
     if (!cameraEntity || !glbEntity || !app) return;
     const orbitCam = cameraEntity.script.orbitCamera;
     if (!orbitCam) return;
 
     const modelPos = glbEntity.getPosition();
-    console.log(modelPos);
     const tempEnt = new pc.Entity();
     tempEnt.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
     tempEnt.lookAt(modelPos);
 
     const dist = new pc.Vec3().sub2(
-      new pc.Vec3(chosenCamearaX, chosenCameraY, chosenCameraZ),
+      new pc.Vec3(chosenCameraX, chosenCameraY, chosenCameraZ),
       modelPos
     ).length();
 
@@ -330,7 +338,7 @@ console.log(glbEntity.getPosition());
 
     orbitCam.pivotPoint = modelPos.clone();
     orbitCam._targetDistance = dist;
-    orbitCam._distance       = dist;
+    orbitCam._distance = dist;
 
     const rot = tempEnt.getRotation();
     const fwd = new pc.Vec3();
@@ -343,15 +351,15 @@ console.log(glbEntity.getPosition());
     rotNoYaw.transformVector(pc.Vec3.FORWARD, fNoYaw);
     const pitch = Math.atan2(fNoYaw.y, -fNoYaw.z) * pc.math.RAD_TO_DEG;
 
-    orbitCam._targetYaw   = yaw;
-    orbitCam._yaw         = yaw;
+    orbitCam._targetYaw = yaw;
+    orbitCam._yaw = yaw;
     orbitCam._targetPitch = pitch;
-    orbitCam._pitch       = pitch;
+    orbitCam._pitch = pitch;
     if (orbitCam._updatePosition) orbitCam._updatePosition();
 
     tempEnt.destroy();
+    console.log("Camera reset");
   } catch (e) {
-    // Silent fail
+    console.error("Error in resetViewerCamera:", e);
   }
 }
-