@eturnity/eturnity_3d 7.20.1 → 7.24.0

package/src/helper/render/clear.js

@@ -25,23 +25,6 @@ export default {
         if (obj.material.dispose) obj.material.dispose()
       }
     },
-    clearPanelsFromChangingRoofs(roofIds) {
-      const roofs = this.polygons.filter((polygon) =>
-        roofIds.includes(polygon.id)
-      )
-      roofs.forEach((roof) =>
-        roof.moduleFields.forEach((mf) =>
-          mf.panels.forEach((panel) => {
-            let meshTop = this.meshes.panelsMeshes[panel.id + '_top']
-            let meshSide = this.meshes.panelsMeshes[panel.id + '_side']
-            if (meshTop || meshSide) {
-              this.clearMeshFromScene(meshTop, this.scene)
-              this.clearMeshFromScene(meshSide, this.scene)
-            }
-          })
-        )
-      )
-    },
     clearMeshFromScene(mesh, scene) {
       if (!mesh || !scene) {
         return

package/src/helper/render/edge.js

@@ -87,6 +87,8 @@ export default {
           cylinder.userData.edgeId = edge.id
           cylinder.userData.type = 'edgeMeshes'
           cylinder.userData.layer = edge.layer
+          cylinder.frustumCulled = false
+          cylinder.renderOrder = 10
 
           cylinder.frustumCulled = false
           cylinder.renderOrder = 10

package/src/helper/render/geometryHandler.js

@@ -8,7 +8,8 @@ import {
   getNormalVectorFrom3Points,
   hasNaN,
   getDistanceBetweenPoints,
-  intersectOutlines
+  intersectOutlines,
+  isSameSegment2D
 } from '@eturnity/eturnity_maths'
 
 export function getTriangleVerticesFromOutline(
@@ -52,6 +53,10 @@ export function getTriangleVerticesFromOutline(
 
   var triangles = []
   try {
+    let verticesLength = dataVertices.length
+    holesStartingIndexes = holesStartingIndexes.filter(
+      (index) => index < verticesLength / 3
+    )
     triangles = earcut(dataVertices, holesStartingIndexes, 3)
   } catch (err) {
     console.error(err)
@@ -71,6 +76,8 @@ export function updateBufferRoofGeometry(
   holesOutline = [],
   geometry
 ) {
+  const geometryVersion = geometry.userData.version || 0
+  let geometryChanged = false
   //Calcul of triangles using cutear algo
   const triangleVertices = getTriangleVerticesFromOutline(
     polygonOutline,
@@ -86,13 +93,21 @@ export function updateBufferRoofGeometry(
   ) {
     let positions = geometry.attributes.position.array
     for (let k in vertices) {
-      positions[k] = vertices[k]
+      if (positions[k] != vertices[k]) {
+        geometryChanged = true
+        positions[k] = vertices[k]
+      }
     }
   } else {
+    geometryChanged = true
     geometry.dispose()
     geometry = null
     geometry = new THREE.BufferGeometry()
     geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
+    geometry.userData.version = geometryVersion + 1
+  }
+  if (geometryChanged) {
+    geometry.userData.version = geometryVersion + 1
   }
   geometry.setDrawRange(0, vertices.length / 3)
   geometry.attributes.position.needsUpdate = true
@@ -117,6 +132,7 @@ export function getBufferRoofGeometry(polygonOutline, holesOutline = []) {
   geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
   geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2))
   geometry.computeVertexNormals()
+  geometry.userData.version = 0
   return geometry
 }
 
@@ -142,17 +158,17 @@ export function getWallVertices(polygon) {
         p_up_1.x / 1000,
         p_up_1.y / 1000,
         p_up_1.z / 1000,
-        p_bottom_0.x / 1000,
-        p_bottom_0.y / 1000,
-        p_bottom_0.z / 1000,
         p_bottom_1.x / 1000,
         p_bottom_1.y / 1000,
-        p_bottom_1.z / 1000
+        p_bottom_1.z / 1000,
+        p_bottom_0.x / 1000,
+        p_bottom_0.y / 1000,
+        p_bottom_0.z / 1000
       ]
     )
   })
 
-  polygon.holes.forEach((hole) => {
+  polygon.holes.forEach((hole, holeIndex) => {
     let obstacleWallOutline =
       intersectOutlines(hole.outline, polygon.outline)[0] || []
     obstacleWallOutline = obstacleWallOutline.map((p) => {
@@ -165,34 +181,47 @@ export function getWallVertices(polygon) {
         ).z
       }
     })
+
     const lengthHole = obstacleWallOutline.length
     obstacleWallOutline.forEach((p_up_0, index) => {
       const p_up_1 = obstacleWallOutline[(index + 1) % lengthHole]
       const p_bottom_0 = { ...p_up_0, z: 0 }
       const p_bottom_1 = { ...p_up_1, z: 0 }
 
-      trianglesVertices.push(
-        ...[
-          p_up_0.x / 1000,
-          p_up_0.y / 1000,
-          p_up_0.z / 1000,
-          p_up_1.x / 1000,
-          p_up_1.y / 1000,
-          p_up_1.z / 1000,
-          p_bottom_0.x / 1000,
-          p_bottom_0.y / 1000,
-          p_bottom_0.z / 1000,
-          p_up_1.x / 1000,
-          p_up_1.y / 1000,
-          p_up_1.z / 1000,
-          p_bottom_0.x / 1000,
-          p_bottom_0.y / 1000,
-          p_bottom_0.z / 1000,
-          p_bottom_1.x / 1000,
-          p_bottom_1.y / 1000,
-          p_bottom_1.z / 1000
-        ]
-      )
+      const isEdgeConnectedToRoof = !polygon.holes.some((hole, i) => {
+        return (
+          holeIndex != i &&
+          hole.outline.some((p, p_index, outline) => {
+            let p_next_index = (p_index + 1) % outline.length
+            return isSameSegment2D([p_up_0, p_up_1], [p, outline[p_next_index]])
+          })
+        )
+      })
+
+      if (isEdgeConnectedToRoof) {
+        trianglesVertices.push(
+          ...[
+            p_up_0.x / 1000,
+            p_up_0.y / 1000,
+            p_up_0.z / 1000,
+            p_up_1.x / 1000,
+            p_up_1.y / 1000,
+            p_up_1.z / 1000,
+            p_bottom_0.x / 1000,
+            p_bottom_0.y / 1000,
+            p_bottom_0.z / 1000,
+            p_up_1.x / 1000,
+            p_up_1.y / 1000,
+            p_up_1.z / 1000,
+            p_bottom_0.x / 1000,
+            p_bottom_0.y / 1000,
+            p_bottom_0.z / 1000,
+            p_bottom_1.x / 1000,
+            p_bottom_1.y / 1000,
+            p_bottom_1.z / 1000
+          ]
+        )
+      }
     })
   })
   if (hasNaN(trianglesVertices)) {
@@ -564,7 +593,7 @@ export function updateBufferPanelSideGeometry(panelPolygon, geometry) {
     panelPolygon.outline,
     panelOutlineTop
   )
-  
+
   if (hasNaN(triangleVertices)) {
     return null
   }
@@ -587,7 +616,7 @@ export function updateBufferPanelSideGeometry(panelPolygon, geometry) {
   geometry.attributes.position.needsUpdate = true
   geometry.computeVertexNormals()
   geometry.needsUpdate = true
- 
+
   return geometry
 }
 export function getBufferPanelSideGeometry(panelPolygon) {

package/src/helper/render/imageOverlay.js

@@ -1,18 +1,7 @@
 import * as THREE from 'three'
 import { mapGetters } from 'vuex'
-import ProjectedMaterial from 'three-projected-material'
-import {
-  substractVector,
-  addVector,
-  multiplyVector,
-  getDistanceBetweenPoints,
-  getAngleInDegFromCanvasVector
-} from '@eturnity/eturnity_maths'
-import {
-  getBufferImageOverlayGeometry,
-  updateBufferRoofGeometry
-} from './geometryHandler'
 
+import OverlayLayer from '../../Overlay/OverlayLayer'
 export default {
   created() {
     this.imageOverlayProjectionCamera = new THREE.PerspectiveCamera(
@@ -31,145 +20,37 @@ export default {
   },
   methods: {
     renderImageOverlayOnBackground() {
-      if (!this.imageOverlay || !this.imageOverlayMaterial) {
-        this.clearMeshFromScene(this.meshes.backgroundMesh, this.scene)
-        this.meshes.backgroundMesh = null
-        return
-      }
-      let corners = this.imageOverlay.corners.map((p) => {
-        return { ...p, z: 100 }
-      })
-      if (this.meshes.backgroundMesh && this.meshes.backgroundMesh.geometry) {
-        let geometry = this.meshes.backgroundMesh.geometry
-        geometry = updateBufferRoofGeometry(corners, [], geometry)
-        //updateBufferRoofGeometry(corners,[],geometry)
-        this.meshes.backgroundMesh.geometry = geometry
-      } else {
-        let planeGeometry = getBufferImageOverlayGeometry(corners)
-        let planeMaterial = this.imageOverlayMaterial
-
-        this.meshes.backgroundMesh = new THREE.Mesh(
-          planeGeometry,
-          planeMaterial
-        )
+      const overlayGeometries = OverlayLayer.getReadyItems()
+        .filter((overlay) => overlay.isReady && overlay.corners)
+        .map((overlay) => {
+          return overlay.getBackgroundGeometry()
+        })
+      const newBackgroundMesh = this.updateOrCreateMergedMesh(
+        this.meshes.backgroundMesh,
+        overlayGeometries,
+        this.overlayMaterials
+      )
+      if (!this.meshes.backgroundMesh) {
+        this.meshes.backgroundMesh = newBackgroundMesh
         this.scene.add(this.meshes.backgroundMesh)
+      } else {
+        this.meshes.backgroundMesh = newBackgroundMesh
       }
       this.meshes.backgroundMesh.position.z = 0.15
-      if (this.imageOverlayMaterial) {
-        this.applyTextureOnMesh(
-          [this.imageOverlayMaterial],
-          this.meshes.backgroundMesh
-        )
-      }
+      this.applyTextureOnMesh(this.overlayMaterials, this.meshes.backgroundMesh)
+
       this.meshes.backgroundMesh.visible = true
-    },
-    async changeImageOverlay() {
-      if (this.imageOverlayMaterial) {
-        this.imageOverlayMaterial.dispose()
-        this.imageOverlayMaterial = null
-      }
-      await this.updateProjectionMaterials()
-    },
-    async getImageOverlayMaterial() {
-      if (!this.imageOverlay || !this.imageOverlay.url) {
-        if (this.imageOverlayMaterial) {
-          this.imageOverlayMaterial.dispose()
-        }
-        this.imageOverlayMaterial = null
-        return null
-      }
 
-      if (
-        !this.imageOverlayMaterial ||
-        this.imageOverlay.url != this.imageOverlayMaterial.userData.url
-      ) {
-        this.imageOverlayMaterial = await this.newImageOverlayMaterial()
-      } else {
-        this.setImageOverlayCameraPosition()
-      }
-      return this.imageOverlayMaterial
+      return
     },
-    removeImageOverlay() {
-      if (this.imageOverlayMaterial && this.imageOverlayMaterial.dispose)
-        this.imageOverlayMaterial.dispose()
-      this.imageOverlayMaterial = null
-      this.material.roof = this.material.roof.filter(
-        (material) => material.userData.type != 'imageOverlayMaterial'
-      )
-    },
-    async newImageOverlayMaterial() {
-      return new Promise((resolve) => {
-        this.loader.load(this.imageOverlay.url, (texture) => {
-          this.imageOverlayTexture = texture
-          this.setImageOverlayCameraPosition()
-          let imageOverlayProjectionMaterial = new ProjectedMaterial({
-            camera: this.imageOverlayProjectionCamera,
-            texture: this.imageOverlayTexture,
-            transparent: true,
-            side: THREE.DoubleSide,
-            depthWrite: false
-          })
-          imageOverlayProjectionMaterial.userData = {}
-          imageOverlayProjectionMaterial.userData.type = 'imageOverlayMaterial'
-          imageOverlayProjectionMaterial.priority = 20
-          imageOverlayProjectionMaterial.userData.url = this.imageOverlay.url
-          resolve(imageOverlayProjectionMaterial)
-        })
+    async getOverlaysMaterials() {
+      let overlayMaterialsPromises = []
+      OverlayLayer.getReadyItems().forEach((overlay) => {
+        overlayMaterialsPromises.push(overlay.getProjectionMaterial())
       })
-    },
-    setImageOverlayCameraPosition() {
-      if (!this.imageOverlay || !this.imageOverlay.url) return
-      let height = getDistanceBetweenPoints(
-        this.imageOverlay.corners[1],
-        this.imageOverlay.corners[2]
-      )
-      let width = getDistanceBetweenPoints(
-        this.imageOverlay.corners[0],
-        this.imageOverlay.corners[1]
-      )
-      this.imageOverlayProjectionCamera.aspect = width / height
-      let projectionAltitude =
-        height /
-        (2 * Math.tan((this.imageOverlayProjectionCamera.fov * Math.PI) / 360))
-
-      //set projection camera over background_map_center
-      let imageOverlayProjectionCameraPosition = {
-        x: 0,
-        y: 0,
-        z: projectionAltitude / 1000
-      }
-
-      let positionInMm = multiplyVector(
-        0.5,
-        addVector(this.imageOverlay.corners[0], this.imageOverlay.corners[2])
-      )
-      imageOverlayProjectionCameraPosition.x = positionInMm.x / 1000
-      imageOverlayProjectionCameraPosition.y = positionInMm.y / 1000
-
-      this.imageOverlayProjectionCamera.position.set(
-        imageOverlayProjectionCameraPosition.x,
-        imageOverlayProjectionCameraPosition.y,
-        projectionAltitude / 1000
-      )
-      this.imageOverlayProjectionCamera.lookAt(
-        imageOverlayProjectionCameraPosition.x,
-        imageOverlayProjectionCameraPosition.y,
-        0
-      )
-      let zAngle = getAngleInDegFromCanvasVector(
-        substractVector(
-          this.imageOverlay.corners[3],
-          this.imageOverlay.corners[0]
-        )
-      )
-      this.imageOverlayProjectionCamera.rotation.set(
-        0,
-        0,
-        (zAngle * Math.PI) / 180
-      )
-      this.imageOverlayProjectionCamera.far = projectionAltitude * 1.5
-      this.imageOverlayProjectionCamera.near = projectionAltitude * 0.8
-      this.imageOverlayProjectionCamera.updateProjectionMatrix()
+      overlayMaterialsPromises = overlayMaterialsPromises.filter((p) => !!p)
+      this.imageOverlayMaterial = await Promise.all(overlayMaterialsPromises)
+      return this.imageOverlayMaterial
     }
   }
 }

package/src/helper/render/index.js

@@ -9,6 +9,7 @@ import obstacle from './obstacle'
 import panel from './panel'
 import roof from './roof'
 import imageOverlay from './imageOverlay'
+import overlay from './overlay'
 import texture from './texture'
 import projectionMaterial from './projectionMaterial'
 import tile from './tile'
@@ -28,6 +29,7 @@ export default {
     clear,
     loader,
     imageOverlay,
+    overlay,
     texture,
     projectionMaterial,
     tile,

package/src/helper/render/mergedGeometry.js

@@ -6,7 +6,8 @@ export default {
       const mergedVertices = []
       const mergedNormals = []
       const mergedUvs = []
-
+      const geometryVersion = mergedGeometry.userData.version || 0
+      let geometryChanged = false
       geometries.forEach((geometry) => {
         const positions = geometry.attributes.position.array
         const normals = geometry.attributes.normal.array
@@ -32,7 +33,10 @@ export default {
         let uvs = mergedGeometry.attributes.uv.array
         let normals = mergedGeometry.attributes.normal.array
         for (let k in mergedVertices) {
-          positions[k] = mergedVertices[k]
+          if (positions[k] != mergedVertices[k]) {
+            geometryChanged = true
+            positions[k] = mergedVertices[k]
+          }
         }
         for (let k in mergedUvs) {
           uvs[k] = mergedUvs[k]
@@ -42,10 +46,14 @@ export default {
         }
         mergedGeometry.setDrawRange(0, mergedVertices.length / 3)
       } else {
+        geometryChanged = true
         mergedGeometry.dispose()
         mergedGeometry = null
         mergedGeometry = this.createMergedGeometry(geometries)
       }
+      if (geometryChanged) {
+        mergedGeometry.userData.version = geometryVersion + 1
+      }
       mergedGeometry.attributes.position.needsUpdate = true
       mergedGeometry.attributes.normal.needsUpdate = true
       mergedGeometry.needsUpdate = true
@@ -83,6 +91,7 @@ export default {
         new THREE.BufferAttribute(new Float32Array(mergedUvs), 2)
       )
       mergedGeometry.computeVertexNormals()
+      mergedGeometry.userData.version = 0
       return mergedGeometry
     },
 

package/src/helper/render/obstacle.js

@@ -74,13 +74,14 @@ export default {
       this.mergedObstacleMesh = this.updateOrCreateMergedMesh(
         this.mergedObstacleMesh,
         obstacleGeometries,
-        this.material.roof
+        this.material.selectedRoof
       )
       this.mergedObstacleSideMesh = this.updateOrCreateMergedMesh(
         this.mergedObstacleSideMesh,
         obstacleSideGeometries,
         this.material.wall
       )
+      this.mergedObstacleSideMesh.renderOrder = 10
       this.applyTextureOnObstacles(this.material.roof)
     }
   }

package/src/helper/render/overlay.js

@@ -0,0 +1,41 @@
+import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+import { mapState } from 'vuex'
+import OverlayLayer from '../../Overlay/OverlayLayer.js'
+
+export default {
+  data() {
+    return {}
+  },
+  created() {
+    this.glbLoader = new GLTFLoader()
+  },
+  computed: {
+    ...mapState({})
+  },
+  methods: {
+    renderOverlays() {
+      let overlays = OverlayLayer.getItems()
+
+      let overlaysIds = overlays.map((o) => o.id)
+      let overlayMeshesIds = Object.keys(this.meshes.overlayMeshes)
+      overlayMeshesIds.forEach((meshId) => {
+        if (!overlaysIds.includes(meshId)) {
+          const mesh = this.meshes.overlayMeshes[meshId]
+          this.clearMeshFromScene(mesh, this.scene)
+        }
+      })
+      OverlayLayer.getItems().forEach((overlay) => {
+        overlay.renderOnThreeJS(this)
+      })
+    },
+    updateOverlayRendering() {
+      if (this.isReady) {
+        this.isReady.overlay = true
+      }
+      this.renderOverlays()
+      this.updateProjectionMaterials()
+      this.render()
+    }
+  }
+}

package/src/helper/render/projectionMaterial.js

@@ -1,3 +1,10 @@
+function cloneMaterialArrayAndAddEmission(material, color) {
+  let newMaterial = material.clone()
+  newMaterial.camera = material.camera
+  newMaterial.emissiveEnabled = true
+  newMaterial.emissive.set(color)
+  return newMaterial
+}
 export default {
   methods: {
     reorderRoofMaterials() {
@@ -8,27 +15,18 @@ export default {
       })
     },
     async updateProjectionMaterials() {
-      this.setImageOverlayCameraPosition()
-      this.imageOverlayMaterial = await this.getImageOverlayMaterial()
+      //this.setImageOverlayCameraPosition()
+      this.overlayMaterials = (await this.getOverlaysMaterials()).filter(
+        (m) => !!m
+      )
+      // this.material.selectedWarningRoof = this.material.roof.map((material) =>
+      //   cloneMaterialArrayAndAddEmission(material, 0x808080)
+      // )
       //add or remove imageOverlayMaterial
-      const index = this.material.roof.findIndex(
-        (material) => material.userData.type == 'imageOverlayMaterial'
+      this.material.roof = this.material.roof.filter(
+        (material) => material.userData.type != 'overlayMaterial'
       )
-      if (this.imageOverlayMaterial) {
-        if (index >= 0) {
-          this.material.roof[index] = this.imageOverlayMaterial
-          this.material.roof = [...this.material.roof]
-        } else {
-          this.material.roof = [
-            ...this.material.roof,
-            this.imageOverlayMaterial
-          ]
-        }
-      } else if (index >= 0) {
-        this.material.roof[index].dispose()
-        this.material.roof.splice(index, 1)
-        this.material.roof = [...this.material.roof]
-      }
+      this.material.roof = [...this.material.roof, ...this.overlayMaterials]
       this.renderImageOverlayOnBackground()
       this.applyTextureOnRoofs()
     }