@eturnity/eturnity_3d 8.10.1 → 8.16.1

package/src/Overlay/ThreeDModelOverlay.js

@@ -1,23 +1,14 @@
 import Overlay from './Overlay'
 import * as THREE from 'three'
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
-import { layerColors } from '../config'
 import {
-  getDistanceBetweenPoints,
   addVector,
   multiplyVector,
-  substractVector,
-  getAngleInDegFromCanvasVector,
-  normalize2DVector,
   isInsidePolygon,
   calculateBestFittingPlanePolygon,
   verticalProjectionOnPlane,
-  vectorLength2D,
-  deltaLatLngToDistance,
   rotateTransformation,
   getStandardDeviation,
 } from '@eturnity/eturnity_maths'
-let Paper
 export default class ThreeDModelOverlay extends Overlay {
   constructor(overlay, emit, origin, loader) {
     super(overlay, emit)
@@ -44,15 +35,6 @@ export default class ThreeDModelOverlay extends Overlay {
     this.geoLocalisation = this.settings.geoLocalisation
   }
   loadFile() {}
-  onLoad() {
-    return new Promise((resolve) => {
-      if (this.isReady) {
-        resolve(this)
-      } else {
-        this.isReadyCallback.push(resolve)
-      }
-    })
-  }
   set3DObjectMaterialOpacity(obj) {
     obj.children.forEach((child) => {
       this.set3DObjectMaterialOpacity(child, this.opacity)
@@ -65,7 +47,6 @@ export default class ThreeDModelOverlay extends Overlay {
     if (this.overlayMesh && this.overlayMesh.children.length == 0) {
       this.overlayMesh = await this.loadFile()
     }
-
     if (!this.isReady) {
       let waitingBall = threeJSComponent.meshes.overlayMeshes[this.id]
       if (!waitingBall) {
@@ -126,9 +107,10 @@ export default class ThreeDModelOverlay extends Overlay {
     this.overlayMesh = overlayMesh
     this.overlayMesh.frustumCulled = false
     this.set3DObjectMaterialOpacity(this.overlayMesh)
+    return overlayMesh
   }
   renderOnPaperJS(paperJSComponent) {
-    Paper = paperJSComponent.paperScope
+    this.Paper = paperJSComponent.paperScope
     if (!this.isActive) {
       return
     }
@@ -139,7 +121,7 @@ export default class ThreeDModelOverlay extends Overlay {
         if (!paperJSComponent.loadingSpinner) {
           return
         }
-        group = new Paper.Group()
+        group = new this.Paper.Group()
 
         group.addChild(this.renderImagePlaceHolder(paperJSComponent))
         group.itemType = 'placeholderOverlays'
@@ -150,7 +132,7 @@ export default class ThreeDModelOverlay extends Overlay {
         this.placeholderPath = group
 
         paperJSComponent.paperLayer['loadingSpinners'].activate()
-        Paper.view.onFrame = (event) => this.animatePlaceholder(event)
+        this.Paper.view.onFrame = (event) => this.animatePlaceholder(event)
       }
       paperJSComponent.paths.imageOverlays[this.id] = group
       this.hasPlaceholderPath = true
@@ -174,7 +156,9 @@ export default class ThreeDModelOverlay extends Overlay {
     let isRotationHandleVisible =
       paperJSComponent.selectedTool == 'selectOverlay' && this.isSelected
 
-    let corners = this.corners.map((p) => paperJSComponent.toCanvasRef(p))
+    const getCorners = () =>
+      this.corners.map((p) => paperJSComponent.toCanvasRef(p))
+    let corners = getCorners()
     if (group) {
       imageOverlayPath = group.children[0]
       handles = this.renderImageOverlayHandles(
@@ -187,8 +171,8 @@ export default class ThreeDModelOverlay extends Overlay {
       group.opacity = this.opacity
       group.transparent = this.opacity != 1
     } else {
-      group = new Paper.Group()
-      imageOverlayPath = this.loadImageOverlay(this.imageUrl, corners)
+      group = new this.Paper.Group()
+      imageOverlayPath = this.loadImageOverlay(this.imageUrl, getCorners)
       this.applyRasterToCorners(imageOverlayPath, corners)
       handles = this.renderImageOverlayHandles(corners, isRotationHandleVisible)
       group.addChild(imageOverlayPath)
@@ -209,15 +193,15 @@ export default class ThreeDModelOverlay extends Overlay {
   renderImagePlaceHolder(paperJSComponent) {
     const toCanvasRef = paperJSComponent.canvasContext.toCanvasRef
 
-    const group = new Paper.Group()
-    const circle = new Paper.Path.Circle({
+    const group = new this.Paper.Group()
+    const circle = new this.Paper.Path.Circle({
       center: toCanvasRef({ x: 0, y: 0 }),
       radius: 50,
       fillColor: '#ffffff80',
     })
     circle.radius = 70
     circle.itemData = 'circle'
-    const fillRectangle = new Paper.Path()
+    const fillRectangle = new this.Paper.Path()
     fillRectangle.fillColor = '#ffffff80'
     fillRectangle.itemType = 'placeholder'
     fillRectangle.itemData = this
@@ -247,92 +231,16 @@ export default class ThreeDModelOverlay extends Overlay {
     circle.scale(scale)
     circle.radius = newRadius
   }
-  loadImageOverlay(url, corners) {
-    let rasterImageOverlay = new Paper.Raster({
-      source: url,
-      crossOrigin: 'Anonymous',
-    })
-    rasterImageOverlay.visible = false
-    rasterImageOverlay.onLoad = () => {
-      this.applyRasterToCorners(rasterImageOverlay, corners)
-    }
-    rasterImageOverlay.data.angle = 0
-    rasterImageOverlay.data.type = 'imageOverlayRaster'
-    rasterImageOverlay.data.overlayId = this.id
-    rasterImageOverlay.data.url = url
-    return rasterImageOverlay
-  }
-  applyRasterToCorners(texture, corners = this.corners) {
-    //remove angle of texture
-    let textureAngle = texture.angle || 0
-    texture.rotate(-textureAngle)
-
-    //make texture the same size to fit corners
-    const textureWidth = texture.bounds.width
-    const textureHeight = texture.bounds.height
-    const frameWidth = getDistanceBetweenPoints(corners[1], corners[0])
-    const frameHeight = getDistanceBetweenPoints(corners[3], corners[0])
-    const center = multiplyVector(0.5, addVector(corners[0], corners[2]))
-    if (texture.bounds.width) {
-      var a = frameWidth / textureWidth
-      var b = 0
-      var c = 0
-      var d = frameHeight / textureHeight
-      texture.transform(new Paper.Matrix(a, b, c, d, 0, 0))
-      //translate to fit top left corner
-      var tx = center.x - texture.bounds.center.x
-      var ty = center.y - texture.bounds.center.y
-      texture.transform(new Paper.Matrix(1, 0, 0, 1, tx, ty))
-      //rotate
-      let angle = getAngleInDegFromCanvasVector(
-        substractVector(corners[0], corners[3])
-      )
-
-      texture.angle = angle
-      texture.rotate(angle)
-    }
-  }
-  renderImageOverlayHandles(corners, rotateHandleVisible, group = null) {
-    let circleHandle
-    let hasPaths = !!group
-    let handles = group || new Paper.Group()
-    let u = normalize2DVector(substractVector(corners[1], corners[0]))
-    let v = normalize2DVector(substractVector(corners[0], corners[3]))
-
-    //rotation handle
-    let center = multiplyVector(0.5, addVector(corners[0], corners[2]))
-
-    let radius = vectorLength2D(substractVector(center, corners[0])) - 10
-    if (!hasPaths) {
-      circleHandle = new Paper.Path.Circle(center, radius)
-      circleHandle.fillColor = layerColors.imageOverlayHandle.fillColor
-      circleHandle.strokeWidth = layerColors.imageOverlayHandle.strokeWidth
-      circleHandle.strokeColor = layerColors.imageOverlayHandle.strokeColor
-      circleHandle.data.type = 'imageOverlayRotateHandle'
-      circleHandle.data.overlayId = this.id
-      circleHandle.radius = radius
-      handles.addChild(circleHandle)
-    } else {
-      circleHandle = handles.children[0]
-      let ratio = radius / circleHandle.radius
-      circleHandle.transform(new Paper.Matrix(ratio, 0, 0, ratio, 0, 0))
-      circleHandle.position = center
-      circleHandle.radius = radius
-    }
-
-    circleHandle.visible = rotateHandleVisible
-    return handles
-  }
   initialiseCornersAndProjectionCamera() {
     const box = new THREE.Box3().setFromObject(this.overlayMesh)
     const boxSize = box.getSize(new THREE.Vector3())
-    this.boxSize = boxSize
     const boxCenter = box.getCenter(new THREE.Vector3())
+    this.boxSize = boxSize
+    this.boxCenter = boxCenter
     const left = -boxSize.x / 2
     const right = +boxSize.x / 2
     const top = +boxSize.y / 2
     const bottom = -boxSize.y / 2
-    this.boxCenter = boxCenter
     const initialCorners = [
       {
         x: 1000 * (boxCenter.x + left),
@@ -374,9 +282,7 @@ export default class ThreeDModelOverlay extends Overlay {
       1000 // far
     )
   }
-  checkGeoLocDataAndOffset() {
-    return
-  }
+  checkGeoLocDataAndOffset() {}
   async initialiseModel() {
     this.overlayMesh = await this.loadFile()
     if (!this.geoLocalisation) {
@@ -442,7 +348,7 @@ export default class ThreeDModelOverlay extends Overlay {
       const imageUrl = canvas.toDataURL()
       scene.remove(light)
       scene.remove(ambientLight)
-      canvas.parentNode.removeChild(canvas)
+      canvas.parentNode?.removeChild(canvas)
       resolve(imageUrl)
     })
   }
@@ -526,18 +432,6 @@ export default class ThreeDModelOverlay extends Overlay {
     })
     return newOutlines
   }
-  createCanvas() {
-    const canvas = document.createElement('canvas')
-    canvas.width = this.canvasWidth
-    canvas.height = this.canvasHeight
-    canvas.style.position = 'fixed'
-    canvas.style.top = '100px'
-    canvas.style.left = '50px'
-    canvas.style.zIndex = 0
-    // Add the canvas to the document body
-    document.body.appendChild(canvas)
-    return canvas
-  }
   serializeSettings() {
     return {
       version: this.version,

package/src/Overlay/YearlySunShadingOverlay.js

@@ -0,0 +1,368 @@
+import * as THREE from 'three'
+import Overlay from './Overlay.js'
+import {
+  getEdgesForHorizonForShader,
+  blurImagePreserveTransparency,
+} from '../helper/render/shadingMaterial/helper.js'
+import yearlySunShaderMaterial from '../helper/render/shadingMaterial/yearlySunShaderMaterial.js'
+import {
+  updateBufferRoofGeometry,
+  getBufferRoofGeometry,
+} from '../helper/render/geometryHandler.js'
+import {
+  intersectOutlines,
+  verticalProjectionOnPlane,
+} from '@eturnity/eturnity_maths'
+
+export default class YearlySunShadingOverlay extends Overlay {
+  constructor(overlay, emit) {
+    super(overlay, emit)
+    if (!this.constructorValidation(overlay)) {
+      return
+    }
+    this.hasToBeSavedInBE = false
+    this.dataGrids = overlay.settings.dataGrids
+    this.edges = overlay.settings.edges || []
+    this.roofs = overlay.settings.roofs || []
+    this.obstacles = overlay.settings.obstacles || []
+    this.latitude = overlay.settings.lat
+    this.longitude = overlay.settings.lng
+    this.isActive = false
+    this.opacity = 1
+    this.projectionMaterialPriority = 40
+    this.colorMap = overlay.settings.colorMap
+    const hash = [...this.roofs, ...this.obstacles, ...this.edges].reduce(
+      (hash, item) => {
+        hash[item.id] = item.version
+        return hash
+      },
+      {}
+    )
+    // Update the stored hash
+    this.previousHash = hash
+    this.initialiseScene()
+    this.getImage().then((imageUrl) => {
+      this.imageUrl = imageUrl
+      this.isReady = true
+      this.version++
+      this.emit('overlay-is-ready', { id: this.id })
+      this.isReadyCallback.forEach((callback) => {
+        if (typeof callback === 'function') {
+          callback()
+        }
+      })
+      this.isReadyCallback = []
+    })
+  }
+  constructorValidation(overlay) {
+    if (!overlay.settings.dataGrids) {
+      console.error('No dataGrids provided')
+      return false
+    }
+    if (!overlay.settings.lat || !overlay.settings.lng) {
+      console.error('No lat long provided')
+      return false
+    }
+    return true
+  }
+  initialiseScene() {
+    this.canvasWidth = 600
+    this.canvasHeight = 600
+    this.canvas = this.createCanvas()
+    this.scene = new THREE.Scene()
+    this.renderer = new THREE.WebGLRenderer({
+      canvas: this.canvas,
+      alpha: true,
+    })
+    this.renderer.setSize(this.canvasWidth, this.canvasHeight)
+    this.renderer.setClearColor(0x000000, 0) // Make background transparent
+    this.meshes = { roofMeshes: {}, obstacleMeshes: {} }
+    this.renderRoofs()
+    this.renderObstacles()
+    this.updateBox()
+    this.updateCorners()
+    this.updateCanvasFromBoxSize()
+    this.updateProjectionCamera()
+  }
+  updateCanvasFromBoxSize() {
+    if (!this.boxSize) return
+    this.canvasWidth = this.boxSize.x * 100 //(cm resolution)
+    this.canvasHeight = this.boxSize.y * 100
+    const maxSize = Math.max(this.canvasWidth, this.canvasHeight)
+    const CANVAS_MAX_SIZE = 2048
+    if (maxSize > CANVAS_MAX_SIZE) {
+      this.canvasWidth *= CANVAS_MAX_SIZE / maxSize
+      this.canvasHeight *= CANVAS_MAX_SIZE / maxSize
+    }
+    this.renderer.setSize(this.canvasWidth, this.canvasHeight)
+    this.canvas.width = this.canvasWidth
+    this.canvas.height = this.canvasHeight
+  }
+  renderRoofs() {
+    const roofsIds = this.roofs.map((r) => r.id)
+    Object.values(this.meshes.roofMeshes).forEach((mesh) => {
+      if (!roofsIds.includes(mesh.userData.id)) {
+        this.scene.remove(mesh)
+        delete this.meshes.roofMeshes[mesh.userData.id]
+      }
+    })
+    this.roofs.forEach((roof) => {
+      const normalVector = roof.normalVector
+      const point = roof.flatOutline[0]
+      const plane = { normalVector, point }
+      const edgesForHorizon = getEdgesForHorizonForShader(plane, this.edges)
+      let mesh = this.meshes.roofMeshes[roof.id]
+      let roofOutline = roof.outline
+      let cropedHolesOutlines = roof.holes.map((h) => {
+        //let's crop obstacle with roof outline
+        const cropedHoleOutline =
+          intersectOutlines(h.outline, roof.outline)[0] || []
+        const outline = cropedHoleOutline.map((p) => {
+          return {
+            x: p.x,
+            y: p.y,
+            z: verticalProjectionOnPlane(
+              p,
+              roof.normalVector,
+              roof.flatOutline[0]
+            ).z,
+          }
+        })
+        return outline
+      })
+      cropedHolesOutlines = cropedHolesOutlines.filter((outline) => !!outline)
+      if (mesh) {
+        let geometry = mesh.geometry
+        geometry = updateBufferRoofGeometry(
+          roofOutline,
+          cropedHolesOutlines,
+          geometry
+        )
+        mesh.material.updateEdges(edgesForHorizon)
+        mesh.material.needsUpdate = true
+        mesh.geometry = geometry
+        mesh.geometry.needsUpdate = true
+        mesh.geometry.computeBoundingBox()
+        mesh.needsUpdate = true
+      } else {
+        let material = new yearlySunShaderMaterial({
+          dataGrids: this.dataGrids,
+          lat: this.latitude,
+          lng: this.longitude,
+          edges: edgesForHorizon,
+          isShadingFactor: true,
+          colorMap: this.colorMap,
+        })
+        let geometry = getBufferRoofGeometry(roof.outline, cropedHolesOutlines)
+        mesh = new THREE.Mesh(geometry, material)
+        mesh.material.updateEdges(edgesForHorizon)
+        mesh.userData.id = roof.id
+        mesh.material.needsUpdate = true
+        mesh.needsUpdate = true
+        this.meshes.roofMeshes[roof.id] = mesh
+        this.scene.add(mesh)
+      }
+    })
+  }
+  renderObstacles() {
+    const obstacleIds = this.obstacles.map((o) => o.id)
+    Object.values(this.meshes.obstacleMeshes).forEach((mesh) => {
+      if (!obstacleIds.includes(mesh.userData.id)) {
+        this.scene.remove(mesh)
+        delete this.meshes.obstacleMeshes[mesh.userData.id]
+      }
+    })
+    this.obstacles.forEach((obstacle) => {
+      let mesh = this.meshes.obstacleMeshes[obstacle.id]
+      let obstacleOutline = obstacle.outline
+      if (mesh) {
+        let geometry = mesh.geometry
+        geometry = updateBufferRoofGeometry(obstacleOutline, [], geometry)
+        mesh.geometry = geometry
+        mesh.geometry.needsUpdate = true
+        mesh.geometry.computeBoundingBox()
+        mesh.needsUpdate = true
+      } else {
+        let material = new THREE.MeshBasicMaterial({
+          color: 0x000000,
+        })
+        let geometry = getBufferRoofGeometry(obstacle.outline, [])
+        mesh = new THREE.Mesh(geometry, material)
+        mesh.userData.id = obstacle.id
+        this.meshes.obstacleMeshes[obstacle.id] = mesh
+        this.scene.add(mesh)
+      }
+    })
+  }
+  updateMaterial(roofs, obstacles, edges) {
+    return new Promise((resolve, reject) => {
+      this.roofs = roofs
+      this.obstacles = obstacles
+      this.edges = edges
+      // Create a hash of roof and edge IDs and versions
+      const newHash = [...roofs, ...obstacles, ...edges].reduce(
+        (hash, item) => {
+          hash[item.id] = item.version
+          return hash
+        },
+        {}
+      )
+
+      // Compare with the previous hash
+      if (
+        this.previousHash &&
+        JSON.stringify(this.previousHash) === JSON.stringify(newHash)
+      ) {
+        resolve(this.imageUrl)
+        return
+      }
+
+      // Update the stored hash
+      this.previousHash = newHash
+      this.renderRoofs()
+      this.renderObstacles()
+      this.updateBox()
+      this.updateCorners()
+      this.updateCanvasFromBoxSize()
+      this.updateProjectionCamera()
+      this.getImage().then((imageUrl) => {
+        this.imageUrl = imageUrl
+        this.version++
+        this.emit('overlay-is-ready', { id: this.id })
+        this.isReadyCallback.forEach((callback) => {
+          if (typeof callback === 'function') {
+            callback()
+          }
+        })
+        resolve(this.imageUrl)
+      })
+    })
+  }
+  getImage() {
+    return new Promise((resolve, reject) => {
+      // Set camera position and look at the center of the model
+      this.overlayProjectionCamera.position.set(
+        this.boxCenter.x,
+        this.boxCenter.y,
+        this.boxCenter.z + 100
+      )
+      this.overlayProjectionCamera.lookAt(this.boxCenter.x, this.boxCenter.y, 0)
+      this.overlayProjectionCamera.updateProjectionMatrix()
+      // Render the scene
+      this.renderer.render(this.scene, this.overlayProjectionCamera)
+
+      // Generate image from canvas
+      const imageUrl = this.canvas.toDataURL()
+      blurImagePreserveTransparency(imageUrl, 15)
+        .then((blurredImageUrl) => {
+          resolve(blurredImageUrl)
+        })
+        .catch((error) => {
+          resolve(imageUrl)
+        })
+    })
+  }
+  updateBox() {
+    const box = new THREE.Box3().setFromObject(this.scene)
+    const boxSize = box.getSize(new THREE.Vector3())
+    this.boxSize = boxSize
+    this.boxCenter = box.getCenter(new THREE.Vector3())
+  }
+  updateProjectionCamera() {
+    const left = -this.boxSize.x / 2
+    const right = +this.boxSize.x / 2
+    const top = +this.boxSize.y / 2
+    const bottom = -this.boxSize.y / 2
+    if (!this.overlayProjectionCamera) {
+      this.initialiseProjectionCamera()
+    }
+    this.overlayProjectionCamera.position.set(
+      this.boxCenter.x,
+      this.boxCenter.y,
+      this.boxCenter.z + 100
+    )
+    this.overlayProjectionCamera.lookAt(this.boxCenter.x, this.boxCenter.y, 0)
+    this.overlayProjectionCamera.left = left
+    this.overlayProjectionCamera.right = right
+    this.overlayProjectionCamera.top = top
+    this.overlayProjectionCamera.bottom = bottom
+    this.overlayProjectionCamera.updateProjectionMatrix()
+  }
+  initialiseProjectionCamera() {
+    this.overlayProjectionCamera = new THREE.OrthographicCamera(
+      -1,
+      1,
+      1,
+      -1,
+      0.1, // near
+      1000 // far
+    )
+    this.overlayProjectionCamera.lookAt(this.boxCenter.x, this.boxCenter.y, 0)
+    this.overlayProjectionCamera.updateProjectionMatrix()
+  }
+  updateCorners() {
+    const left = -this.boxSize.x / 2
+    const right = +this.boxSize.x / 2
+    const top = +this.boxSize.y / 2
+    const bottom = -this.boxSize.y / 2
+    this.corners = [
+      {
+        x: 1000 * (this.boxCenter.x + left),
+        y: 1000 * (this.boxCenter.y + top),
+        z: 0,
+      },
+      {
+        x: 1000 * (this.boxCenter.x + right),
+        y: 1000 * (this.boxCenter.y + top),
+        z: 0,
+      },
+      {
+        x: 1000 * (this.boxCenter.x + right),
+        y: 1000 * (this.boxCenter.y + bottom),
+        z: 0,
+      },
+      {
+        x: 1000 * (this.boxCenter.x + left),
+        y: 1000 * (this.boxCenter.y + bottom),
+        z: 0,
+      },
+    ]
+    this.updateCanvasFromBoxSize()
+  }
+  renderOnThreeJS(threeJSComponent) {}
+  renderOnPaperJS(paperJSComponent) {
+    this.Paper = paperJSComponent.paperScope
+    if (!this.isReady || !this.isActive || !this.corners) {
+      return
+    }
+    let group = paperJSComponent.paths.imageOverlays[this.id]
+    paperJSComponent.paperLayer['imageOverlays'].activate()
+
+    let imageOverlayPath
+
+    const getCorners = () =>
+      this.corners.map((p) => paperJSComponent.toCanvasRef(p))
+    const corners = getCorners()
+    imageOverlayPath = this.loadImageOverlay(this.imageUrl, getCorners)
+    this.applyRasterToCorners(imageOverlayPath, corners)
+    imageOverlayPath.data.type = 'heatmapShadowRaster'
+    imageOverlayPath.visible = true
+    if (group) {
+      group.removeChildren()
+      group.insertChild(0, imageOverlayPath)
+      group.version++
+      group.visible = true
+    } else {
+      group = new this.Paper.Group()
+      group.addChild(imageOverlayPath)
+      group.itemType = 'imageOverlays'
+      group.data.url = this.imageUrl
+      group.type = 'imageOverlays'
+      group.pathId = this.id
+      group.overlayId = this.id
+      group.visible = true
+      paperJSComponent.paths.imageOverlays[this.id] = group
+    }
+    imageOverlayPath.opacity = this.opacity
+  }
+}

package/src/helper/render/imageOverlay.js

@@ -21,14 +21,23 @@ export default {
   methods: {
     renderImageOverlayOnBackground() {
       const overlayGeometries = OverlayLayer.getReadyItems()
-        .filter((overlay) => overlay.isReady && overlay.corners && overlay.type=='image_overlay')
+        .filter(
+          (overlay) =>
+            overlay.isReady &&
+            overlay.isActive &&
+            overlay.corners &&
+            overlay.type != 'yearly_sun_shading'
+        )
         .map((overlay) => {
           return overlay.getBackgroundGeometry()
         })
+      const overlayMaterialsToBackground = this.overlayMaterials.filter((m) => {
+        return m.userData.overlayType != 'yearly_sun_shading'
+      })
       const newBackgroundMesh = this.updateOrCreateMergedMesh(
         this.meshes.backgroundMesh,
         overlayGeometries,
-        this.overlayMaterials
+        overlayMaterialsToBackground
       )
       if (!this.meshes.backgroundMesh) {
         this.meshes.backgroundMesh = newBackgroundMesh
@@ -37,20 +46,25 @@ export default {
         this.meshes.backgroundMesh = newBackgroundMesh
       }
       this.meshes.backgroundMesh.position.z = 0.15
-      this.applyTextureOnMesh(this.overlayMaterials, this.meshes.backgroundMesh)
+      this.applyTextureOnMesh(
+        overlayMaterialsToBackground,
+        this.meshes.backgroundMesh
+      )
 
       this.meshes.backgroundMesh.visible = true
       return
     },
     async getOverlaysMaterials() {
       let overlayMaterialsPromises = []
-      OverlayLayer.getReadyItems().forEach((overlay) => {
-        overlayMaterialsPromises.push(overlay.getProjectionMaterial())
-      })
+      OverlayLayer.getReadyItems()
+        .filter((o) => o.isActive)
+        .forEach((overlay) => {
+          overlayMaterialsPromises.push(overlay.getProjectionMaterial())
+        })
       overlayMaterialsPromises = overlayMaterialsPromises.filter((p) => !!p)
-      const imageOverlayMaterial = await Promise.all(overlayMaterialsPromises)
-      this.imageOverlayMaterial=imageOverlayMaterial.filter(m=>!!m)
-      return this.imageOverlayMaterial
+      const imageOverlayMaterials = await Promise.all(overlayMaterialsPromises)
+      this.imageOverlayMaterials = imageOverlayMaterials.filter((m) => !!m)
+      return this.imageOverlayMaterials
     },
   },
 }