Update viewer.js

viewer.js

@@ -10,526 +10,479 @@ let bouchonEntity = null;
 let viewerInitialized = false;
 let resizeObserver = null;
 
-// These will hold references to the material(s) you want to update.
 let matTransparent = null;
 let matOpaque = null;
 let tubeTransparent = null;
 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;
 
-// RECURSIVE ENTITY TRAVERSAL (needed for material assignment)
+let tubeRenderTarget = null;
+let tubeTexture = null;
+let rtCameraEntity = null;
+let tubeBgPlane = null;
+
 function traverse(entity, callback) {
-  callback(entity);
-  if (entity.children) {
-    entity.children.forEach(child => traverse(child, callback));
-  }
+    callback(entity);
+    if (entity.children) {
+        entity.children.forEach(child => traverse(child, callback));
+    }
 }
 
 export async function initializeViewer(config, instanceId) {
-  if (viewerInitialized) return;
-
-  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
-  const isMobile = isIOS || /Android/i.test(navigator.userAgent);
-
-  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;
-  maxAngle = Infinity;
-  minAzimuth = -Infinity;
-  maxAzimuth = Infinity;
-  minPivotY = 0;
-  minY = -10;
-
-  modelX = 0;
-  modelY = 0;
-  modelZ = 0;
-  modelScale = 1;
-  modelRotationX = 0;
-  modelRotationY = 0;
-  modelRotationZ = 0;
-
-  const cameraX = 0;
-  const cameraY = 0;
-  const cameraZ = 1;
-  const cameraXPhone = 0;
-  const cameraYPhone = 0;
-  const cameraZPhone = 1;
-
-  chosenCameraX = isMobile ? cameraXPhone : cameraX;
-  chosenCameraY = isMobile ? cameraYPhone : cameraY;
-  chosenCameraZ = isMobile ? cameraZPhone : cameraZ;
-
-  
-
-  const canvasId = 'canvas-' + instanceId;
-  const progressDialog = document.getElementById('progress-dialog-' + instanceId);
-  const progressIndicator = document.getElementById('progress-indicator-' + instanceId);
-  const viewerContainer = document.getElementById('viewer-container-' + instanceId);
-
-  let oldCanvas = document.getElementById(canvasId);
-  if (oldCanvas) oldCanvas.remove();
-
-  const canvas = document.createElement('canvas');
-  canvas.id = canvasId;
-  canvas.className = 'ply-canvas';
-  canvas.style.width = "100%";
-  canvas.style.height = "100%";
-  canvas.setAttribute('tabindex', '0');
-  // Safer insert:
-  if (progressDialog) {
-    viewerContainer.insertBefore(canvas, progressDialog);
-  } else {
-    viewerContainer.appendChild(canvas);
-  }
-
-  canvas.style.touchAction = "none";
-  canvas.style.webkitTouchCallout = "none";
-  canvas.addEventListener('gesturestart', e => e.preventDefault());
-  canvas.addEventListener('gesturechange', e => e.preventDefault());
-  canvas.addEventListener('gestureend', e => e.preventDefault());
-  canvas.addEventListener('dblclick', e => e.preventDefault());
-  canvas.addEventListener('touchstart', e => { if (e.touches.length > 1) e.preventDefault(); }, { passive: false });
-
-  canvas.addEventListener('wheel', (e) => {
-    e.preventDefault();
-  }, { passive: false });
-
-  if (progressDialog) progressDialog.style.display = 'block';
-
-  if (!pc) {
-    pc = await import("https://esm.run/playcanvas");
-    window.pc = pc;
-  }
-
-  // Create app first
-  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",
-    antialias: false
-  });
-  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,
-    pc.GSplatComponentSystem,
-    pc.CollisionComponentSystem,
-    pc.RigidbodyComponentSystem
-  ];
-  opts.resourceHandlers = [
-    pc.TextureHandler,
-    pc.ContainerHandler,
-    pc.ScriptHandler,
-    pc.GSplatHandler
-  ];
-
-  app = new pc.Application(canvas, opts);
-  app.setCanvasFillMode(pc.FILLMODE_NONE);
-  app.setCanvasResolution(pc.RESOLUTION_AUTO);
-
-  resizeObserver = new ResizeObserver(entries => {
-    entries.forEach(entry => {
-      app.resizeCanvas(entry.contentRect.width, entry.contentRect.height);
+    if (viewerInitialized) return;
+
+    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
+    const isMobile = isIOS || /Android/i.test(navigator.userAgent);
+
+    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;
+    maxAngle = Infinity;
+    minAzimuth = -Infinity;
+    maxAzimuth = Infinity;
+    minPivotY = 0;
+    minY = -10;
+
+    modelX = 0; modelY = 0; modelZ = 0;
+    modelScale = 1;
+    modelRotationX = 0; modelRotationY = 0; modelRotationZ = 0;
+
+    const cameraX = 0, cameraY = 0, cameraZ = 1;
+    chosenCameraX = isMobile ? cameraX : cameraX;
+    chosenCameraY = isMobile ? cameraY : cameraY;
+    chosenCameraZ = isMobile ? cameraZ : cameraZ;
+
+    const canvasId = 'canvas-' + instanceId;
+    const progressDialog = document.getElementById('progress-dialog-' + instanceId);
+    const viewerContainer = document.getElementById('viewer-container-' + instanceId);
+
+    let oldCanvas = document.getElementById(canvasId);
+    if (oldCanvas) oldCanvas.remove();
+
+    const canvas = document.createElement('canvas');
+    canvas.id = canvasId;
+    canvas.className = 'ply-canvas';
+    canvas.style.width = "100%";
+    canvas.style.height = "100%";
+    canvas.setAttribute('tabindex', '0');
+    if (progressDialog) viewerContainer.insertBefore(canvas, progressDialog);
+    else viewerContainer.appendChild(canvas);
+
+    canvas.style.touchAction = "none";
+    canvas.style.webkitTouchCallout = "none";
+    canvas.addEventListener('gesturestart', e => e.preventDefault());
+    canvas.addEventListener('gesturechange', e => e.preventDefault());
+    canvas.addEventListener('gestureend', e => e.preventDefault());
+    canvas.addEventListener('dblclick', e => e.preventDefault());
+    canvas.addEventListener('touchstart', e => { if (e.touches.length > 1) e.preventDefault(); }, { passive: false });
+    canvas.addEventListener('wheel', (e) => { e.preventDefault(); }, { passive: false });
+
+    if (progressDialog) progressDialog.style.display = 'block';
+
+    if (!pc) {
+        pc = await import("https://esm.run/playcanvas");
+        window.pc = pc;
+    }
+
+    // --- Graphics Device/Options ---
+    const device = await pc.createGraphicsDevice(canvas, {
+        deviceTypes: [isIOS ? "webgl1" : "webgl2", "webgl1"], // Prefer WebGL1 on iOS
+        glslangUrl: "https://playcanvas.vercel.app/static/lib/glslang/glslang.js",
+        twgslUrl: "https://playcanvas.vercel.app/static/lib/twgsl/twgsl.js",
+        antialias: false
     });
-  });
-  resizeObserver.observe(viewerContainer);
-
-  window.addEventListener('resize', () => app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight));
-  app.on('destroy', () => resizeObserver.disconnect());
-
-  // --- 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 }
-    )
-  };
-
-  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.skyboxRotation = new pc.Quat().setFromEulerAngles(30, 20, 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);
-
-    loader.load(() => {
-      app.start();
-      if (progressDialog) progressDialog.style.display = 'none';
-
-      // 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);
-
-      // 1. Models
-      modelEntity = assets.model.resource.instantiateRenderEntity();
-      tubeEntity = assets.tube.resource.instantiateRenderEntity();
-      bouchonEntity = assets.bouchon.resource.instantiateRenderEntity();
-
-      app.root.addChild(modelEntity);
-      app.root.addChild(tubeEntity);
-      //app.root.addChild(bouchonEntity);
-
-      // 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;
-      
-            //mat transparent
-      matTransparent = new pc.StandardMaterial();
-      matTransparent.blendType = pc.BLEND_NORMAL;
-      matTransparent.diffuse = new pc.Color(0.7, 0.05, 0.05);
-      matTransparent.specular = new pc.Color(0.01, 0.01, 0.01);
-      matTransparent.shininess = 90;
-      matTransparent.gloss = 1;
-      matTransparent.metalness = 0.0;
-      matTransparent.useMetalness = true;
-      matTransparent.useDynamicRefraction = true;
-      matTransparent.depthWrite = true;
-      matTransparent.refraction= 0.8;
-      matTransparent.refractionIndex = 1;
-      matTransparent.thickness = 0.02;
-      matTransparent.thicknessMap = thickness;
-      matTransparent.opacityMap = op;
-      matTransparent.opacityMapChannel = "r";
-      matTransparent.opacity = 0.97;
-      matTransparent.emissive = new pc.Color(0.372, 0.03, 0.003);
-      matTransparent.emissiveMap = ao;
-      matTransparent.emissiveIntensity = 0.1;
-      matTransparent.update();
-
-
-            //mat opaque
-      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.shininess = 90;
-      matOpaque.gloss = 1;
-      matOpaque.metalness = 0.0;
-      matOpaque.opacityMap = op;
-      matOpaque.opacityMapChannel = "r";
-      matOpaque.opacity = 1;
-      matOpaque.emissive = new pc.Color(0.372, 0.03, 0.003);
-      matOpaque.emissiveMap = ao;
-      matOpaque.emissiveIntensity = 2;
-      matOpaque.update();
-
-
-
-
-      //material for the tube
-        //transparent
-      tubeTransparent = new pc.StandardMaterial();
-      tubeTransparent.diffuse = new pc.Color(1, 1, 1);
-      tubeTransparent.blendType = pc.BLEND_NORMAL;
-      tubeTransparent.opacity = 0.1;                         
-      tubeTransparent.depthTest = false;
-      tubeTransparent.depthWrite = false;
-      tubeTransparent.useMetalness = true;
-      tubeTransparent.useDynamicRefraction = true;
-      tubeTransparent.thickness = 4;
-      tubeTransparent.update();
-      
-
-        //opaque
-      tubeOpaque = new pc.StandardMaterial();
-      tubeOpaque.diffuse = new pc.Color(1, 1, 1);
-      tubeOpaque.opacity = 0.97;                         
-      tubeOpaque.update();
-      
-      traverse(modelEntity, node => {
-        if (node.render && node.render.meshInstances) {
-          for (let mi of node.render.meshInstances) {
-            mi.material = matOpaque;
-          }
-        }
-      });
-      
-      
-      traverse(tubeEntity, node => {
-        if (node.render && node.render.meshInstances) {
-          for (let mi of node.render.meshInstances) {
-            mi.material = tubeOpaque;
-          }
-        }
-      });
-
-
-      
-      // Do NOT override materials for bouchonEntity!
-
-      // 3. Position/scale/orientation
-      modelEntity.setPosition(modelX, modelY, modelZ);
-      modelEntity.setLocalScale(modelScale, modelScale, modelScale);
-      modelEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
-
-      tubeEntity.setPosition(modelX, modelY, modelZ);
-      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);
-
-      // 4. Camera & orbit
-      
-      cameraEntity = new pc.Entity('camera');
-      cameraEntity.addComponent('camera', {
-        clearColor: new pc.Color(1, 1, 1, 1),
-        toneMapping: pc.TONEMAP_NEUTRAL
-      });
-      cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
-      cameraEntity.lookAt(modelEntity.getPosition());
-      cameraEntity.addComponent('script');
-
-      // --- **CRITICAL** for KHR_materials_transmission! ---
-      cameraEntity.camera.requestSceneColorMap(true);
-
-      cameraEntity.script.create('orbitCamera', {
-        attributes: {
-          focusEntity: modelEntity,
-          inertiaFactor: 0.2,
-          distanceMax: maxZoom,
-          distanceMin: minZoom,
-          pitchAngleMax: maxAngle,
-          pitchAngleMin: minAngle,
-          yawAngleMax: maxAzimuth,
-          yawAngleMin: minAzimuth,
-          minY: minY,
-          frameOnStart: false
-        }
-      });
-      cameraEntity.script.create('orbitCameraInputMouse');
-      cameraEntity.script.create('orbitCameraInputTouch');
-      app.root.addChild(cameraEntity);
-
-      // Remove the Skybox layer from the camera
-      const skyboxLayer = app.scene.layers.getLayerByName("Skybox");
-      const camLayers = cameraEntity.camera.layers.slice();
-      const idx = camLayers.indexOf(skyboxLayer.id);
-      if (idx !== -1) {
-          camLayers.splice(idx, 1);
-          cameraEntity.camera.layers = camLayers;
-      }
-
-      // --- Add this block for a cube parented to the camera ---
-      // Create the cube
-
-      const bgTex = assets.bg_tex.resource;
-      const bgPlane = new pc.Entity("Plane");
-      bgPlane.addComponent("model", { type: "plane" });
-      // Set the cube's local position relative to the camera
-      bgPlane.setLocalPosition(0, 0, -10); // 2 units in front of camera
-      // Optionally, scale or color the cube
-      bgPlane.setLocalScale(11, 1, 5.5);
-      bgPlane.setLocalEulerAngles(90, 0, 0);
-      
-      // Simple material for visibility
-      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;
-      
-      // Parent to the camera
-      cameraEntity.addChild(bgPlane);
-      
-      // 5. Light
-      const light = new pc.Entity("mainLight");
-      light.addComponent('light',{
-        type: "directional",
-        color: new pc.Color(1, 1, 1),
-        intensity: 0.9,
-      });
-      light.setPosition(0, 1, -1);
-      light.lookAt(0, 0, 0);
-      app.root.addChild(light);
-
-      app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
-
-      app.once('update', () => resetViewerCamera());
-
-      // Tooltips supported if tooltips_url set
-      try {
-        if (config.tooltips_url) {
-          import('./tooltips.js').then(tooltipsModule => {
-            tooltipsModule.initializeTooltips({
-              app,
-              cameraEntity,
-              modelEntity,
-              tooltipsUrl: config.tooltips_url,
-              defaultVisible: !!config.showTooltipsDefault,
-              moveDuration: config.tooltipMoveDuration || 0.6
+    device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+
+    const opts = new pc.AppOptions();
+    opts.graphicsDevice = device;
+    opts.mouse = new pc.Mouse(document.body);
+    opts.touch = new pc.TouchDevice(document.body);
+    opts.keyboard = new pc.Keyboard(document.body);
+    opts.componentSystems = [
+        pc.RenderComponentSystem,
+        pc.CameraComponentSystem,
+        pc.LightComponentSystem,
+        pc.ScriptComponentSystem,
+        pc.GSplatComponentSystem,
+        pc.CollisionComponentSystem,
+        pc.RigidbodyComponentSystem
+    ];
+    opts.resourceHandlers = [
+        pc.TextureHandler,
+        pc.ContainerHandler,
+        pc.ScriptHandler,
+        pc.GSplatHandler
+    ];
+
+    app = new pc.AppBase(canvas);
+    app.init(opts);
+
+    app.setCanvasFillMode(pc.FILLMODE_NONE);
+    app.setCanvasResolution(pc.RESOLUTION_AUTO);
+
+    // Resize logic
+    const resize = () => app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
+    window.addEventListener('resize', resize);
+    app.on('destroy', () => { window.removeEventListener('resize', resize); });
+
+    // --- 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 }
+        )
+    };
+    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.skyboxRotation = new pc.Quat().setFromEulerAngles(30, 20, 0);
+        app.scene.skyboxIntensity = 4;
+        app.scene.skyboxMip = 0;
+
+        // Load all GLBs & textures
+        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);
+
+        loader.load(() => {
+            app.start();
+            if (progressDialog) progressDialog.style.display = 'none';
+
+            // Reorder depth layer
+            const depthLayer = app.scene.layers.getLayerById(pc.LAYERID_DEPTH);
+            app.scene.layers.remove(depthLayer);
+            app.scene.layers.insertOpaque(depthLayer, 2);
+
+            // Entities
+            modelEntity = assets.model.resource.instantiateRenderEntity();
+            tubeEntity = assets.tube.resource.instantiateRenderEntity();
+            bouchonEntity = assets.bouchon.resource.instantiateRenderEntity();
+
+            app.root.addChild(modelEntity);
+            app.root.addChild(tubeEntity);
+
+            // --- Render Target For Tube ---
+            const rtWidth = device.width;
+            const rtHeight = device.height;
+            tubeTexture = new pc.Texture(device, {
+                width: rtWidth,
+                height: rtHeight,
+                format: pc.PIXELFORMAT_R8_G8_B8_A8,
+                autoMipmap: false
             });
-          }).catch(e => {
-            // Tooltips optional: fail silently if missing
-          });
-        }
-      } catch (e) {
-        // Tooltips optional, fail silently
-      }
-
-      viewerInitialized = true;
-    });
-  });
+            tubeRenderTarget = new pc.RenderTarget({
+                colorBuffer: tubeTexture,
+                depth: true
+            });
+
+            // 2. Materials
+            const ao = assets.ao_map.resource;
+            const op = assets.op_map.resource;
+            const thickness = assets.thickness_map.resource;
+
+            matTransparent = new pc.StandardMaterial();
+            matTransparent.blendType = pc.BLEND_NORMAL;
+            matTransparent.diffuse = new pc.Color(0.7, 0.05, 0.05);
+            matTransparent.specular = new pc.Color(0.01, 0.01, 0.01);
+            matTransparent.shininess = 90;
+            matTransparent.gloss = 1;
+            matTransparent.metalness = 0.0;
+            matTransparent.useMetalness = true;
+            matTransparent.depthWrite = true;
+            matTransparent.refraction = 0.8;
+            matTransparent.refractionIndex = 1;
+            matTransparent.thickness = 0.02;
+            matTransparent.thicknessMap = thickness;
+            matTransparent.opacityMap = op;
+            matTransparent.opacityMapChannel = "r";
+            matTransparent.opacity = 0.97;
+            matTransparent.emissive = new pc.Color(0.372, 0.03, 0.003);
+            matTransparent.emissiveMap = ao;
+            matTransparent.emissiveIntensity = 0.1;
+            matTransparent.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.shininess = 90;
+            matOpaque.gloss = 1;
+            matOpaque.metalness = 0.0;
+            matOpaque.opacityMap = op;
+            matOpaque.opacityMapChannel = "r";
+            matOpaque.opacity = 1;
+            matOpaque.emissive = new pc.Color(0.372, 0.03, 0.003);
+            matOpaque.emissiveMap = ao;
+            matOpaque.emissiveIntensity = 2;
+            matOpaque.update();
+
+            tubeTransparent = new pc.StandardMaterial();
+            tubeTransparent.diffuse = new pc.Color(1, 1, 1);
+            tubeTransparent.blendType = pc.BLEND_NORMAL;
+            tubeTransparent.opacity = 0.1;
+            tubeTransparent.depthTest = false;
+            tubeTransparent.depthWrite = false;
+            tubeTransparent.useMetalness = true;
+            tubeTransparent.thickness = 4;
+            tubeTransparent.update();
+
+            tubeOpaque = new pc.StandardMaterial();
+            tubeOpaque.diffuse = new pc.Color(1, 1, 1);
+            tubeOpaque.opacity = 0.97;
+            tubeOpaque.update();
+
+            traverse(modelEntity, node => {
+                if (node.render && node.render.meshInstances) {
+                    for (let mi of node.render.meshInstances) {
+                        mi.material = matOpaque;
+                    }
+                }
+            });
+
+            traverse(tubeEntity, node => {
+                if (node.render && node.render.meshInstances) {
+                    for (let mi of node.render.meshInstances) {
+                        mi.material = tubeTransparent;
+                    }
+                }
+            });
+
+            // --- 3. Position/scale/orientation
+            modelEntity.setPosition(modelX, modelY, modelZ);
+            modelEntity.setLocalScale(modelScale, modelScale, modelScale);
+            modelEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
+
+            tubeEntity.setPosition(modelX, modelY, modelZ);
+            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);
+
+            // --- 4. Camera & orbit
+            // (A) RENDER-TARGET CAMERA for Tube
+            rtCameraEntity = new pc.Entity('rt-camera');
+            rtCameraEntity.addComponent('camera', {
+                clearColor: new pc.Color(1, 1, 1, 0), // Transparent BG
+                fov: 60,
+                frustumCulling: true,
+            });
+            rtCameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
+            rtCameraEntity.lookAt(modelEntity.getPosition());
+            app.root.addChild(rtCameraEntity);
+
+            // (B) MAIN CAMERA for Scene (and shell)
+            cameraEntity = new pc.Entity('camera');
+            cameraEntity.addComponent('camera', {
+                clearColor: new pc.Color(1, 1, 1, 1),
+                toneMapping: pc.TONEMAP_NEUTRAL
+            });
+            cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
+            cameraEntity.lookAt(modelEntity.getPosition());
+            cameraEntity.addComponent('script');
+            cameraEntity.camera.requestSceneColorMap(true);
+            cameraEntity.script.create('orbitCamera', {
+                attributes: {
+                    focusEntity: modelEntity,
+                    inertiaFactor: 0.2,
+                    distanceMax: maxZoom,
+                    distanceMin: minZoom,
+                    pitchAngleMax: maxAngle,
+                    pitchAngleMin: minAngle,
+                    yawAngleMax: maxAzimuth,
+                    yawAngleMin: minAzimuth,
+                    minY: minY,
+                    frameOnStart: false
+                }
+            });
+            cameraEntity.script.create('orbitCameraInputMouse');
+            cameraEntity.script.create('orbitCameraInputTouch');
+            app.root.addChild(cameraEntity);
+
+            // Remove the Skybox layer from the camera
+            const skyboxLayer = app.scene.layers.getLayerByName("Skybox");
+            const camLayers = cameraEntity.camera.layers.slice();
+            const idx = camLayers.indexOf(skyboxLayer.id);
+            if (idx !== -1) {
+                camLayers.splice(idx, 1);
+                cameraEntity.camera.layers = camLayers;
+            }
 
