Update viewer.js

viewer.js

@@ -178,15 +178,85 @@ export async function initializeViewer(config, instanceId) {
         app.scene.layers.remove(depthLayer);
         app.scene.layers.insertOpaque(depthLayer, 2);
 
+        //create texture and render target foro rendering into, including depth buffer
+        const texture = new pc.Texture(app.graphicsDevice, {
+            width: 512,
+            height: 256,
+            format: pc.PIXELFORMAT_R8_G8_B8_A8,
+            mipmaps: true,
+            addressU: pc.ADDRESS_CLAMP_TO_EDGE,
+            addressV: pc.ADDRESS_CLAMP_TO_EDGE,
+        });
+        const renderTarget = new pc.RenderTarget({
+            name :'RT',
+            colorBuffer: texture,
+            depth: true,
+            flipY: !app.graphicsDevice.isWebGPU,
+            samples: 2
+        });
+
+        const excludeLayer = new pc.Layer({name : 'Excluded'});
+        app.scene.layers.insert(excludeLayer, 1);
+
+        const tubeLayer = new pc.Layer({name : 'TubeLayer'});
+        app.scene.layers.insert(tubeLayer, 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');
+
         // Instantiate GLB entities
         modelEntity = assets.model.resource.instantiateRenderEntity();
         tubeEntity = assets.tube.resource.instantiateRenderEntity();
         filtreEntity = assets.filtre.resource.instantiateRenderEntity();
-
+        
         app.root.addChild(modelEntity);
         app.root.addChild(tubeEntity);
         app.root.addChild(filtreEntity);
 
+
+
+
+
+
+
+        //precise dans quel layer les tubes sont visibles
+        traverse(tubeEntity, node => {
+            if(node.render && node.render.meshInstances){
+                for(let mi of node.render.meshInstances){
+                    mi.layer = tubeLayer.id;
+                }
+            }
+        });
+
+        //precise dans quel layer les filtres sont visibles
+        traverse(filtreEntity, node => {
+            if(node.render && node.render.meshInstances){
+                for(let mi of node.render.meshInstances){
+                    mi.layer = tubeLayer.id;
+                }
+            }
+        });
+
+
+        //test avec modele separe du reste 
+        const modelLayer = new pc.Layer({name : 'ModelLayer'});
+        app.scene.layers.insert(tubeLayer, 1);
+        traverse(modelEntity, node => {
+            if(node.render && node.render.meshInstances){
+                for(let mi of node.render.meshInstances){
+                    mi.layer = modelLayer.id;
+                }
+            }
+        });
+
+
+
+
+
+
+
         // ----- Materials Setup -----
         // Transparent material (main model)
         matTransparent = new pc.StandardMaterial();
@@ -274,9 +344,11 @@ export async function initializeViewer(config, instanceId) {
         filtreEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
 
         // ----- Camera + Orbit Controls -----
+        //test : si je mets pas le skyboxLayer la, j'ai pas besoin de l'enlever apres
         cameraEntity = new pc.Entity('camera');
         cameraEntity.addComponent('camera', {
             clearColor: new pc.Color(0.8, 0.8, 0.8, 1),
+            layers:[modelLayer.id, skyboxLayer.id, uiLayer.id],
             toneMapping: pc.TONEMAP_NEUTRAL
         });
         cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
@@ -303,7 +375,6 @@ export async function initializeViewer(config, instanceId) {
         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);
@@ -312,25 +383,49 @@ export async function initializeViewer(config, instanceId) {
                 cameraEntity.camera.layers = camLayers;
             }
         }
-/*
+
+        const textureCamera = new pc.Entity('TextureCamera');
+        textureCamera.addComponent('camera', {
+            layers: [tubeLayer.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
+        });
+        cameraEntity.addChild(textureCamera);
+
         // ----- Camera-attached background plane -----
         const bgPlane = new pc.Entity("Plane");
-        bgPlane.addComponent("model", { type: "plane" });
+        bgPlane.addComponent("model", { 
+            type: "plane",
+            layers: excludeLayer
+        });
+
         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.emissiveMap = texture;
         mat.useLighting = false;
         mat.update();
-        bgPlane.model.material = mat;
+
+        traverse(bgPlane, node => {
+            if (node.render && node.render.meshInstances) {
+                for (let mi of node.render.meshInstances) {
+                    mi.material = mat;
+                }
+            }
+        });
         cameraEntity.addChild(bgPlane);
-        */
+
+
+
         // ----- Lighting -----
         const light = new pc.Entity("mainLight");
         light.addComponent('light', {