Update viewer.js

viewer.js

@@ -23,19 +23,12 @@ async function loadImageAsTexture(url, app) {
 let pc;
 export let app = null;
 let cameraEntity = null;
-let textureCamera = null;
 let modelEntity = null;
 let tubeEntity = null;
 let filtreEntity = null;
-let bgPlane = null;
-let bgMat = null;
 let viewerInitialized = false;
 let resizeObserver = null;
 
-// Render target globals (pour resize)
-let rtTexture = null;
-let renderTarget = null;
-
 // Materials (for real-time switching)
 let matTransparent = null;
 let matOpaque = null;
@@ -56,73 +49,6 @@ function traverse(entity, callback) {
     }
 }
 
-// ----- Helpers: viewport size / copy cam / RT / fullscreen plane -----
-function camViewportSize(cam) {
-    const gd = app.graphicsDevice;
-    const r = cam.rect; // x, y, width, height in [0..1]
-    return {
-        w: Math.max(1, Math.round(gd.width  * r.z)),
-        h: Math.max(1, Math.round(gd.height * r.w))
-    };
-}
-
-function copyCam(src, dst) {
-    dst.camera.projection    = src.camera.projection;
-    dst.camera.horizontalFov = src.camera.horizontalFov;
-    dst.camera.fov           = src.camera.fov;
-    dst.camera.nearClip      = src.camera.nearClip;
-    dst.camera.farClip       = src.camera.farClip;
-    dst.camera.rect.set(src.camera.rect.x, src.camera.rect.y, src.camera.rect.z, src.camera.rect.w);
-}
-
-function createRTFor(cam) {
-    const { w, h } = camViewportSize(cam);
-    if (rtTexture) {
-        rtTexture.destroy();
-        rtTexture = null;
-    }
-    const tex = new pc.Texture(app.graphicsDevice, {
-        width: w,
-        height: h,
-        format: pc.PIXELFORMAT_SRGBA8,
-        mipmaps: false
-    });
-    tex.minFilter = pc.FILTER_LINEAR;
-    tex.magFilter = pc.FILTER_LINEAR;
-    tex.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
-    tex.addressV = pc.ADDRESS_CLAMP_TO_EDGE;
-
-    const rt = new pc.RenderTarget({
-        name: 'RT',
-        colorBuffer: tex,
-        depth: true,
-        samples: 1
-    });
-    return { tex, rt };
-}
-
-function fitFullscreenPlane(camEntity, planeEntity, d = 0.5) {
-    const cam = camEntity.camera;
-    const { w: vpW, h: vpH } = camViewportSize(cam);
-    const aspect = vpW / vpH;
-
-    // fov en radians (vertical si horizontalFov === false)
-    let vFovRad = cam.fov * pc.math.DEG_TO_RAD;
-    if (cam.horizontalFov) {
-        const hFovRad = vFovRad;
-        vFovRad = 2 * Math.atan(Math.tan(hFovRad / 2) / aspect);
-    }
-
-    const h = 2 * d * Math.tan(vFovRad / 2);
-    const w = h * aspect;
-
-    // plein écran en espace caméra
-    planeEntity.reparent(camEntity);
-    planeEntity.setLocalPosition(0, 0, -d);
-    planeEntity.setLocalEulerAngles(-90, 0, 0); // plane (normale +Y) -> face -Z
-    planeEntity.setLocalScale(w, h, 1);
-}
-
 // ----- Main Viewer Initialization -----
 export async function initializeViewer(config, instanceId) {
     if (viewerInitialized) return; // Prevent double-init
@@ -208,7 +134,7 @@ export async function initializeViewer(config, instanceId) {
     app.setCanvasFillMode(pc.FILLMODE_NONE);
     app.setCanvasResolution(pc.RESOLUTION_AUTO);
 
-    // Canvas responsive resize (déclenchera app.on('resize'))
+    // Canvas responsive resize
     resizeObserver = new ResizeObserver(entries => {
         entries.forEach(entry => {
             app.resizeCanvas(entry.contentRect.width, entry.contentRect.height);
@@ -219,11 +145,12 @@ export async function initializeViewer(config, instanceId) {
     app.on('destroy', () => resizeObserver.disconnect());
 
     // ----- Load all images as Textures (async, safe for CORS) -----
-    // (envAtlas ci-dessous utilise une simple image placeholder)
-    const hdrTex       = await loadImageAsTexture('https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/EARCARE/hdr/ciel_nuageux_1k.png', app);
-    const emitTex      = await loadImageAsTexture('https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/EARCARE/textures/emit_map_1k.png', app);
-    const opTex        = await loadImageAsTexture('https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/EARCARE/textures/op_map_1k.png', app);
-    const thicknessTex = await loadImageAsTexture('https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/EARCARE/textures/thickness_map_1k.png', app);
+    // All of these can fail (network, CORS), so wrap with try/catch if needed.
+    const hdrTex      = await loadImageAsTexture('https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/EARCARE/hdr/ciel_nuageux_1k.png', app);
+    const emitTex     = await loadImageAsTexture('https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/EARCARE/textures/emit_map_1k.png', app);
+    const opTex       = await loadImageAsTexture('https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/EARCARE/textures/op_map_1k.png', app);
+    const thicknessTex= await loadImageAsTexture('https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/EARCARE/textures/thickness_map_1k.png', app);
+    const bgTex       = await loadImageAsTexture('https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/EARCARE/images/banniere_earcare.png', app);
 
     // ----- GLB asset definition -----
     const assets = {
@@ -246,97 +173,76 @@ export async function initializeViewer(config, instanceId) {
         app.start();
         if (progressDialog) progressDialog.style.display = 'none';
 
-        // --- Layers ---
-        const backgroundLayer = new pc.Layer({ name: 'Background' });
-        app.scene.layers.insert(backgroundLayer, 0); // tout au début
-
-        const excludedLayer = new pc.Layer({ name: 'Excluded' });
-        app.scene.layers.insert(excludedLayer, 1);
-
-        // get existing layers
-        const worldLayer  = app.scene.layers.getLayerByName('World');
-        const skyboxLayer = app.scene.layers.getLayerByName('Skybox');
-        const uiLayer     = app.scene.layers.getLayerByName('UI');
-
-        // Reorder depth layer for transmission (si utile)
+        // Reorder depth layer for transmission
         const depthLayer = app.scene.layers.getLayerById(pc.LAYERID_DEPTH);
         app.scene.layers.remove(depthLayer);
         app.scene.layers.insertOpaque(depthLayer, 2);
 
-        // --- Instantiate GLB entities ---
-        modelEntity  = assets.model.resource.instantiateRenderEntity();
-        tubeEntity   = assets.tube.resource.instantiateRenderEntity();
+        // Instantiate GLB entities
+        modelEntity = assets.model.resource.instantiateRenderEntity();
+        tubeEntity = assets.tube.resource.instantiateRenderEntity();
         filtreEntity = assets.filtre.resource.instantiateRenderEntity();
 
-        // mettre tube/filtre dans la couche Excluded
-        traverse(tubeEntity,   (node) => { if (node.render) node.render.layers = [excludedLayer.id]; });
-        traverse(filtreEntity, (node) => { if (node.render) node.render.layers = [excludedLayer.id]; });
-
         app.root.addChild(modelEntity);
         app.root.addChild(tubeEntity);
         app.root.addChild(filtreEntity);
 
         // ----- Materials Setup -----
         // Transparent material (main model)
-        {
-            matTransparent = new pc.StandardMaterial();
-            matTransparent.blendType = pc.BLEND_NORMAL;
-            matTransparent.diffuse = new pc.Color(1, 1, 1);
-            matTransparent.specular = new pc.Color(0.01, 0.01, 0.01);
-            matTransparent.gloss = 1;
-            matTransparent.metalness = 0;
-            matTransparent.useMetalness = true;
-            matTransparent.useDynamicRefraction = true;
-            matTransparent.depthWrite = true;
-            matTransparent.refraction = 0.8;
-            matTransparent.refractionIndex = 1;
-            matTransparent.thickness = 0.02;
-            matTransparent.thicknessMap = thicknessTex;
-            matTransparent.opacityMap = opTex;
-            matTransparent.opacityMapChannel = "r";
-            matTransparent.opacity = 0.97;
-            matTransparent.emissive = new pc.Color(1, 1, 1);
-            matTransparent.emissiveMap = emitTex;
-            matTransparent.emissiveIntensity = 0.1;
-            matTransparent.update();
-        }
+        matTransparent = new pc.StandardMaterial();
+        matTransparent.blendType = pc.BLEND_NORMAL;
+        matTransparent.diffuse = new pc.Color(1, 1, 1);
+        matTransparent.specular = new pc.Color(0.01, 0.01, 0.01);
+        matTransparent.gloss = 1;
+        matTransparent.metalness = 0;
+        matTransparent.useMetalness = true;
+        matTransparent.useDynamicRefraction = true;
+        matTransparent.depthWrite = true;
+        matTransparent.refraction = 0.8;
+        matTransparent.refractionIndex = 1;
+        matTransparent.thickness = 0.02;
+        matTransparent.thicknessMap = thicknessTex;
+        matTransparent.opacityMap = opTex;
+        matTransparent.opacityMapChannel = "r";
+        matTransparent.opacity = 0.97;
+        matTransparent.emissive = new pc.Color(1, 1, 1);
+        matTransparent.emissiveMap = emitTex;
+        matTransparent.emissiveIntensity = 0.1;
+        matTransparent.update();
+
         // Opaque material (main model)
-        {
-            matOpaque = new pc.StandardMaterial();
-            matOpaque.blendType = pc.BLEND_NORMAL;
-            matOpaque.diffuse = new pc.Color(0.7, 0.05, 0.05);
-            matOpaque.specular = new pc.Color(0.01, 0.01, 0.01);
-            matOpaque.specularityFactor = 1;
-            matOpaque.gloss = 1;
-            matOpaque.metalness = 0;
-            matOpaque.opacityMap = opTex;
-            matOpaque.opacityMapChannel = "r";
-            matOpaque.opacity = 1;
-            matOpaque.emissive = new pc.Color(0.372, 0.03, 0.003);
-            matOpaque.emissiveIntensity = 2;
-            matOpaque.emissiveMap = emitTex;
-            matOpaque.update();
-        }
+        matOpaque = new pc.StandardMaterial();
+        matOpaque.blendType = pc.BLEND_NORMAL;
+        matOpaque.diffuse = new pc.Color(0.7, 0.05, 0.05);
+        matOpaque.specular = new pc.Color(0.01, 0.01, 0.01);
+        matOpaque.specularityFactor = 1;
+        matOpaque.gloss = 1;
+        matOpaque.metalness = 0;
+        matOpaque.opacityMap = opTex;
+        matOpaque.opacityMapChannel = "r";
+        matOpaque.opacity = 1;
+        matOpaque.emissive = new pc.Color(0.372, 0.03, 0.003);
+        matOpaque.emissiveMap = emitTex;
+        matOpaque.emissiveIntensity = 2;
+        matOpaque.update();
+
         // Transparent material (tube)
-        {
-            tubeTransparent = new pc.StandardMaterial();
-            tubeTransparent.diffuse = new pc.Color(1, 1, 1);
-            tubeTransparent.blendType = pc.BLEND_NORMAL;
-            tubeTransparent.opacity = 0.95;
-            tubeTransparent.depthTest = false;
-            tubeTransparent.depthWrite = false;
-            tubeTransparent.useMetalness = true;
-            tubeTransparent.useDynamicRefraction = true;
-            tubeTransparent.thickness = 4;
-            tubeTransparent.update();
-        }
+        tubeTransparent = new pc.StandardMaterial();
+        tubeTransparent.diffuse = new pc.Color(1, 1, 1);
+        tubeTransparent.blendType = pc.BLEND_NORMAL;
+        tubeTransparent.opacity = 0.05;                         
+        tubeTransparent.depthTest = false;
+        tubeTransparent.depthWrite = false;
+        tubeTransparent.useMetalness = true;
+        tubeTransparent.useDynamicRefraction = true;
+        tubeTransparent.thickness = 4;
+        tubeTransparent.update();
+
         // Opaque material (tube)
-        {
-            tubeOpaque = new pc.StandardMaterial();
-            tubeOpaque.diffuse = new pc.Color(1, 1, 1);
-            tubeOpaque.opacity = 0.9;
-            tubeOpaque.update();
-        }
+        tubeOpaque = new pc.StandardMaterial();
+        tubeOpaque.diffuse = new pc.Color(1, 1, 1);
+        tubeOpaque.opacity = 0.9;                         
+        tubeOpaque.update();
 
         // ----- Assign materials to meshes -----
         traverse(modelEntity, node => {
@@ -367,17 +273,12 @@ export async function initializeViewer(config, instanceId) {
         filtreEntity.setLocalScale(modelScale, modelScale, modelScale);
         filtreEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
 
-        // ----- Main camera + Orbit Controls -----
+        // ----- Camera + Orbit Controls -----
         cameraEntity = new pc.Entity('camera');
         cameraEntity.addComponent('camera', {
             clearColor: new pc.Color(0.8, 0.8, 0.8, 1),
-            // Important : Background d'abord, puis World, puis UI et Depth
-            layers: [backgroundLayer.id, worldLayer.id, /*skyboxLayer.id,*/ uiLayer.id, depthLayer.id],
             toneMapping: pc.TONEMAP_NEUTRAL
         });
-        // Option : forcer FOV vertical partout
-        cameraEntity.camera.horizontalFov = false;
-
         cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
         cameraEntity.lookAt(modelEntity.getPosition());
         cameraEntity.addComponent('script');
@@ -401,45 +302,35 @@ export async function initializeViewer(config, instanceId) {
         cameraEntity.script.create('orbitCameraInputTouch');
         app.root.addChild(cameraEntity);
 
-        // ----- Texture camera (rend Excluded vers RT) -----
-        ({ tex: rtTexture, rt: renderTarget } = createRTFor(cameraEntity.camera));
-
-        textureCamera = new pc.Entity('TextureCamera');
-        textureCamera.addComponent('camera', {
-            clearColor: new pc.Color(0, 0, 0, 0),
-            layers: [excludedLayer.id], // PAS Background/World
-            toneMapping: pc.TONEMAP_NEUTRAL,
-            priority: -1,               // rendu en premier
-            renderTarget: renderTarget
-        });
-        cameraEntity.addChild(textureCamera);
-        textureCamera.camera.horizontalFov = cameraEntity.camera.horizontalFov;
-        copyCam(cameraEntity, textureCamera);
-
-        // ----- Background plane plein écran (espace caméra) -----
-        bgPlane = new pc.Entity("Plane");
+        // Remove Skybox layer from camera
+        const skyboxLayer = app.scene.layers.getLayerByName("Skybox");
+        if (skyboxLayer) {
+            const camLayers = cameraEntity.camera.layers.slice();
+            const idx = camLayers.indexOf(skyboxLayer.id);
+            if (idx !== -1) {
+                camLayers.splice(idx, 1);
+                cameraEntity.camera.layers = camLayers;
+            }
+        }
+/*
+        // ----- Camera-attached background plane -----
+        const bgPlane = new pc.Entity("Plane");
         bgPlane.addComponent("model", { type: "plane" });
-
-        bgMat = new pc.StandardMaterial();
-        bgMat.useLighting = false;
-        bgMat.emissive = new pc.Color(1, 1, 1);
-        bgMat.emissiveMap = rtTexture;
-        // si l’image est inversée verticalement, décommente :
-        // bgMat.emissiveMapTiling.set(1, -1);
-        // bgMat.emissiveMapOffset.set(0, 1);
-
-        // fond non-occlusif (toujours derrière le World)
-        bgMat.depthTest  = false;
-        bgMat.depthWrite = false;
-        bgMat.cull = pc.CULLFACE_NONE;
-        bgMat.update();
-
-        bgPlane.model.material = bgMat;
-        // plane rendu dans la layer Background (rendu AVANT World)
-        bgPlane.model.layers = [backgroundLayer.id];
-        // placement plein écran devant la caméra (mais dans Background)
-        fitFullscreenPlane(cameraEntity, bgPlane, 0.5);
-
+        bgPlane.setLocalPosition(0, 0, -10);
+        bgPlane.setLocalScale(11, 1, 5.5);
+        bgPlane.setLocalEulerAngles(90, 0, 0);
+        // Simple material for the banner
+        const mat = new pc.StandardMaterial();
+        mat.diffuse = new pc.Color(1, 1, 1);
+        mat.diffuseMap = bgTex;
+        mat.emissive = new pc.Color(1, 1, 1);
+        mat.emissiveMap = bgTex;
+        mat.emissiveIntensity = 1;
+        mat.useLighting = false;
+        mat.update();
+        bgPlane.model.material = mat;
+        cameraEntity.addChild(bgPlane);
+        */
         // ----- Lighting -----
         const light = new pc.Entity("mainLight");
         light.addComponent('light', {
@@ -451,22 +342,6 @@ export async function initializeViewer(config, instanceId) {
         light.lookAt(0, 0, 0);
         app.root.addChild(light);
 
-        // ----- Resize / viewport / FOV change handling -----
-        const onAppResize = () => {
-            ({ tex: rtTexture, rt: renderTarget } = createRTFor(cameraEntity.camera));
-            textureCamera.camera.renderTarget = renderTarget;
-
-            // rebrancher la nouvelle texture sur le matériau
-            bgMat.emissiveMap = rtTexture;
-            bgMat.update();
-
-            // même projection / viewport
-            copyCam(cameraEntity, textureCamera);
-            // refaire le fit plein écran (FOV/aspect)
-            fitFullscreenPlane(cameraEntity, bgPlane, 0.5);
-        };
-        app.on('resize', onAppResize);
-
         app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
         app.once('update', () => resetViewerCamera());
 
@@ -562,7 +437,7 @@ export function changeColor(dr, dg, db, er, eg, eb, ei, op, boolTrans) {
         traverse(tubeEntity, node => {
             if (node.render && node.render.meshInstances) {
                 for (let mi of node.render.meshInstances) {
-                    mi.material = matTransparent;
+                    mi.material = tubeTransparent;
                 }
             }
         });