-  app.assets.load(assets.helipad); // Start by loading the HDR
+            // --- 5. Tube Render Texture as Background
+            // Create a plane that will display the tube render
+            tubeBgPlane = new pc.Entity("TubeBG");
+            tubeBgPlane.addComponent("model", { type: "plane" });
+            tubeBgPlane.setLocalScale(10, 1, 10);
+            tubeBgPlane.setLocalPosition(0, 0, -0.2);
+            tubeBgPlane.setLocalEulerAngles(90, 0, 0);
+            const tubeBgMat = new pc.StandardMaterial();
+            tubeBgMat.diffuse = new pc.Color(1, 1, 1);
+            tubeBgMat.diffuseMap = tubeTexture;
+            tubeBgMat.opacityMap = tubeTexture;
+            tubeBgMat.blendType = pc.BLEND_NORMAL;
+            tubeBgMat.opacity = 1.0;
+            tubeBgMat.update();
+            tubeBgPlane.model.material = tubeBgMat;
+            cameraEntity.addChild(tubeBgPlane);
+
+            // 6. Light
+            const light = new pc.Entity("mainLight");
+            light.addComponent('light', {
+                type: "directional",
+                color: new pc.Color(1, 1, 1),
+                intensity: 0.9,
+            });
+            light.setPosition(0, 1, -1);
+            light.lookAt(0, 0, 0);
+            app.root.addChild(light);
+
+            app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
+
+            // --- Render Loop Hook ---
+            app.on('prerender', function () {
+                // Hide shell, render tube only to RT
+                modelEntity.enabled = false;
+                tubeEntity.enabled = true;
+                rtCameraEntity.enabled = true;
+                cameraEntity.enabled = false;
+                app.graphicsDevice.renderTarget = tubeRenderTarget;
+                app.render();
+                app.graphicsDevice.renderTarget = null;
+                // Restore shell, render shell (and tube RT) to main camera
+                modelEntity.enabled = true;
+                tubeEntity.enabled = false;
+                rtCameraEntity.enabled = false;
+                cameraEntity.enabled = true;
+            });
 
