Update viewer.js

viewer.js

@@ -1,108 +1,111 @@
-// Minimal viewer.js (for one GLB with KHR_materials_transmission)
-
 let pc;
 export let app = null;
 
 export async function initializeViewer(config, instanceId) {
-  if (app) return; // Only allow one instance for this minimal demo
-
-  // Get URLs from config
-  const glbUrl = config.glb_url;
-
-  // Get the container
-  const viewerContainer = document.getElementById('viewer-container-' + instanceId);
-
-  // Prepare the canvas
-  let oldCanvas = document.getElementById('canvas-' + instanceId);
-  if (oldCanvas) oldCanvas.remove();
-
-  const canvas = document.createElement('canvas');
-  canvas.id = 'canvas-' + instanceId;
-  canvas.style.width = "100%";
-  canvas.style.height = "100%";
-  viewerContainer.appendChild(canvas);
-
-  // Load PlayCanvas if not loaded yet
-  if (!pc) {
-    pc = await import("https://esm.run/playcanvas");
-    window.pc = pc;
-  }
-
-  // Create graphics device
-  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"
-  });
-
-  device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
-
-  const opts = new pc.AppOptions();
-  opts.graphicsDevice = device;
-  opts.mouse = new pc.Mouse(canvas);
-  opts.touch = new pc.TouchDevice(canvas);
-  opts.componentSystems = [
-    pc.RenderComponentSystem,
-    pc.CameraComponentSystem,
-    pc.LightComponentSystem,
-    pc.ScriptComponentSystem
-  ];
-  opts.resourceHandlers = [
-    pc.TextureHandler,
-    pc.ContainerHandler,
-    pc.ScriptHandler
-  ];
-
-  app = new pc.Application(canvas, opts);
-  app.setCanvasFillMode(pc.FILLMODE_NONE);
-  app.setCanvasResolution(pc.RESOLUTION_AUTO);
-
-  // GLB asset
-  const glbAsset = new pc.Asset('model', 'container', { url: glbUrl });
-  app.assets.add(glbAsset);
-
-  // Optional: set up KHR extension flags (not always required, but safe)
-  const containerHandler = app.loader.getHandler('container');
-  if (containerHandler) {
-    containerHandler.pcMaterialOptions = {
-      processTransmission: true,
-      processVolume: true,
-      processIOR: true,
-      processSheen: true,
-      processClearCoat: true,
-      processVariants: true
-    };
-  }
-
-  // Wait for GLB to load
-  glbAsset.ready(() => {
-    // Instantiate as-is (DO NOT TOUCH MATERIALS)
-    const entity = glbAsset.resource.instantiateRenderEntity();
-    app.root.addChild(entity);
-
-    // Add a camera
-    const camera = new pc.Entity('camera');
-    camera.addComponent('camera', { clearColor: new pc.Color(0.95, 0.95, 0.95, 1) });
-    camera.setPosition(0, 1, 4);
-    camera.lookAt(0, 0, 0);
-    app.root.addChild(camera);
-
-    // Add a light
-    const light = new pc.Entity('mainLight');
-    light.addComponent('light', {
-      type: "directional",
-      color: new pc.Color(1, 1, 1),
-      intensity: 1.0
-    });
-    light.setPosition(0, 2, 2);
-    light.lookAt(0, 0, 0);
-    app.root.addChild(light);
+    if (app) return;
+
+    const glbUrl = config.glb_url;
+    const envAtlasUrl = config.envAtlas_url || "https://playcanvas.github.io/static/assets/cubemaps/helipad-env-atlas.png"; // Default PlayCanvas envAtlas
+
+    const viewerContainer = document.getElementById('viewer-container-' + instanceId);
+
+    let oldCanvas = document.getElementById('canvas-' + instanceId);
+    if (oldCanvas) oldCanvas.remove();
 
-    // Optionally: set skybox, env map, etc, as you like
+    const canvas = document.createElement('canvas');
+    canvas.id = 'canvas-' + instanceId;
+    canvas.style.width = "100%";
+    canvas.style.height = "100%";
+    viewerContainer.appendChild(canvas);
 
-    app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
-    window.addEventListener('resize', () => app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight));
-  });
+    if (!pc) {
+        pc = await import("https://esm.run/playcanvas");
+        window.pc = pc;
+    }
+
+    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"
+    });
+
+    device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+
+    const opts = new pc.AppOptions();
+    opts.graphicsDevice = device;
+    opts.mouse = new pc.Mouse(canvas);
+    opts.touch = new pc.TouchDevice(canvas);
+    opts.componentSystems = [
+        pc.RenderComponentSystem,
+        pc.CameraComponentSystem,
+        pc.LightComponentSystem,
+        pc.ScriptComponentSystem
+    ];
+    opts.resourceHandlers = [
+        pc.TextureHandler,
+        pc.ContainerHandler,
+        pc.ScriptHandler
+    ];
+
+    app = new pc.Application(canvas, opts);
+    app.setCanvasFillMode(pc.FILLMODE_NONE);
+    app.setCanvasResolution(pc.RESOLUTION_AUTO);
+
+    // Set up assets (GLB and envAtlas)
+    const glbAsset = new pc.Asset('model', 'container', { url: glbUrl });
+    const envAtlasAsset = new pc.Asset('helipad-env-atlas', 'texture', { url: envAtlasUrl }, { type: pc.TEXTURETYPE_RGBP, mipmaps: false });
+
+    app.assets.add(glbAsset);
+    app.assets.add(envAtlasAsset);
+
+    // KHR extensions (usually not necessary, but included for completeness)
+    const containerHandler = app.loader.getHandler('container');
+    if (containerHandler) {
+        containerHandler.pcMaterialOptions = {
+            processTransmission: true,
+            processVolume: true,
+            processIOR: true,
+            processSheen: true,
+            processClearCoat: true,
+            processVariants: true
+        };
+    }
+
+    // Load both assets before continuing
+    const loader = new pc.AssetListLoader([glbAsset, envAtlasAsset], app.assets);
+    loader.load(() => {
+        // Environment map
+        app.scene.envAtlas = envAtlasAsset.resource;
+        app.scene.skyboxMip = 1;
+        app.scene.skyboxIntensity = 1.8;
+        app.scene.skyboxRotation = new pc.Quat().setFromEulerAngles(0, 70, 0);
+
+        // Add model
+        const entity = glbAsset.resource.instantiateRenderEntity();
+        app.root.addChild(entity);
+
+        // Add a camera
+        const camera = new pc.Entity('camera');
+        camera.addComponent('camera', { clearColor: new pc.Color(0.93, 0.93, 0.93, 1) });
+        camera.setPosition(0, 1, 6);
+        camera.lookAt(0, 0.5, 0);
+        app.root.addChild(camera);
+
+        // Add a light (for diffuse shading)
+        const light = new pc.Entity('mainLight');
+        light.addComponent('light', {
+            type: "directional",
+            color: new pc.Color(1, 1, 1),
+            intensity: 1.1
+        });
+        light.setPosition(0, 2, 2);
+        light.lookAt(0, 0, 0);
+        app.root.addChild(light);
+
+        app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
+        window.addEventListener('resize', () => app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight));
+    });
 
-  app.assets.load(glbAsset);
+    app.assets.load(glbAsset);
+    app.assets.load(envAtlasAsset);
 }