Update viewer.js

viewer.js

@@ -80,7 +80,50 @@ export async function initializeViewer(config, instanceId) {
     window.pc = pc;
   }
 
-  // --- HDR asset is now included AND registered ---
+  // Create app *before* creating assets!
+  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);
+
+  const opts = new pc.AppOptions();
+  opts.graphicsDevice = device;
+  opts.mouse = new pc.Mouse(document.body);
+  opts.touch = new pc.TouchDevice(document.body);
+  opts.componentSystems = [
+    pc.RenderComponentSystem,
+    pc.CameraComponentSystem,
+    pc.LightComponentSystem,
+    pc.ScriptComponentSystem,
+    pc.GSplatComponentSystem,
+    pc.CollisionComponentSystem,
+    pc.RigidbodyComponentSystem
+  ];
+  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);
+
+  resizeObserver = new ResizeObserver(entries => {
+    entries.forEach(entry => {
+      app.resizeCanvas(entry.contentRect.width, entry.contentRect.height);
+    });
+  });
+  resizeObserver.observe(viewerContainer);
+
+  window.addEventListener('resize', () => app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight));
+  app.on('destroy', () => resizeObserver.disconnect());
+
+  // Now create and register assets (with app.assets ready)
   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" }),
@@ -90,12 +133,9 @@ export async function initializeViewer(config, instanceId) {
       { type: pc.TEXTURETYPE_RGBP, mipmaps: false }
     ),
   };
-
-  // Register all assets to app.assets so they are tracked and loaded
+  // Register all assets to app.assets
   for (const key in assets) {
-    if (!app?.assets.get(assets[key].name)) {
-      app.assets.add(assets[key]);
-    }
+    app.assets.add(assets[key]);
   }
 
   const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
@@ -103,7 +143,7 @@ export async function initializeViewer(config, instanceId) {
     app.start();
     progressDialog.style.display = 'none';
 
-    // --- Apply HDR environment if available ---
+    // Apply HDR environment if available
     if (assets.hdr && assets.hdr.resource) {
       app.scene.envAtlas = assets.hdr.resource;
     }
@@ -132,10 +172,8 @@ export async function initializeViewer(config, instanceId) {
 
     app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
 
-    // Use Script B's robust camera reset logic after everything is ready
     app.once('update', () => resetViewerCamera());
 
-    // --- Tooltips functionality from Script B ---
     try {
       if (config.tooltips_url) {
         import('./tooltips.js').then(tooltipsModule => {