+            // --- Reset camera after update
+            app.once('update', () => resetViewerCamera());
+
+            // Tooltips supported if tooltips_url set
+            try {
+                if (config.tooltips_url) {
+                    import('./tooltips.js').then(tooltipsModule => {
+                        tooltipsModule.initializeTooltips({
+                            app,
+                            cameraEntity,
+                            modelEntity,
+                            tooltipsUrl: config.tooltips_url,
+                            defaultVisible: !!config.showTooltipsDefault,
+                            moveDuration: config.tooltipMoveDuration || 0.6
+                        });
+                    }).catch(e => { /* ignore */ });
+                }
+            } catch (e) {}
+
+            viewerInitialized = true;
+        });
+    });
+    app.assets.load(assets.helipad);
 }
 
+// -- Reset camera etc...
 export function resetViewerCamera() {
-  try {
-    if (!cameraEntity || !modelEntity || !app) return;
-    const orbitCam = cameraEntity.script.orbitCamera;
-    if (!orbitCam) return;
-
-    const modelPos = modelEntity.getPosition();
-    const tempEnt = new pc.Entity();
-    tempEnt.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
-    tempEnt.lookAt(modelPos);
-
-    const dist = new pc.Vec3().sub2(
-      new pc.Vec3(chosenCameraX, chosenCameraY, chosenCameraZ),
-      modelPos
-    ).length();
-
-    cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
-    cameraEntity.lookAt(modelPos);
-
-    orbitCam.pivotPoint = modelPos.clone();
-    orbitCam._targetDistance = dist;
-    orbitCam._distance       = dist;
-
-    const rot = tempEnt.getRotation();
-    const fwd = new pc.Vec3();
-    rot.transformVector(pc.Vec3.FORWARD, fwd);
-
-    const yaw = Math.atan2(-fwd.x, -fwd.z) * pc.math.RAD_TO_DEG;
-    const yawQuat = new pc.Quat().setFromEulerAngles(0, -yaw, 0);
-    const rotNoYaw = new pc.Quat().mul2(yawQuat, rot);
-    const fNoYaw = new pc.Vec3();
-    rotNoYaw.transformVector(pc.Vec3.FORWARD, fNoYaw);
-    const pitch = Math.atan2(fNoYaw.y, -fNoYaw.z) * pc.math.RAD_TO_DEG;
-
-    orbitCam._targetYaw   = yaw;
-    orbitCam._yaw         = yaw;
-    orbitCam._targetPitch = pitch;
-    orbitCam._pitch       = pitch;
-    if (orbitCam._updatePosition) orbitCam._updatePosition();
-
-    tempEnt.destroy();
-  } catch (e) {
-    // Silent fail
-  }
+    try {
+        if (!cameraEntity || !modelEntity || !app) return;
+        const orbitCam = cameraEntity.script.orbitCamera;
+        if (!orbitCam) return;
+        const modelPos = modelEntity.getPosition();
+        const tempEnt = new pc.Entity();
+        tempEnt.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
+        tempEnt.lookAt(modelPos);
+        const dist = new pc.Vec3().sub2(
+            new pc.Vec3(chosenCameraX, chosenCameraY, chosenCameraZ),
+            modelPos
+        ).length();
+        cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
+        cameraEntity.lookAt(modelPos);
+        orbitCam.pivotPoint = modelPos.clone();
+        orbitCam._targetDistance = dist;
+        orbitCam._distance = dist;
+        const rot = tempEnt.getRotation();
+        const fwd = new pc.Vec3();
+        rot.transformVector(pc.Vec3.FORWARD, fwd);
+        const yaw = Math.atan2(-fwd.x, -fwd.z) * pc.math.RAD_TO_DEG;
+        const yawQuat = new pc.Quat().setFromEulerAngles(0, -yaw, 0);
+        const rotNoYaw = new pc.Quat().mul2(yawQuat, rot);
+        const fNoYaw = new pc.Vec3();
+        rotNoYaw.transformVector(pc.Vec3.FORWARD, fNoYaw);
+        const pitch = Math.atan2(fNoYaw.y, -fNoYaw.z) * pc.math.RAD_TO_DEG;
+        orbitCam._targetYaw = yaw;
+        orbitCam._yaw = yaw;
+        orbitCam._targetPitch = pitch;
+        orbitCam._pitch = pitch;
+        if (orbitCam._updatePosition) orbitCam._updatePosition();
+        tempEnt.destroy();
+    } catch (e) { }
 }
 
