Update viewer.js

viewer.js

@@ -80,27 +80,58 @@ export async function initializeViewer(config, instanceId) {
     window.pc = pc;
   }
 
-  // --- HDR asset is now included ---
+  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());
+
   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" }),
-    hdr: new pc.Asset(
-      'hdr', 'texture',
-      { url: "https://huggingface.co/datasets/bilca/ply_files/resolve/main/galeries/blanc.png" },
-      { type: pc.TEXTURETYPE_RGBP, mipmaps: false }
-    ),
   };
 
-  const loader = new pc.AssetListLoader(Object.values(assets), app ? app.assets : []);
+  const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
   loader.load(() => {
     app.start();
     progressDialog.style.display = 'none';
 
-    // --- Apply HDR environment if available ---
-    if (assets.hdr && assets.hdr.resource) {
-      app.scene.envAtlas = assets.hdr.resource;
-    }
-
     modelEntity = new pc.Entity('model');
     modelEntity.addComponent('gsplat', { asset: assets.model });
     modelEntity.setLocalPosition(modelX, modelY, modelZ);