Update viewer.js

viewer.js

@@ -23,12 +23,19 @@ 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;
@@ -134,7 +141,7 @@ export async function initializeViewer(config, instanceId) {
     app.setCanvasFillMode(pc.FILLMODE_NONE);
     app.setCanvasResolution(pc.RESOLUTION_AUTO);
 
-    // Canvas responsive resize
+    // Canvas responsive resize (déclenchera app.on('resize'))
     resizeObserver = new ResizeObserver(entries => {
         entries.forEach(entry => {
             app.resizeCanvas(entry.contentRect.width, entry.contentRect.height);
@@ -145,12 +152,11 @@ export async function initializeViewer(config, instanceId) {
     app.on('destroy', () => resizeObserver.disconnect());
 
     // ----- Load all images as Textures (async, safe for CORS) -----
-    // All of these can fail (network, CORS), so wrap with try/catch if needed.
+    // Note : envAtlas ci-dessous utilise une simple image comme 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);
-    const bgTex       = await loadImageAsTexture('https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/EARCARE/images/banniere_earcare.png', app);
 
     // ----- GLB asset definition -----
     const assets = {
@@ -167,102 +173,134 @@ export async function initializeViewer(config, instanceId) {
     app.scene.skyboxIntensity = 4;
     app.scene.skyboxMip = 0;
 
-    // ----- Load GLBs -----
-    const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
-    loader.load(() => {
-        app.start();
-        if (progressDialog) progressDialog.style.display = 'none';
-
-        const texture = new pc.Texture(app.graphicsDevice, {
-            width: 512,
-            height: 256,
+    // ----- RT helpers -----
+    function createRT(w, h) {
+        if (rtTexture) {
+            rtTexture.destroy();
+            rtTexture = null;
+        }
+        const tex = new pc.Texture(app.graphicsDevice, {
+            width: w,
+            height: h,
             format: pc.PIXELFORMAT_SRGBA8,
-            mipmaps: true,
-            addressU: pc.ADDRESS_CLAMP_TO_EDGE,
-            addressV: pc.ADDRESS_CLAMP_TO_EDGE
+            mipmaps: false   // pas de mips pour une RT dynamique plein écran
         });
-        const renderTarget = new pc.RenderTarget({
+        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: texture,
+            colorBuffer: tex,
             depth: true,
-            //flipY: !app.grapexcludeLayerhicsDevice.isWebGPU,
-            samples: 2
+            samples: 1      // évite un resolve MSAA pour la réutiliser comme texture
         });
+        return { tex, rt };
+    }
+
+    function copyCam(src, dst) {
+        dst.camera.projection = src.camera.projection; // (perspective par défaut)
+        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 fitFullscreenPlane(camEntity, planeEntity, d = 0.5) {
+        const cam = camEntity.camera;
+        const aspect = app.graphicsDevice.width / app.graphicsDevice.height;
+        const fovRad = cam.fov * pc.math.DEG_TO_RAD;
+        const h = 2 * d * Math.tan(fovRad / 2);
+        const w = h * aspect;
+
+        // en espace caméra, face 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);
+    }
+
+    // ----- Load GLBs -----
+    const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
+    loader.load(() => {
+        app.start();
+        if (progressDialog) progressDialog.style.display = 'none';
 
-        const excludedLayer = new pc.Layer({name: 'Excluded'});
+        // --- Layers ---
+        const excludedLayer = new pc.Layer({ name: 'Excluded' });
         app.scene.layers.insert(excludedLayer, 1);
 
-            // get existing layers
-        const worldLayer = app.scene.layers.getLayerByName('World');
+        // get existing layers
+        const worldLayer  = app.scene.layers.getLayerByName('World');
         const skyboxLayer = app.scene.layers.getLayerByName('Skybox');
-        const uiLayer = app.scene.layers.getLayerByName('UI');
+        const uiLayer     = app.scene.layers.getLayerByName('UI');
 
-        // Reorder depth layer for transmission
+        // Reorder depth layer for transmission (si utile)
         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();
 
-        traverse(tubeEntity, (node) => {
-            if (node.render) node.render.layers = [excludedLayer.id];
-          });
-        traverse(filtreEntity, (node) => {
-            if (node.render) node.render.layers = [excludedLayer.id];
-          });
+        // 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.emissiveMap = emitTex;
-        matOpaque.emissiveIntensity = 2;
-        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 = new pc.StandardMaterial();
             tubeTransparent.diffuse = new pc.Color(1, 1, 1);
             tubeTransparent.blendType = pc.BLEND_NORMAL;
-            tubeTransparent.opacity = 0.95;                         
+            tubeTransparent.opacity = 0.95;
             tubeTransparent.depthTest = false;
             tubeTransparent.depthWrite = false;
             tubeTransparent.useMetalness = true;
@@ -271,11 +309,13 @@ export async function initializeViewer(config, instanceId) {
             tubeTransparent.update();
         }
         // Opaque material (tube)
-        {tubeOpaque = new pc.StandardMaterial();
+        {
+            tubeOpaque = new pc.StandardMaterial();
             tubeOpaque.diffuse = new pc.Color(1, 1, 1);
-            tubeOpaque.opacity = 0.9;                         
+            tubeOpaque.opacity = 0.9;
             tubeOpaque.update();
         }
+
         // ----- Assign materials to meshes -----
         traverse(modelEntity, node => {
             if (node.render && node.render.meshInstances) {
@@ -305,7 +345,7 @@ export async function initializeViewer(config, instanceId) {
         filtreEntity.setLocalScale(modelScale, modelScale, modelScale);
         filtreEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
 
-        // ----- Camera + Orbit Controls -----
+        // ----- Main camera + Orbit Controls -----
         cameraEntity = new pc.Entity('camera');
         cameraEntity.addComponent('camera', {
             clearColor: new pc.Color(0.8, 0.8, 0.8, 1),
@@ -335,60 +375,39 @@ export async function initializeViewer(config, instanceId) {
         cameraEntity.script.create('orbitCameraInputTouch');
         app.root.addChild(cameraEntity);
 
-        // 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;
-            }
-        }*/
+        // ----- Texture camera (rend Excluded vers RT) -----
+        ({ tex: rtTexture, rt: renderTarget } = createRT(app.graphicsDevice.width, app.graphicsDevice.height));
 
-        const textureCamera = new pc.Entity('TextureCamera');
+        textureCamera = new pc.Entity('TextureCamera');
         textureCamera.addComponent('camera', {
-            clearColor: new pc.Color(0.8, 0.8, 0.8, 1),
-            layers: [excludedLayer.id, /*skyboxLayer.id*/],
+            clearColor: new pc.Color(0, 0, 0, 0),
+            layers: [excludedLayer.id /*, skyboxLayer.id*/],
             toneMapping: pc.TONEMAP_NEUTRAL,
-
-            // set the priority of textureCamera to lower number than the priority of the main camera (which is at default 0)
-            // to make it rendered first each frame
-            priority: -1,
-
-            // this camera renders into texture target
-            renderTarget: renderTarget
+            priority: -1,              // rendre avant la caméra principale
+            renderTarget: renderTarget // sortie vers la RT
         });
+        // on veut la même pose → enfant de la caméra principale
         cameraEntity.addChild(textureCamera);
+        // et la même projection
+        copyCam(cameraEntity, textureCamera);
 
-        /*if (skyboxLayer) {
-            const camLayers = textureCamera.camera.layers.slice();
-            const idx = camLayers.indexOf(skyboxLayer.id);
-            if (idx !== -1) {
-                camLayers.splice(idx, 1);
-                textureCamera.camera.layers = camLayers;
-            }
-        }*/
+        // ----- Background plane plein écran (espace caméra) -----
+        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 apparaît inversée verticalement, décommente ces 2 lignes :
+        // bgMat.emissiveMapTiling.set(1, -1);
+        // bgMat.emissiveMapOffset.set(0, 1);
+        bgMat.cull = pc.CULLFACE_NONE; // visible des deux côtés (sécurité)
+        bgMat.update();
 
-        // ----- Camera-attached background plane -----
-        const bgPlane = new pc.Entity("Plane");
-        bgPlane.addComponent("model", { type: "plane" });
-        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.emissive = new pc.Color(1, 1, 1);
-        mat.emissiveMap = texture;
-        mat.emissiveIntensity = 1;
-        mat.useLighting = false;
-        mat.cull = pc.CULLFACE_NONE;
-        mat.update();
-        bgPlane.model.material = mat;
-        cameraEntity.addChild(bgPlane);
-
-        
+        bgPlane.model.material = bgMat;
+        // placement plein écran devant la caméra (et parentée à la caméra)
+        fitFullscreenPlane(cameraEntity, bgPlane, 0.5);
 
         // ----- Lighting -----
         const light = new pc.Entity("mainLight");
@@ -401,6 +420,23 @@ export async function initializeViewer(config, instanceId) {
         light.lookAt(0, 0, 0);
         app.root.addChild(light);
 
+        // ----- Resize handling -----
+        const onAppResize = () => {
+            // resize RT à la nouvelle résolution
+            ({ tex: rtTexture, rt: renderTarget } = createRT(app.graphicsDevice.width, app.graphicsDevice.height));
+            textureCamera.camera.renderTarget = renderTarget;
+
+            // rebrancher la nouvelle texture sur le matériau
+            bgMat.emissiveMap = rtTexture;
+            bgMat.update();
+
+            // s'assurer que la projection/cadre correspondent toujours
+            copyCam(cameraEntity, textureCamera);
+            // refaire le fit plein écran
+            fitFullscreenPlane(cameraEntity, bgPlane, 0.5);
+        };
+        app.on('resize', onAppResize);
+
         app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
         app.once('update', () => resetViewerCamera());