-/**
- * Change the main model's diffuse color in real time.
- * r,g,b are floats [0,1]. This is a reusable function for new colors.
- */
 export function changeColor(dr, dg, db, er, eg, eb, ei, op, boolTrans) {
-  
-  //cameraEntity.camera.clearColor = new pc.Color(colorBgR, colorBgG, colorBgB);  
-  if(boolTrans){
-    if (!matTransparent) return;
-
-    matTransparent.diffuse.set(dr, dg, db);
-    matTransparent.emissive.set(er, eg, eb);
-    matTransparent.emissiveIntensity = ei;
-    matTransparent.opacity = op;
-    matTransparent.update();
-
-    tubeTransparent.diffuse.set(dr, dg, db);
-    tubeTransparent.update();
-
-    traverse(modelEntity, node => {
-        if (node.render && node.render.meshInstances) {
-            for (let mi of node.render.meshInstances) {
-                mi.material = matTransparent;
+    if (boolTrans) {
+        if (!matTransparent) return;
+        matTransparent.diffuse.set(dr, dg, db);
+        matTransparent.emissive.set(er, eg, eb);
+        matTransparent.emissiveIntensity = ei;
+        matTransparent.opacity = op;
+        matTransparent.update();
+        tubeTransparent.diffuse.set(dr, dg, db);
+        tubeTransparent.update();
+        traverse(modelEntity, node => {
+            if (node.render && node.render.meshInstances) {
+                for (let mi of node.render.meshInstances) {
+                    mi.material = matTransparent;
+                }
             }
-        }
-    });
-
-    traverse(tubeEntity, node => {
-        if (node.render && node.render.meshInstances) {
-            for (let mi of node.render.meshInstances) {
-                mi.material = tubeTransparent;
+        });
+        traverse(tubeEntity, node => {
+            if (node.render && node.render.meshInstances) {
+                for (let mi of node.render.meshInstances) {
+                    mi.material = tubeTransparent;
+                }
             }
-        }
-    });
-  }else{
-    if (!matOpaque) return;
-
-    matOpaque.diffuse.set(dr, dg, db);
-    matOpaque.emissive.set(er, eg, eb);
-    matOpaque.emissiveIntensity = ei;
-    matOpaque.update();
-
-    traverse(modelEntity, node => {
-        if (node.render && node.render.meshInstances) {
-            for (let mi of node.render.meshInstances) {
-                mi.material = matOpaque;
+        });
+    } else {
+        if (!matOpaque) return;
+        matOpaque.diffuse.set(dr, dg, db);
+        matOpaque.emissive.set(er, eg, eb);
+        matOpaque.emissiveIntensity = ei;
+        matOpaque.update();
+        traverse(modelEntity, node => {
+            if (node.render && node.render.meshInstances) {
+                for (let mi of node.render.meshInstances) {
+                    mi.material = matOpaque;
+                }
             }
-        }
-    });
-
-    traverse(tubeEntity, node => {
-        if (node.render && node.render.meshInstances) {
-            for (let mi of node.render.meshInstances) {
-                mi.material = tubeOpaque;
+        });
+        traverse(tubeEntity, node => {
+            if (node.render && node.render.meshInstances) {
+                for (let mi of node.render.meshInstances) {
+                    mi.material = tubeOpaque;
+                }
             }
-        }
-    });
-  }
+        });
+    }
 }