Update viewer.js

viewer.js

@@ -3,10 +3,9 @@
 
 /* -------------------------------------------
    Utils
-   (les helpers image ne sont plus nécessaires pour .sog,
-   mais on les garde sans effet de bord pour compat ascendante)
 -------------------------------------------- */
 
+// (Conservé pour compat, même si .sog n'en a pas besoin)
 async function loadImageAsTexture(url, app) {
   return new Promise((resolve, reject) => {
     const img = new window.Image();
@@ -25,7 +24,7 @@ async function loadImageAsTexture(url, app) {
   });
 }
 
-// Patch global Image -> force CORS (sans incidence pour .sog)
+// Patch global Image -> force CORS
 (function () {
   const OriginalImage = window.Image;
   window.Image = function (...args) {
@@ -100,6 +99,7 @@ let cameraEntity = null;
 let modelEntity = null;
 let viewerInitialized = false;
 let resizeObserver = null;
+let resizeTimeout = null;
 
 // paramètres courants de l'instance
 let chosenCameraX, chosenCameraY, chosenCameraZ;
@@ -109,20 +109,24 @@ let presentoirScaleX, presentoirScaleY, presentoirScaleZ;
 let sogUrl, glbUrl, presentoirUrl;
 let color_bg_hex, color_bg, espace_expo_bool;
 
+// perf dynamique
+let maxDevicePixelRatio = 1.75;   // plafond par défaut (configurable)
+let interactDpr = 1.0;            // DPR pendant interaction
+let idleRestoreDelay = 350;       // ms avant de restaurer le DPR
+let idleTimer = null;
+
 /* -------------------------------------------
    Initialisation
 -------------------------------------------- */
 
 export async function initializeViewer(config, instanceId) {
-  // ce module ES est importé avec un param unique ?inst=..., donc 1 instance par import
   if (viewerInitialized) return;
 
   const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
   const isMobile = isIOS || /Android/i.test(navigator.userAgent);
 
   // --- Configuration ---
-  // Nouveau : utiliser un .sog "bundled" (format SOG PlayCanvas)
-  // Compat ascendante : on accepte encore sogs_json_url si sog_url absent
+  // Nouveau format .sog (et compat si seul sogs_json_url est présent)
   sogUrl = config.sog_url || config.sogs_json_url;
 
   glbUrl =
@@ -171,6 +175,17 @@ export async function initializeViewer(config, instanceId) {
   chosenCameraY = isMobile ? cameraYPhone : cameraY;
   chosenCameraZ = isMobile ? cameraZPhone : cameraZ;
 
+  // Options perf configurables
+  if (config.maxDevicePixelRatio !== undefined) {
+    maxDevicePixelRatio = Math.max(0.75, parseFloat(config.maxDevicePixelRatio) || maxDevicePixelRatio);
+  }
+  if (config.interactionPixelRatio !== undefined) {
+    interactDpr = Math.max(0.75, parseFloat(config.interactionPixelRatio) || interactDpr);
+  }
+  if (config.idleRestoreDelayMs !== undefined) {
+    idleRestoreDelay = Math.max(120, parseInt(config.idleRestoreDelayMs, 10) || idleRestoreDelay);
+  }
+
   // --- Prépare le canvas unique à cette instance ---
   const canvasId = "canvas-" + instanceId;
   const progressDialog = document.getElementById("progress-dialog-" + instanceId);
@@ -275,13 +290,15 @@ export async function initializeViewer(config, instanceId) {
     twgslUrl: "https://playcanvas.vercel.app/static/lib/twgsl/twgsl.js",
     antialias: false
   });
-  device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+
+  // Cap DPR pour limiter le coût CPU/GPU
+  device.maxPixelRatio = Math.min(window.devicePixelRatio || 1, maxDevicePixelRatio);
 
   const opts = new pc.AppOptions();
   opts.graphicsDevice = device;
   opts.mouse = new pc.Mouse(canvas);
   opts.touch = new pc.TouchDevice(canvas);
-  opts.keyboard = new pc.Keyboard(canvas); // clavier scoping canvas
+  opts.keyboard = new pc.Keyboard(canvas);
   opts.componentSystems = [
     pc.RenderComponentSystem,
     pc.CameraComponentSystem,
@@ -291,23 +308,29 @@ export async function initializeViewer(config, instanceId) {
     pc.CollisionComponentSystem,
     pc.RigidbodyComponentSystem
   ];
-  // GSplatHandler gère nativement les .sog (bundled SOG)
+  // GSplatHandler gère nativement les .sog
   opts.resourceHandlers = [pc.TextureHandler, pc.ContainerHandler, pc.ScriptHandler, pc.GSplatHandler];
 
   app = new pc.Application(canvas, opts);
   app.setCanvasFillMode(pc.FILLMODE_NONE);
   app.setCanvasResolution(pc.RESOLUTION_AUTO);
 
+  // --- Debounce resize (moins de rafales) ---
   resizeObserver = new ResizeObserver((entries) => {
-    entries.forEach((entry) => {
-      app.resizeCanvas(entry.contentRect.width, entry.contentRect.height);
-    });
+    if (!entries || !entries.length) return;
+    if (resizeTimeout) clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(() => {
+      app.resizeCanvas(entries[0].contentRect.width, entries[0].contentRect.height);
+    }, 60);
   });
   resizeObserver.observe(viewerContainer);
 
-  window.addEventListener("resize", () =>
-    app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight)
-  );
+  window.addEventListener("resize", () => {
+    if (resizeTimeout) clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(() => {
+      app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
+    }, 60);
+  });
 
   // Nettoyage complet
   app.on("destroy", () => {
@@ -315,7 +338,6 @@ export async function initializeViewer(config, instanceId) {
       resizeObserver.disconnect();
     } catch {}
     if (opts.keyboard && opts.keyboard.detach) opts.keyboard.detach();
-
     window.removeEventListener("keydown", onKeyDownCapture, true);
 
     canvas.removeEventListener("pointerenter", onPointerEnter);
@@ -327,126 +349,176 @@ export async function initializeViewer(config, instanceId) {
     canvas.removeEventListener("blur", onCanvasBlur);
   });
 
-  // --- Enregistre les assets ---
-  // IMPORTANT : pour .sog on déclare un asset de type "gsplat" avec l'URL .sog
-  const assets = {
-    sog: new pc.Asset("gsplat", "gsplat", { url: sogUrl }),
-    glb: new pc.Asset("glb", "container", { url: glbUrl }),
-    presentoir: new pc.Asset("presentoir", "container", { url: presentoirUrl })
-  };
-  for (const k in assets) app.assets.add(assets[k]);
+  // --- Enregistre les assets en 2 phases ---
+  // Phase 1 : .sog (priorité) ⇒ time-to-first-pixel
+  const sogAsset = new pc.Asset("gsplat", "gsplat", { url: sogUrl });
+  app.assets.add(sogAsset);
 
-  const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
+  // Phase 2 (déférée) : glb + présentoir
+  const glbAsset = new pc.Asset("glb", "container", { url: glbUrl });
+  const presentoirAsset = new pc.Asset("presentoir", "container", { url: presentoirUrl });
+  app.assets.add(glbAsset);
+  app.assets.add(presentoirAsset);
 
-  // Assure orbit-camera.js une seule fois
+  // Assure orbit-camera.js (nécessaire pour les scripts d'input)
   await ensureOrbitScriptsLoaded();
 
-  loader.load(() => {
-    app.start();
-    progressDialog.style.display = "none";
-
-    // --- Modèle principal (GSplat via .sog) ---
-    modelEntity = new pc.Entity("model");
-    modelEntity.addComponent("gsplat", { asset: assets.sog });
-    modelEntity.setLocalPosition(modelX, modelY, modelZ);
-    modelEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
-    modelEntity.setLocalScale(modelScale, modelScale, modelScale);
-    app.root.addChild(modelEntity);
-
-    // --- Sol / environnement ---
-    const glbEntity = assets.glb.resource.instantiateRenderEntity();
-    app.root.addChild(glbEntity);
-
-    const presentoirEntity = assets.presentoir.resource.instantiateRenderEntity();
-    presentoirEntity.setLocalScale(presentoirScaleX, presentoirScaleY, presentoirScaleZ);
-    app.root.addChild(presentoirEntity);
-
-    if (!espace_expo_bool) {
-      const matSol = new pc.StandardMaterial();
-      matSol.blendType = pc.BLEND_NONE;
-      matSol.emissive = new pc.Color(color_bg);
-      matSol.emissiveIntensity = 1;
-      matSol.useLighting = false;
-      matSol.update();
-
-      traverse(presentoirEntity, (node) => {
-        if (node.render && node.render.meshInstances) {
-          for (const mi of node.render.meshInstances) mi.material = matSol;
-        }
-      });
-
-      traverse(glbEntity, (node) => {
-        if (node.render && node.render.meshInstances) {
-          for (const mi of node.render.meshInstances) mi.material = matSol;
-        }
-      });
+  // ---------- PHASE 1 : charger le .sog, démarrer tout de suite ----------
+  await new Promise((resolve, reject) => {
+    const loader1 = new pc.AssetListLoader([sogAsset], app.assets);
+    loader1.load(() => resolve());
+    loader1.on('error', reject);
+  });
 
-      ////// MODIFIE A LA MANO FAIRE GAFFE //////
-      glbEntity.setLocalScale(10, 10, 10);
+  app.start(); // démarre l'update loop le plus tôt possible
+  progressDialog.style.display = "none";
+
+  // --- Modèle principal (GSplat via .sog) ---
+  modelEntity = new pc.Entity("model");
+  modelEntity.addComponent("gsplat", { asset: sogAsset });
+  modelEntity.setLocalPosition(modelX, modelY, modelZ);
+  modelEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
+  modelEntity.setLocalScale(modelScale, modelScale, modelScale);
+  app.root.addChild(modelEntity);
+
+  // --- Caméra + scripts d’input ---
+  cameraEntity = new pc.Entity("camera");
+  cameraEntity.addComponent("camera", {
+    clearColor: new pc.Color(color_bg),
+    nearClip: 0.001,
+    farClip: 100
+  });
+  cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
+  cameraEntity.lookAt(modelEntity.getPosition());
+  cameraEntity.addComponent("script");
+
+  cameraEntity.script.create("orbitCamera", {
+    attributes: {
+      focusEntity: modelEntity,
+      inertiaFactor: 0.2,
+      distanceMax: maxZoom,
+      distanceMin: minZoom,
+      pitchAngleMax: maxAngle,
+      pitchAngleMin: minAngle,
+      yawAngleMax: maxAzimuth,
+      yawAngleMin: minAzimuth,
+      minY: minY,
+      frameOnStart: false
     }
+  });
+  cameraEntity.script.create("orbitCameraInputMouse");
+  cameraEntity.script.create("orbitCameraInputTouch");
+  cameraEntity.script.create("orbitCameraInputKeyboard", {
+    attributes: {
+      forwardSpeed: 1.2,
+      strafeSpeed: 1.2
+    }
+  });
+  app.root.addChild(cameraEntity);
+
+  // Taille initiale
+  app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
+  app.once("update", () => resetViewerCamera());
+
+  // ---------- Perf dynamique : DPR temporairement réduit pendant interaction ----------
+  const setDpr = (val) => {
+    const clamped = Math.max(0.5, Math.min(val, maxDevicePixelRatio));
+    if (app.graphicsDevice.maxPixelRatio !== clamped) {
+      app.graphicsDevice.maxPixelRatio = clamped;
+      // Force un resize pour appliquer immédiatement
+      app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
+    }
+  };
 
-    // --- Caméra + scripts d’input (disponibles car orbit chargé globalement) ---
-    cameraEntity = new pc.Entity("camera");
-    cameraEntity.addComponent("camera", {
-      clearColor: new pc.Color(color_bg),
-      nearClip: 0.001,
-      farClip: 100
-    });
-    cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
-    cameraEntity.lookAt(modelEntity.getPosition());
-    cameraEntity.addComponent("script");
-
-    cameraEntity.script.create("orbitCamera", {
-      attributes: {
-        focusEntity: modelEntity,
-        inertiaFactor: 0.2,
-        distanceMax: maxZoom,
-        distanceMin: minZoom,
-        pitchAngleMax: maxAngle,
-        pitchAngleMin: minAngle,
-        yawAngleMax: maxAzimuth,
-        yawAngleMin: minAzimuth,
-        minY: minY,
-        frameOnStart: false
+  const bumpInteraction = () => {
+    // baisse DPR pendant l'interaction
+    setDpr(interactDpr);
+    if (idleTimer) clearTimeout(idleTimer);
+    idleTimer = setTimeout(() => {
+      // restaure DPR max quand l'utilisateur s'arrête
+      setDpr(Math.min(window.devicePixelRatio || 1, maxDevicePixelRatio));
+    }, idleRestoreDelay);
+  };
+
+  // Hooks d'interaction
+  const interactionEvents = ["mousedown", "mousemove", "mouseup", "wheel", "touchstart", "touchmove", "keydown"];
+  interactionEvents.forEach((ev) => {
+    canvas.addEventListener(ev, bumpInteraction, { passive: true });
+  });
+
+  // ---------- PHASE 2 (déférée) : charger sol/environnement et tooltips ----------
+  // On charge le reste sans bloquer l’affichage initial
+  setTimeout(async () => {
+    try {
+      await new Promise((resolve) => {
+        const loader2 = new pc.AssetListLoader([glbAsset, presentoirAsset], app.assets);
+        loader2.load(() => resolve());
+      });
+
+      // Sol / environnement
+      const glbEntity = glbAsset.resource ? glbAsset.resource.instantiateRenderEntity() : null;
+      if (glbEntity) {
+        app.root.addChild(glbEntity);
       }
-    });
-    cameraEntity.script.create("orbitCameraInputMouse");
-    cameraEntity.script.create("orbitCameraInputTouch");
-    cameraEntity.script.create("orbitCameraInputKeyboard", {
-      attributes: {
-        forwardSpeed: 1.2,
-        strafeSpeed: 1.2
+
+      const presentoirEntity =
+        presentoirAsset.resource ? presentoirAsset.resource.instantiateRenderEntity() : null;
+      if (presentoirEntity) {
+        presentoirEntity.setLocalScale(presentoirScaleX, presentoirScaleY, presentoirScaleZ);
+        app.root.addChild(presentoirEntity);
       }
-    });
-    app.root.addChild(cameraEntity);
 
-    app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
-    app.once("update", () => resetViewerCamera());
+      if (!espace_expo_bool) {
+        const matSol = new pc.StandardMaterial();
+        matSol.blendType = pc.BLEND_NONE;
+        matSol.emissive = new pc.Color(color_bg);
+        matSol.emissiveIntensity = 1;
+        matSol.useLighting = false;
+        matSol.update();
+
+        if (presentoirEntity) {
+          traverse(presentoirEntity, (node) => {
+            if (node.render && node.render.meshInstances) {
+              for (const mi of node.render.meshInstances) mi.material = matSol;
+            }
+          });
+        }
 
-    // --- Tooltips (optionnels) ---
-    try {
-      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(() => {
-            /* optional */
+        if (glbEntity) {
+          traverse(glbEntity, (node) => {
+            if (node.render && node.render.meshInstances) {
+              for (const mi of node.render.meshInstances) mi.material = matSol;
+            }
           });
+
+          // ////// MODIFIE A LA MANO FAIRE GAFFE //////
+          glbEntity.setLocalScale(10, 10, 10);
+        }
       }
+
+      // Tooltips (optionnels) — chargés après premier rendu
+      try {
+        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(() => { /* optional */ });
+        }
+      } catch (e) { /* optional */ }
     } catch (e) {
-      /* optional */
+      console.warn("[viewer.js] Deferred assets load failed:", e);
     }
+  }, 0);
 
-    viewerInitialized = true;
-  });
+  viewerInitialized = true;
 }
 
 /* -------------------------------------------