Update viewer.js

viewer.js

@@ -1,22 +1,26 @@
 // viewer.js
 // ==============================
-// (Space B: iPhone/desktop/Android compatible, matches Space A + minimal iOS fix)
+// viewer.js
+// ==============================
 
-let pc;            // PlayCanvas module
+let pc;            // will hold the PlayCanvas module once imported
 export let app = null;
 let cameraEntity   = null;
 let modelEntity    = null;
 let viewerInitialized = false;
+let resizeObserver = null;
 
 let chosenCameraX, chosenCameraY, chosenCameraZ;
 let minZoom, maxZoom, minAngle, maxAngle, minAzimuth, maxAzimuth, minPivotY, minY;
 let modelX, modelY, modelZ, modelScale, modelRotationX, modelRotationY, modelRotationZ;
 let plyUrl, glbUrl;
 
+/**
+ * initializeViewer(config, instanceId)
+ */
 export async function initializeViewer(config, instanceId) {
   if (viewerInitialized) return;
 
-  // Detect iOS/mobile for camera parameters and debug alert
   const isIOS    = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
   const isMobile = isIOS || /Android/i.test(navigator.userAgent);
 
@@ -51,13 +55,13 @@ export async function initializeViewer(config, instanceId) {
   chosenCameraY = isMobile ? cameraYPhone : cameraY;
   chosenCameraZ = isMobile ? cameraZPhone : cameraZ;
 
-  // 2. DOM references
+  // 2. Grab DOM
   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);
 
-  // 3. Canvas creation (replace old if present)
+  // 3. Create <canvas>
   let oldCanvas = document.getElementById(canvasId);
   if (oldCanvas) oldCanvas.remove();
   const canvas = document.createElement('canvas');
@@ -66,8 +70,8 @@ export async function initializeViewer(config, instanceId) {
   canvas.style.zIndex = "1";
   viewerContainer.insertBefore(canvas, progressDialog);
 
-  // 4. Mouse wheel (zoom) handler
-  canvas.addEventListener('wheel', function(e) {
+  // 4. Wheel listener
+  canvas.addEventListener('wheel', e => {
     if (cameraEntity && cameraEntity.script && cameraEntity.script.orbitCamera) {
       const orbitCam = cameraEntity.script.orbitCamera;
       const sens = (cameraEntity.script.orbitCameraInputMouse?.distanceSensitivity) || 0.4;
@@ -83,41 +87,22 @@ export async function initializeViewer(config, instanceId) {
 
   progressDialog.style.display = 'block';
 
-  // 5. Load PlayCanvas module if needed
+  // 5. Import PlayCanvas
   if (!pc) {
     pc = await import("https://esm.run/playcanvas");
     window.pc = pc;
   }
 
   try {
-    // 6. Setup graphics device (WebGL2 → WebGL1 fallback for iPhone)
-    async function getGraphicsDevice(preferWebgl2 = true) {
-      const baseOpts = {
-        glslangUrl:  "https://playcanvas.vercel.app/static/lib/glslang/glslang.js",
-        twgslUrl:    "https://playcanvas.vercel.app/static/lib/twgsl/twgsl.js",
-        antialias:   false
-      };
-      try {
-        const dev = await pc.createGraphicsDevice(canvas, {
-          ...baseOpts,
-          deviceTypes: preferWebgl2 ? ["webgl2"] : ["webgl1"]
-        });
-        // Optionally alert for iPhone debug
-        // if (isIOS) alert(preferWebgl2 ? "WebGL2 context OK" : "WebGL1 context OK");
-        return dev;
-      } catch (err) {
-        if (preferWebgl2) {
-          // if (isIOS) alert("WebGL2 unavailable; falling back to WebGL1");
-          return getGraphicsDevice(false);
-        }
-        throw err;
-      }
-    }
-
-    const device = await getGraphicsDevice(true);
+    // 6. Setup device & app
+    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
+    });
     device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
 
-    // Use the *Space A* method: AppBase + .init(options)
     const opts = new pc.AppOptions();
     opts.graphicsDevice = device;
     opts.mouse = new pc.Mouse(canvas);
@@ -127,7 +112,9 @@ export async function initializeViewer(config, instanceId) {
       pc.CameraComponentSystem,
       pc.LightComponentSystem,
       pc.ScriptComponentSystem,
-      pc.GSplatComponentSystem
+      pc.GSplatComponentSystem,
+      pc.CollisionComponentSystem,
+      pc.RigidbodyComponentSystem
     ];
     opts.resourceHandlers = [
       pc.TextureHandler,
@@ -136,23 +123,31 @@ export async function initializeViewer(config, instanceId) {
       pc.GSplatHandler
     ];
 
-    app = new pc.AppBase(canvas);
-    app.init(opts);
+    app = new pc.Application(canvas, opts);
     app.setCanvasFillMode(pc.FILLMODE_NONE);
     app.setCanvasResolution(pc.RESOLUTION_AUTO);
-    app.scene.exposure = 0.5;
-    app.scene.toneMapping = pc.TONEMAP_ACES;
-
-    // 7. Resize logic (like Space A)
-    function resize() {
-      if (app) {
-        app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
+    //app.scene.exposure    = 0.5;
+    //app.scene.toneMapping = pc.TONEMAP_ACES;
+
+    // Attach ResizeObserver to keep canvas in sync with container size
+    resizeObserver = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        if (app) {
+          app.resizeCanvas(width, height);
+        }
       }
-    }
-    window.addEventListener('resize', resize);
-    app.on('destroy', () => window.removeEventListener('resize', resize));
+    });
+    resizeObserver.observe(viewerContainer);
+
+    window.addEventListener('resize', () => {
+      if (app) app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
+    });
+    app.on('destroy', () => {
+      window.removeEventListener('resize', resizeCanvas);
+    });
 
-    // 8. Assets
+    // 7. 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" }),
@@ -164,16 +159,13 @@ export async function initializeViewer(config, instanceId) {
 
     const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
     let lastProg = 0;
-
-    assets.model.on('load', function() {
-      progressDialog.style.display = 'none';
-    });
-    assets.model.on('error', function(err) {
-      progressDialog.innerHTML = `<p style="color: red">Error loading model: ${err}</p>`;
+    assets.model.on('load', () => progressDialog.style.display = 'none');
+    assets.model.on('error', err => {
       console.error("Error loading PLY file:", err);
+      progressDialog.innerHTML = `<p style="color: red">Error loading model: ${err}</p>`;
     });
 
-    const progCheck = setInterval(function() {
+    const progCheck = setInterval(() => {
       if (assets.model.resource) {
         progressIndicator.value = 100;
         clearInterval(progCheck);
@@ -184,12 +176,11 @@ export async function initializeViewer(config, instanceId) {
       }
     }, 100);
 
-    loader.load(function() {
+    loader.load(async () => {
       app.start();
-
       app.scene.envAtlas = assets.hdr.resource;
 
-      // Model
+      // Model entity
       modelEntity = new pc.Entity('model');
       modelEntity.addComponent('gsplat', { asset: assets.model });
       modelEntity.setLocalPosition(modelX, modelY, modelZ);
@@ -215,24 +206,20 @@ export async function initializeViewer(config, instanceId) {
         shadowType: pc.SHADOW_PCSS_32F,
         shadowDistance: 1000
       });
-      app.root.addChild(dirLight);
       dirLight.setLocalEulerAngles(0, 0, 0);
+      app.root.addChild(dirLight);
 
-      // Gallery (GLB)
+      // Gallery GLB
       const galleryEntity = assets.galerie.resource.instantiateRenderEntity();
       app.root.addChild(galleryEntity);
 
-      // Camera
+      // Camera setup
       cameraEntity = new pc.Entity('camera');
       cameraEntity.addComponent('camera', {
         clearColor: config.canvas_background
-          ? new pc.Color(
-              parseInt(config.canvas_background.substr(1, 2), 16) / 255,
-              parseInt(config.canvas_background.substr(3, 2), 16) / 255,
-              parseInt(config.canvas_background.substr(5, 2), 16) / 255
-            )
-          : new pc.Color(0, 0, 0),
-        toneMapping: pc.TONEMAP_ACES
+          ? parseInt(config.canvas_background.substr(1, 2), 16) / 255
+          : 0,
+        //toneMapping: pc.TONEMAP_ACES
       });
       cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
       cameraEntity.lookAt(modelEntity.getPosition());
@@ -269,24 +256,9 @@ export async function initializeViewer(config, instanceId) {
       });
       app.root.addChild(cameraEntity);
 
-      // Initial camera reset
-      setTimeout(function() {
-        if (cameraEntity && cameraEntity.script && cameraEntity.script.orbitCamera) {
-          const modelPos = modelEntity.getPosition();
-          const camPos = cameraEntity.getPosition();
-          const distanceVec = new pc.Vec3();
-          distanceVec.sub2(camPos, modelPos);
-          const distance = distanceVec.length();
-          cameraEntity.script.orbitCamera.pivotPoint.copy(modelPos);
-          cameraEntity.script.orbitCamera.distance = distance;
-          if (typeof cameraEntity.script.orbitCamera._removeInertia === 'function') {
-            cameraEntity.script.orbitCamera._removeInertia();
-          }
-        }
-      }, 100);
-
-      // Per-frame Y guard (for camera)
-      app.on('update', function(dt) {
+      // Reset & constrain updates
+      app.once('update', () => resetViewerCamera());
+      app.on('update', dt => {
         if (cameraEntity) {
           const pos = cameraEntity.getPosition();
           if (pos.y < minY) {
@@ -295,79 +267,75 @@ export async function initializeViewer(config, instanceId) {
         }
       });
 
-      // Initial resize
-      resize();
-
-      // Tooltips support (optional)
-      if (config.tooltips_url) {
-        import('./tooltips.js').then(tooltipsModule => {
-          tooltipsModule.initializeTooltips({
-            app,
-            cameraEntity,
-            modelEntity,
-            tooltipsUrl: config.tooltips_url,
-            defaultVisible: !!config.showTooltipsDefault,
-            moveDuration: config.tooltipMoveDuration || 0.6
-          });
-        }).catch(e => {
-          console.error("Error loading tooltips.js:", e);
+      // Final resize
+      app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
+
+      // Tooltips
+      try {
+        const tooltipsModule = await import('./tooltips.js');
+        tooltipsModule.initializeTooltips({
+          app,
+          cameraEntity,
+          modelEntity,
+          tooltipsUrl: config.tooltips_url,
+          defaultVisible: !!config.showTooltipsDefault,
+          moveDuration: config.tooltipMoveDuration || 0.6
         });
+      } catch (e) {
+        console.error("Error loading tooltips.js:", e);
       }
 
+      progressDialog.style.display = 'none';
       viewerInitialized = true;
-
-      // Debug: show an alert on iPhone only on first frame rendered
-      if (isIOS) {
-        let firstDraw = true;
-        app.on('frameend', function() {
-          if (firstDraw) {
-            alert("First draw call reached (iOS)");
-            firstDraw = false;
-          }
-        });
-      }
     });
 
   } catch (error) {
-    progressDialog.innerHTML = `<p style="color: red">Error loading viewer: ${error.message}</p>`;
     console.error("Error initializing PlayCanvas viewer:", error);
+    progressDialog.innerHTML = `<p style="color: red">Error loading viewer: ${error.message}</p>`;
   }
 }
 
-// -----------------------------------------------------------------------------
-// resetViewerCamera: (unchanged; matches Space A)
 export function resetViewerCamera() {
   try {
     if (!cameraEntity || !modelEntity || !app) return;
     const orbitCam = cameraEntity.script.orbitCamera;
     if (!orbitCam) return;
+
     const modelPos = modelEntity.getPosition();
-    const tempEntity = new pc.Entity();
-    tempEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
-    tempEntity.lookAt(modelPos);
-    const distance = new pc.Vec3().sub2(new pc.Vec3(chosenCameraX, chosenCameraY, chosenCameraZ), modelPos).length();
+    const tempEnt = new pc.Entity();
+    tempEnt.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
+    tempEnt.lookAt(modelPos);
+
+    const dist = new pc.Vec3().sub2(
+      new pc.Vec3(chosenCameraX, chosenCameraY, chosenCameraZ),
+      modelPos
+    ).length();
+
     cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
     cameraEntity.lookAt(modelPos);
+
     orbitCam.pivotPoint = modelPos.clone();
-    orbitCam._targetDistance = distance;
-    orbitCam._distance = distance;
-    const rotation = tempEntity.getRotation();
-    const tempForward = new pc.Vec3();
-    rotation.transformVector(pc.Vec3.FORWARD, tempForward);
-    const yaw = Math.atan2(-tempForward.x, -tempForward.z) * pc.math.RAD_TO_DEG;
+    orbitCam._targetDistance = dist;
+    orbitCam._distance       = dist;
+
+    const rot = tempEnt.getRotation();
+    const fwd = new pc.Vec3();
+    rot.transformVector(pc.Vec3.FORWARD, fwd);
+
+    const yaw = Math.atan2(-fwd.x, -fwd.z) * pc.math.RAD_TO_DEG;
     const yawQuat = new pc.Quat().setFromEulerAngles(0, -yaw, 0);
-    const rotWithoutYaw = new pc.Quat().mul2(yawQuat, rotation);
-    const forwardWithoutYaw = new pc.Vec3();
-    rotWithoutYaw.transformVector(pc.Vec3.FORWARD, forwardWithoutYaw);
-    const pitch = Math.atan2(forwardWithoutYaw.y, -forwardWithoutYaw.z) * pc.math.RAD_TO_DEG;
-    orbitCam._targetYaw = yaw;
-    orbitCam._yaw = yaw;
+    const rotNoYaw = new pc.Quat().mul2(yawQuat, rot);
+    const fNoYaw = new pc.Vec3();
+    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._targetPitch = pitch;
-    orbitCam._pitch = pitch;
-    if (typeof orbitCam._updatePosition === 'function') {
-      orbitCam._updatePosition();
-    }
-    tempEntity.destroy();
+    orbitCam._pitch       = pitch;
+    orbitCam._updatePosition && orbitCam._updatePosition();
+
+    tempEnt.destroy();
   } catch (e) {
     console.error("Error resetting camera:", e);
   }
@@ -383,4 +351,10 @@ export function cleanupViewer() {
   cameraEntity = null;
   modelEntity  = null;
   viewerInitialized = false;
-}
+
+  // Disconnect the ResizeObserver to avoid leaks
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
+}