// viewer.js // ============================== /* ------------------------------------------- Utils -------------------------------------------- */ // (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(); img.crossOrigin = "anonymous"; img.onload = function () { const tex = new pc.Texture(app.graphicsDevice, { width: img.width, height: img.height, format: pc.PIXELFORMAT_R8_G8_B8_A8 }); tex.setSource(img); resolve(tex); }; img.onerror = reject; img.src = url; }); } // Patch global Image -> force CORS (function () { const OriginalImage = window.Image; window.Image = function (...args) { const img = new OriginalImage(...args); img.crossOrigin = "anonymous"; return img; }; })(); function hexToRgbaArray(hex) { try { hex = String(hex || "").replace("#", ""); if (hex.length === 6) hex += "FF"; if (hex.length !== 8) return [1, 1, 1, 1]; const num = parseInt(hex, 16); return [ ((num >> 24) & 0xff) / 255, ((num >> 16) & 0xff) / 255, ((num >> 8) & 0xff) / 255, (num & 0xff) / 255 ]; } catch (e) { console.warn("hexToRgbaArray error:", e); return [1, 1, 1, 1]; } } // Parcours récursif d'une hiérarchie d'entités function traverse(entity, callback) { callback(entity); if (entity.children) { entity.children.forEach((child) => traverse(child, callback)); } } /* ------------------------------------------- Chargement unique de orbit-camera.js -------------------------------------------- */ async function ensureOrbitScriptsLoaded() { if (window.__PLY_ORBIT_LOADED__) return; if (window.__PLY_ORBIT_LOADING__) { await window.__PLY_ORBIT_LOADING__; return; } window.__PLY_ORBIT_LOADING__ = new Promise((resolve, reject) => { const s = document.createElement("script"); s.src = "https://mikafil-viewer-sgos.static.hf.space/orbit-camera.js"; s.async = true; s.onload = () => { window.__PLY_ORBIT_LOADED__ = true; resolve(); }; s.onerror = (e) => { console.error("[viewer.js] Failed to load orbit-camera.js", e); reject(e); }; document.head.appendChild(s); }); await window.__PLY_ORBIT_LOADING__; } /* ------------------------------------------- State (par module = par instance importée) -------------------------------------------- */ let pc; export let app = null; 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; let minZoom, maxZoom, minAngle, maxAngle, minAzimuth, maxAzimuth, minY; let modelX, modelY, modelZ, modelScale, modelRotationX, modelRotationY, modelRotationZ; 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) { if (viewerInitialized) return; const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent); const isMobile = isIOS || /Android/i.test(navigator.userAgent); // --- Configuration --- // Nouveau format .sog (et compat si seul sogs_json_url est présent) sogUrl = config.sog_url || config.sogs_json_url; glbUrl = config.glb_url !== undefined ? config.glb_url : "https://huggingface.co/datasets/MikaFil/viewer_gs/resolve/main/ressources/espace_expo/sol_blanc_2.glb"; presentoirUrl = config.presentoir_url !== undefined ? config.presentoir_url : "https://huggingface.co/datasets/MikaFil/viewer_gs/resolve/main/ressources/espace_expo/sol_blanc_2.glb"; minZoom = parseFloat(config.minZoom || "1"); maxZoom = parseFloat(config.maxZoom || "20"); minAngle = parseFloat(config.minAngle || "-2000"); maxAngle = parseFloat(config.maxAngle || "2000"); minAzimuth = config.minAzimuth !== undefined ? parseFloat(config.minAzimuth) : -360; maxAzimuth = config.maxAzimuth !== undefined ? parseFloat(config.maxAzimuth) : 360; minY = config.minY !== undefined ? parseFloat(config.minY) : 0; modelX = config.modelX !== undefined ? parseFloat(config.modelX) : 0; modelY = config.modelY !== undefined ? parseFloat(config.modelY) : 0; modelZ = config.modelZ !== undefined ? parseFloat(config.modelZ) : 0; modelScale = config.modelScale !== undefined ? parseFloat(config.modelScale) : 1; modelRotationX = config.modelRotationX !== undefined ? parseFloat(config.modelRotationX) : 0; modelRotationY = config.modelRotationY !== undefined ? parseFloat(config.modelRotationY) : 0; modelRotationZ = config.modelRotationZ !== undefined ? parseFloat(config.modelRotationZ) : 0; presentoirScaleX = config.presentoirScaleX !== undefined ? parseFloat(config.presentoirScaleX) : 0; presentoirScaleY = config.presentoirScaleY !== undefined ? parseFloat(config.presentoirScaleY) : 0; presentoirScaleZ = config.presentoirScaleZ !== undefined ? parseFloat(config.presentoirScaleZ) : 0; const cameraX = config.cameraX !== undefined ? parseFloat(config.cameraX) : 0; const cameraY = config.cameraY !== undefined ? parseFloat(config.cameraY) : 2; const cameraZ = config.cameraZ !== undefined ? parseFloat(config.cameraZ) : 5; const cameraXPhone = config.cameraXPhone !== undefined ? parseFloat(config.cameraXPhone) : cameraX; const cameraYPhone = config.cameraYPhone !== undefined ? parseFloat(config.cameraYPhone) : cameraY; const cameraZPhone = config.cameraZPhone !== undefined ? parseFloat(config.cameraZPhone) : cameraZ * 1.5; color_bg_hex = config.canvas_background !== undefined ? config.canvas_background : "#FFFFFF"; espace_expo_bool = config.espace_expo_bool !== undefined ? config.espace_expo_bool : false; color_bg = hexToRgbaArray(color_bg_hex); chosenCameraX = isMobile ? cameraXPhone : cameraX; 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); const viewerContainer = document.getElementById("viewer-container-" + instanceId); const old = document.getElementById(canvasId); if (old) old.remove(); const canvas = document.createElement("canvas"); canvas.id = canvasId; canvas.className = "ply-canvas"; canvas.style.width = "100%"; canvas.style.height = "100%"; canvas.setAttribute("tabindex", "0"); viewerContainer.insertBefore(canvas, progressDialog); // interactions de base canvas.style.touchAction = "none"; canvas.style.webkitTouchCallout = "none"; canvas.addEventListener("gesturestart", (e) => e.preventDefault()); canvas.addEventListener("gesturechange", (e) => e.preventDefault()); canvas.addEventListener("gestureend", (e) => e.preventDefault()); canvas.addEventListener("dblclick", (e) => e.preventDefault()); canvas.addEventListener( "touchstart", (e) => { if (e.touches.length > 1) e.preventDefault(); }, { passive: false } ); canvas.addEventListener( "wheel", (e) => { e.preventDefault(); }, { passive: false } ); // Bloque le scroll page uniquement quand le pointeur est sur le canvas const scrollKeys = new Set([ "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown", "Home", "End", " ", "Space", "Spacebar" ]); let isPointerOverCanvas = false; const focusCanvas = () => canvas.focus({ preventScroll: true }); const onPointerEnter = () => { isPointerOverCanvas = true; focusCanvas(); }; const onPointerLeave = () => { isPointerOverCanvas = false; if (document.activeElement === canvas) canvas.blur(); }; const onCanvasBlur = () => { isPointerOverCanvas = false; }; canvas.addEventListener("pointerenter", onPointerEnter); canvas.addEventListener("pointerleave", onPointerLeave); canvas.addEventListener("mouseenter", onPointerEnter); canvas.addEventListener("mouseleave", onPointerLeave); canvas.addEventListener("mousedown", focusCanvas); canvas.addEventListener( "touchstart", () => { focusCanvas(); }, { passive: false } ); canvas.addEventListener("blur", onCanvasBlur); const onKeyDownCapture = (e) => { if (!isPointerOverCanvas) return; if (scrollKeys.has(e.key) || scrollKeys.has(e.code)) { e.preventDefault(); } }; window.addEventListener("keydown", onKeyDownCapture, true); progressDialog.style.display = "block"; // --- Charge PlayCanvas lib ESM (une par module/instance) --- if (!pc) { pc = await import("https://esm.run/playcanvas"); window.pc = pc; // utiles pour tooltips.js } // --- Crée l'Application --- 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 }); // 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); opts.componentSystems = [ pc.RenderComponentSystem, pc.CameraComponentSystem, pc.LightComponentSystem, pc.ScriptComponentSystem, pc.GSplatComponentSystem, pc.CollisionComponentSystem, pc.RigidbodyComponentSystem ]; // 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) => { 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", () => { if (resizeTimeout) clearTimeout(resizeTimeout); resizeTimeout = setTimeout(() => { app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight); }, 60); }); // Nettoyage complet app.on("destroy", () => { try { resizeObserver.disconnect(); } catch {} if (opts.keyboard && opts.keyboard.detach) opts.keyboard.detach(); window.removeEventListener("keydown", onKeyDownCapture, true); canvas.removeEventListener("pointerenter", onPointerEnter); canvas.removeEventListener("pointerleave", onPointerLeave); canvas.removeEventListener("mouseenter", onPointerEnter); canvas.removeEventListener("mouseleave", onPointerLeave); canvas.removeEventListener("mousedown", focusCanvas); canvas.removeEventListener("touchstart", focusCanvas); canvas.removeEventListener("blur", onCanvasBlur); }); // --- 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); // 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 (nécessaire pour les scripts d'input) await ensureOrbitScriptsLoaded(); // ---------- 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); }); 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); } }; 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); } const presentoirEntity = presentoirAsset.resource ? presentoirAsset.resource.instantiateRenderEntity() : null; if (presentoirEntity) { 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(); if (presentoirEntity) { traverse(presentoirEntity, (node) => { if (node.render && node.render.meshInstances) { for (const mi of node.render.meshInstances) mi.material = matSol; } }); } 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) { console.warn("[viewer.js] Deferred assets load failed:", e); } }, 0); viewerInitialized = true; } /* ------------------------------------------- Reset caméra (API) -------------------------------------------- */ export function resetViewerCamera() { try { if (!cameraEntity || !modelEntity || !app) return; const orbitCam = cameraEntity.script.orbitCamera; if (!orbitCam) return; const modelPos = modelEntity.getPosition(); 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 = 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 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 (orbitCam._updatePosition) orbitCam._updatePosition(); tempEnt.destroy(); } catch (e) { console.error("[viewer.js] resetViewerCamera error:", e); } }