Update viewer.js

viewer.js

@@ -1,12 +1,30 @@
 // viewer.js
 // ==============================
 
+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;
+    });
+}
+
 let pc;
 export let app = null;
 let cameraEntity = null;
 let modelEntity = null;
 let tubeEntity = null;
-let bouchonEntity = null;
+let filtreEntity = null;
 let viewerInitialized = false;
 let resizeObserver = null;
 
@@ -20,7 +38,7 @@ let tubeOpaque = null;
 let chosenCameraX, chosenCameraY, chosenCameraZ;
 let minZoom, maxZoom, minAngle, maxAngle, minAzimuth, maxAzimuth, minPivotY, minY;
 let modelX, modelY, modelZ, modelScale, modelRotationX, modelRotationY, modelRotationZ;
-let glbUrl, glbUrl2, glbUrl3, aoUrl, opacityUrl, thicknessUrl;
+let glbUrl, glbUrl2, glbUrl3;
 
 // RECURSIVE ENTITY TRAVERSAL (needed for material assignment)
 function traverse(entity, callback) {
@@ -39,9 +57,6 @@ export async function initializeViewer(config, instanceId) {
   glbUrl = config.glb_url;
   glbUrl2 = config.glb_url_2;
   glbUrl3 = config.glb_url_3;
-  aoUrl = config.ao_url;
-  thicknessUrl = config.thickness_url;
-  opacityUrl = config.opacity_url;
   minZoom = 0.2;
   maxZoom = 2;
   minAngle = -Infinity;
@@ -158,42 +173,38 @@ export async function initializeViewer(config, instanceId) {
   // --- Assets ---
   const assets = {
     orbit: new pc.Asset('script', 'script', { url: "https://mikafil-viewer-gs.static.hf.space/orbit-camera.js" }),
-    model: new pc.Asset('glb', 'container', { url: glbUrl }),
-    tube: new pc.Asset('glb', 'container', { url: glbUrl2 }),
-    bouchon: new pc.Asset('glb', 'container', { url: glbUrl3 }),
-    ao_map: new pc.Asset('color', 'texture', { url: aoUrl }),
-    op_map: new pc.Asset('color', 'texture', { url: opacityUrl }),
-    bg_tex: new pc.Asset('color', 'texture', {url: "https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/EARCARE/banniere_earcare.png"}),
-    thickness_map: new pc.Asset('color', 'texture', { url: thicknessUrl }),
-    helipad: new pc.Asset(
-      'helipad-env-atlas',
-      'texture',
-      { url: "https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/EARCARE/hdr/ciel_nuageux_1k.png" },
-      { type: pc.TEXTURETYPE_RGBP, mipmaps: false }
-    )
+    model: new pc.Asset('model_glb', 'container', { url: glbUrl }),
+    tube: new pc.Asset('tube_glb', 'container', { url: glbUrl2 }),
+    filtre: new pc.Asset('filtre_glb', 'container', { url: glbUrl3 }),
   };
 
+  const hdrUrl = 'https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/EARCARE/hdr/ciel_nuageux_1k.png';
+  const hdrTex = await loadImageAsTexture(hdrUrl, app);
+
+  const emitUrl = 'https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/retop_2/emit_map_2k.png';
+  const emitTex = await loadImageAsTexture(emitUrl, app);
+
+  const opUrl = 'https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/retop_2/op_map_2k.png';
+  const opTex = await loadImageAsTexture(opUrl, app);
+
+  const thicknessUrl = 'https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/retop_2/thickness_map_2k.png';
+  const thicknessTex = await loadImageAsTexture(thicknessTex, app);  
+
+  const bgurl ='https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/EARCARE/banniere_earcare.png';
+  const bgTex = await loadImageAsTexture(bgurl, app);
+
   for (const key in assets) app.assets.add(assets[key]);
 
   // Load HDR *before* loading any models
   assets.helipad.ready(() => {
-    app.scene.envAtlas = assets.helipad.resource;
+    app.scene.envAtlas = hdrTex;
     app.scene.skyboxRotation = new pc.Quat().setFromEulerAngles(0, -90, 0);
     app.scene.skyboxIntensity = 4;
     app.scene.skyboxMip = 0;
 
 
     // Now load all GLBs and other assets
-    const loader = new pc.AssetListLoader([
-      assets.orbit,
-      assets.model,
-      assets.tube,
-      assets.bouchon,
-      assets.ao_map,
-      assets.op_map,
-      assets.bg_tex,
-      assets.thickness_map
-    ], app.assets);
+    const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
 
     loader.load(() => {
       app.start();
@@ -207,20 +218,13 @@ export async function initializeViewer(config, instanceId) {
       // 1. Models
       modelEntity = assets.model.resource.instantiateRenderEntity();
       tubeEntity = assets.tube.resource.instantiateRenderEntity();
-      bouchonEntity = assets.bouchon.resource.instantiateRenderEntity();
+      filtreEntity = assets.filtre.resource.instantiateRenderEntity();
 
       app.root.addChild(modelEntity);
       app.root.addChild(tubeEntity);
-      app.root.addChild(bouchonEntity);
+      app.root.addChild(filtreEntity);
 
-      // 2. Materials for main model & tube
-
-
-      //the 2 materials for the main model : 
-      const ao = assets.ao_map.resource;
-      const op = assets.op_map.resource;
-      const thickness = assets.thickness_map.resource;
-      
+      // 2. Materials for main model & tube      
             //mat transparent
       matTransparent = new pc.StandardMaterial();
       matTransparent.blendType = pc.BLEND_NORMAL;
@@ -234,12 +238,12 @@ export async function initializeViewer(config, instanceId) {
       matTransparent.refraction= 0.8;
       matTransparent.refractionIndex = 1;
       matTransparent.thickness = 0.02;
-      matTransparent.thicknessMap = thickness;
-      matTransparent.opacityMap = op;
+      matTransparent.thicknessMap = thicknessTex;
+      matTransparent.opacityMap = opTex;
       matTransparent.opacityMapChannel = "r";
       matTransparent.opacity = 0.97;
       matTransparent.emissive = new pc.Color(1, 1, 1);
-      matTransparent.emissiveMap = ao;
+      matTransparent.emissiveMap = emitTex;
       matTransparent.emissiveIntensity = 0.1;
       matTransparent.update();
 
@@ -254,11 +258,11 @@ export async function initializeViewer(config, instanceId) {
       matOpaque.specularityFactor = 1;
       matOpaque.gloss = 1;
       matOpaque.metalness = 0;
-      matOpaque.opacityMap = op;
+      matOpaque.opacityMap = opTex;
       matOpaque.opacityMapChannel = "r";
       matOpaque.opacity = 1;
       matOpaque.emissive = new pc.Color(0.372, 0.03, 0.003);
-      matOpaque.emissiveMap = ao;
+      matOpaque.emissiveMap = emitTex;
       matOpaque.emissiveIntensity = 2;
       matOpaque.update();
 
@@ -322,9 +326,9 @@ export async function initializeViewer(config, instanceId) {
       tubeEntity.setLocalScale(modelScale, modelScale, modelScale);
       tubeEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
 
-      bouchonEntity.setPosition(modelX, modelY, modelZ);
-      bouchonEntity.setLocalScale(modelScale, modelScale, modelScale);
-      bouchonEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
+      filtreEntity.setPosition(modelX, modelY, modelZ);
+      filtreEntity.setLocalScale(modelScale, modelScale, modelScale);
+      filtreEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
 
       // 4. Camera & orbit