@eturnity/eturnity_3d 6.34.0 → 6.34.1

package/src/helper/render/roof.js

@@ -1,145 +1,148 @@
 import * as THREE from 'three'
-import {
-  maximumGapLimit,
-} from '../../config'
+import { maximumGapLimit } from '../../config'
 import {
   getBufferRoofGeometry,
-  updateBufferRoofGeometry,
+  updateBufferRoofGeometry
 } from './geometryHandler'
-import { intersectOutlines, verticalProjectionOnPlane } from '@eturnity/eturnity_maths'
+import {
+  intersectOutlines,
+  verticalProjectionOnPlane
+} from '@eturnity/eturnity_maths'
 
 export default {
-    methods:{
-        updateRoofGeometry(geometry, roofPolygon) {
-            const roofOutline = roofPolygon.outline
-            let cropedHolesOutline = roofPolygon.holes
-            .filter((h) => h.layer == 'obstacle')
-            .map((h) => {
-                //let's crop obstacle with roof outline
-                const cropedHoleOutline =
-                intersectOutlines(h.outline, roofPolygon.outline)[0] || []
-                const outline = cropedHoleOutline.map((p) => {
-                return {
-                    x: p.x,
-                    y: p.y,
-                    z: verticalProjectionOnPlane(
-                    p,
-                    roofPolygon.normalVector,
-                    roofPolygon.flatOutline[0]
-                    ).z
-                }
-                })
-                return outline
-            })
+  methods: {
+    updateRoofGeometry(geometry, roofPolygon) {
+      const roofOutline = roofPolygon.outline
+      let cropedHolesOutline = roofPolygon.holes
+        .filter((h) => h.layer == 'obstacle')
+        .map((h) => {
+          //let's crop obstacle with roof outline
+          const cropedHoleOutline =
+            intersectOutlines(h.outline, roofPolygon.outline)[0] || []
+          const outline = cropedHoleOutline.map((p) => {
+            return {
+              x: p.x,
+              y: p.y,
+              z: verticalProjectionOnPlane(
+                p,
+                roofPolygon.normalVector,
+                roofPolygon.flatOutline[0]
+              ).z
+            }
+          })
+          return outline
+        })
+
+      cropedHolesOutline = cropedHolesOutline.filter((outline) => !!outline)
+      geometry = updateBufferRoofGeometry(
+        roofOutline,
+        cropedHolesOutline,
+        geometry
+      )
+
+      return geometry
+    },
+    createRoofGeometry(roofPolygon) {
+      const roofOutline = roofPolygon.outline
+      let cropedHolesOutline = roofPolygon.holes
+        .filter((h) => h.layer == 'obstacle')
+        .map((h) => {
+          //let's crop obstacle with roof outline
+          const cropedHoleOutline =
+            intersectOutlines(h.outline, roofPolygon.outline)[0] || []
+          const outline = cropedHoleOutline.map((p) => {
+            return {
+              x: p.x,
+              y: p.y,
+              z: verticalProjectionOnPlane(
+                p,
+                roofPolygon.normalVector,
+                roofPolygon.flatOutline[0]
+              ).z
+            }
+          })
+          return outline
+        })
+
+      cropedHolesOutline = cropedHolesOutline.filter((outline) => !!outline)
+      let geometry = getBufferRoofGeometry(roofOutline, cropedHolesOutline)
 
-            cropedHolesOutline = cropedHolesOutline.filter((outline) => !!outline)
-            geometry = updateBufferRoofGeometry(
-            roofOutline,
-            cropedHolesOutline,
-            geometry
-            )
+      return geometry
+    },
 
-            return geometry
-        },
-        createRoofGeometry(roofPolygon) {
-            const roofOutline = roofPolygon.outline
-            let cropedHolesOutline = roofPolygon.holes
-            .filter((h) => h.layer == 'obstacle')
-            .map((h) => {
-                //let's crop obstacle with roof outline
-                const cropedHoleOutline =
-                intersectOutlines(h.outline, roofPolygon.outline)[0] || []
-                const outline = cropedHoleOutline.map((p) => {
-                return {
-                    x: p.x,
-                    y: p.y,
-                    z: verticalProjectionOnPlane(
-                    p,
-                    roofPolygon.normalVector,
-                    roofPolygon.flatOutline[0]
-                    ).z
-                }
-                })
-                return outline
-            })
+    applyTextureOnRoofs() {
+      this.roofs.forEach((roof) => {
+        //roofs
+        let mesh = this.meshes.roofMeshes[roof.id]
+        this.applyTextureOnMesh(this.material.roof, mesh)
+        //obstacle on roof
+        roof.holes
+          .filter((p) => p.layer == 'obstacle')
+          .forEach((obstacle) => {
+            let meshObstacle =
+              this.meshes.obstacleMeshes[obstacle.id + '-' + roof.id + '_top']
+            this.applyTextureOnMesh(this.material.roof, meshObstacle)
+          })
+      })
+    },
+    renderRoofs() {
+      this.clearRemovedOnes('roofMeshes')
+      this.roofs.forEach((roofPolygon) => {
+        let mesh
+        let geometry
+        if (
+          this.meshes.roofMeshes[roofPolygon.id] &&
+          this.meshes.roofMeshes[roofPolygon.id].userData.version <
+            roofPolygon.version
+        ) {
+          //update mesh
+          mesh = this.meshes.roofMeshes[roofPolygon.id]
+          geometry = mesh.geometry
+          geometry = this.updateRoofGeometry(geometry, roofPolygon)
+          //in order to be able to render multiple material on it (background and image overlay)
 
-            cropedHolesOutline = cropedHolesOutline.filter((outline) => !!outline)
-            let geometry = getBufferRoofGeometry(roofOutline, cropedHolesOutline)
+          mesh.geometry = geometry
+          this.applyTextureOnMesh(this.material.roof, mesh)
+          mesh.frustumCulled = false
+          mesh.updateMatrix()
+        }
+        if (!this.meshes.roofMeshes[roofPolygon.id]) {
+          //create
+          geometry = this.createRoofGeometry(roofPolygon)
 
-            return geometry
-        },
-        
-        applyTextureOnRoofs(){
-            this.roofs.forEach(roof=>{
-              //roofs
-            let mesh=this.meshes.roofMeshes[roof.id]
-            this.applyTextureOnMesh(this.material.roof,mesh)
-              //obstacle on roof
-              roof.holes.filter(p=>p.layer=="obstacle").forEach(obstacle=>{
-                let meshObstacle=this.meshes.obstacleMeshes[obstacle.id + '-' + roof.id + '_top']
-                this.applyTextureOnMesh(this.material.roof,meshObstacle)
-              })
-            })
-        },
-        renderRoofs() {
-        this.clearRemovedOnes('roofMeshes')
-        this.roofs.forEach((roofPolygon) => {
-            let mesh
-            let geometry
-            if (
-            this.meshes.roofMeshes[roofPolygon.id] &&
-            this.meshes.roofMeshes[roofPolygon.id].userData.version <
-                roofPolygon.version
-            ) {
-            //update mesh
-            mesh = this.meshes.roofMeshes[roofPolygon.id]
-            geometry = mesh.geometry
-            geometry = this.updateRoofGeometry(geometry, roofPolygon)
-            //in order to be able to render multiple material on it (background and image overlay)
-            
-            mesh.geometry = geometry
-            this.applyTextureOnMesh(this.material.roof,mesh)
-            
+          if (geometry) {
+            mesh = new THREE.Mesh(geometry, this.material.roof)
+            mesh.userData.version = roofPolygon.version
+            mesh.userData.type = 'roofMeshes'
+            mesh.userData.meshId = roofPolygon.id
+            mesh.userData.polygonId = roofPolygon.id
+            mesh.matrixAutoUpdate = false
+            this.scene.add(mesh)
+            this.applyTextureOnMesh(this.material.roof, mesh)
             mesh.frustumCulled = false
-            mesh.updateMatrix()
-            }
-            if (!this.meshes.roofMeshes[roofPolygon.id]) {
-            //create
-            geometry = this.createRoofGeometry(roofPolygon)
-                       
-            if (geometry) {
-                mesh = new THREE.Mesh(geometry, this.material.roof)
-                mesh.userData.version = roofPolygon.version
-                mesh.userData.type = 'roofMeshes'
-                mesh.userData.meshId = roofPolygon.id
-                mesh.userData.polygonId = roofPolygon.id
-                mesh.matrixAutoUpdate = false
-                this.scene.add(mesh)
-                this.applyTextureOnMesh(this.material.roof,mesh)
-                mesh.frustumCulled = false
-                this.meshes.roofMeshes[roofPolygon.id] = mesh
-            }
-            }
-        })
-        },
-        renderFlatRoofs() {
-            //this.clearRemovedOnes('flatRoofMeshes')
-            this.clearByType('flatRoofMeshes')
-            this.roofs.forEach((roofPolygon) => {
-            //if(this.meshes.flatRoofMeshes[roofPolygon.id])
-            if(roofPolygon.maximumGap < maximumGapLimit) return
-            let geometry = getBufferRoofGeometry(roofPolygon.flatOutline)
-            if (geometry) {
-                const material =this.material.curvedRoof
-                const mesh = new THREE.Mesh(geometry, material)
-                geometry.dispose()
-                geometry = null
-                mesh.itemData = roofPolygon
-                mesh.frustumCulled = false
-                this.scene.add(mesh)
-                this.meshes.flatRoofMeshes[roofPolygon.id] = mesh
-            }
-            })
-        },
+            this.meshes.roofMeshes[roofPolygon.id] = mesh
+          }
+        }
+      })
+    },
+    renderFlatRoofs() {
+      //this.clearRemovedOnes('flatRoofMeshes')
+      this.clearByType('flatRoofMeshes')
+      this.roofs.forEach((roofPolygon) => {
+        //if(this.meshes.flatRoofMeshes[roofPolygon.id])
+        if (roofPolygon.maximumGap < maximumGapLimit) return
+        let geometry = getBufferRoofGeometry(roofPolygon.flatOutline)
+        if (geometry) {
+          const material = this.material.curvedRoof
+          const mesh = new THREE.Mesh(geometry, material)
+          geometry.dispose()
+          geometry = null
+          mesh.itemData = roofPolygon
+          mesh.frustumCulled = false
+          this.scene.add(mesh)
+          this.meshes.flatRoofMeshes[roofPolygon.id] = mesh
+        }
+      })
     }
-}
+  }
+}

package/src/helper/render/texture.js

@@ -1,19 +1,19 @@
 export default {
-    methods:{
-        applyTextureOnMesh(materials,mesh){
-            if(materials && materials.length>0){
-                let geometry=mesh.geometry
-                geometry.clearGroups();
-                for(let k=0;k<materials.length;k++){
-                    geometry.addGroup( 0, Infinity, k )
-                }
-                mesh.material=materials
-                for(let m=0;m<materials.length;m++){
-                    if(materials[m].project) {
-                        materials[m].project(mesh)
-                    }
-                }
-            }
-        },
+  methods: {
+    applyTextureOnMesh(materials, mesh) {
+      if (materials && materials.length > 0) {
+        let geometry = mesh.geometry
+        geometry.clearGroups()
+        for (let k = 0; k < materials.length; k++) {
+          geometry.addGroup(0, Infinity, k)
+        }
+        mesh.material = materials
+        for (let m = 0; m < materials.length; m++) {
+          if (materials[m].project) {
+            materials[m].project(mesh)
+          }
+        }
+      }
     }
-}
+  }
+}

package/src/helper/render/tile.js

@@ -0,0 +1,291 @@
+import * as THREE from 'three'
+import {
+  getBufferRoofGeometry,
+  updateBufferRoofGeometry
+} from './geometryHandler'
+import {
+  distanceToDeltaLatLng,
+  latLngToTileXY,
+  tileToCorners
+} from '@eturnity/eturnity_maths'
+
+import {cancellablePromise} from '../../utils/cancellablePromise'
+
+export default {
+  data() {
+    return {
+      pendingTiles: [],
+    }
+  },
+  methods: {
+    async renderTiles() {
+      if (
+        !this.selectedMapLayer ||
+        ['googleLayerRoadmap', 'googleLayer', 'googleLayerTerrain'].includes(
+          this.selectedMapLayer.key
+        )
+      ) {
+        this.renderGoogleTiles()
+      } else {
+        this.renderProviderTiles()
+      }
+    },
+    removeUnusedTiles(tileToRender) {
+      let tileToRenderIds = tileToRender.map(
+        (tileParam) =>
+          'tile_' +
+          tileParam.xTile +
+          '_' +
+          tileParam.yTile +
+          '_' +
+          tileParam.zoomLvl
+      )
+      let idsToRemove = Object.keys(this.meshes.tileMeshes).filter((id) => {
+        return !tileToRenderIds.includes(id)
+      })
+      for (let id of idsToRemove) {
+        this.clearMesh(this.meshes.tileMeshes[id])
+      }
+    },
+    async renderProviderTiles() {
+      if (this.backgroundMap) {
+        this.backgroundMap.clear()
+        this.scene.remove(this.backgroundMap)
+        this.clearThreeObjects(this.backgroundMap)
+      }
+      this.backgroundMap = new THREE.Group()
+
+      let zoomLvl = this.provider.maxZoom
+      const latitude = this.layoutSettings.layout_latitude
+      const longitude = this.layoutSettings.layout_longitude
+      let { xMin, xMax, yMin, yMax } = this.roofsBounds
+      if (xMin == Infinity) {
+        xMin = 0
+        yMin = 0
+        xMax = 0
+        yMax = 0
+      }
+      let { lat: latMin, lng: lngMin } = distanceToDeltaLatLng(
+        xMin,
+        yMin,
+        latitude
+      )
+      let { lat: latMax, lng: lngMax } = distanceToDeltaLatLng(
+        xMax,
+        yMax,
+        latitude
+      )
+      let { x: xTileMin, y: yTileMax } = latLngToTileXY(
+        latitude + latMin,
+        longitude + lngMin,
+        zoomLvl
+      )
+      let { x: xTileMax, y: yTileMin } = latLngToTileXY(
+        latitude + latMax,
+        longitude + lngMax,
+        zoomLvl
+      )
+      xTileMin = xTileMin - (xTileMin % 2)
+      xTileMax = xTileMax + 1 - (xTileMax % 2)
+      yTileMin = yTileMin - (yTileMin % 2)
+      yTileMax = yTileMax + 1 - (yTileMax % 2)
+      let tileToRender = []
+      for (let xTile = xTileMin; xTile <= xTileMax; xTile++) {
+        for (let yTile = yTileMin; yTile <= yTileMax; yTile++) {
+          tileToRender.push({ xTile, yTile, zoomLvl })
+        }
+      }
+
+      for (let k = 0; k < 3; k++) {
+        xTileMin = xTileMin / 2 - 1
+        xTileMax = (xTileMax + 1) / 2
+        yTileMin = yTileMin / 2 - 1
+        yTileMax = (yTileMax + 1) / 2
+        //Make sure Mins are even and Maxs are odd to join tiles without overlapping
+        let xMinOdd = xTileMin % 2
+        let yMinOdd = yTileMin % 2
+        let xMaxEven = 1 - (xTileMax % 2)
+        let yMaxEven = 1 - (yTileMax % 2)
+        xTileMin = xTileMin - (xTileMin % 2)
+        xTileMax = xTileMax + 1 - (xTileMax % 2)
+        yTileMin = yTileMin - (yTileMin % 2)
+        yTileMax = yTileMax + 1 - (yTileMax % 2)
+        zoomLvl -= 1
+        for (let xTile = xTileMin; xTile <= xTileMax; xTile++) {
+          for (let yTile = yTileMin; yTile <= yTileMax; yTile++) {
+            if (
+              xTile - xTileMin <= xMinOdd ||
+              xTileMax - xTile <= xMaxEven ||
+              yTile - yTileMin <= yMinOdd ||
+              yTileMax - yTile <= yMaxEven
+            ) {
+              tileToRender.push({ xTile, yTile, zoomLvl })
+            }
+          }
+        }
+      }
+      await this.removeUnusedTiles(tileToRender)
+      for (let k in tileToRender) {
+        let xTile = tileToRender[k].xTile
+        let yTile = tileToRender[k].yTile
+        zoomLvl = tileToRender[k].zoomLvl
+        this.renderTile(xTile, yTile, zoomLvl)
+      }
+    },
+    removeTileFromPending(meshId,mapLayer){
+      this.pendingTiles = this.pendingTiles.filter(
+        (t) => t.meshId != meshId || t.mapLayer != mapLayer
+      )
+    },
+    async renderTile(x, y, zoomLvl) {
+      const meshId = 'tile_' + x + '_' + y + '_' + zoomLvl
+      const mapLayer = this.provider.mapLayer
+      if (
+        this.pendingTiles.find(t=>t.meshId==meshId && t.mapLayer==mapLayer)
+      ) {
+        return
+      }
+
+      let mesh = this.meshes.tileMeshes[meshId]
+      if (mesh && this.provider.mapLayer == mesh.userData.mapLayer) {
+        return
+      }
+
+      const latitude = this.layoutSettings.layout_latitude
+      const longitude = this.layoutSettings.layout_longitude
+      let geometry, material
+      const imagePromise=cancellablePromise(this.provider.fetchTile(zoomLvl, x, y))
+      this.pendingTiles.push({ x, y, zoomLvl, mapLayer, meshId, imagePromise})
+      imagePromise.then((image) =>{
+
+        if (!image) {
+          this.removeTileFromPending(meshId,mapLayer)
+          return
+        }
+        const texture = new THREE.Texture(image)
+        texture.generateMipmaps = false
+        texture.format = THREE.RGBAFormat
+        texture.magFilter = THREE.LinearFilter
+        texture.minFilter = THREE.LinearFilter
+        texture.needsUpdate = true
+        let corners = tileToCorners(x, y, zoomLvl, latitude, longitude)
+        corners = corners.map((c) => {
+          return { ...c, z: -100 }
+        })
+        if (mesh) {
+          geometry = mesh.geometry
+          material = mesh.material
+          geometry = updateBufferRoofGeometry(corners, [], geometry)
+          mesh.geometry = geometry
+          material.map = texture
+          material.needsUpdate = true
+          mesh.userData.mapLayer = this.provider.mapLayer
+          mesh.userData.type = 'tileMeshes'
+          mesh.userData.meshId = meshId
+          mesh.frustumCulled = false
+          mesh.needsUpdate = true
+          mesh.updateMatrix()
+        } else {
+          material = new THREE.MeshBasicMaterial({
+            map: texture,
+            color: 0xffffff,
+            side: THREE.FrontSide,
+            transparent: true
+          })
+          material.map = texture
+          material.needsUpdate = true
+          geometry = getBufferRoofGeometry(corners)
+          if (geometry) {
+            mesh = new THREE.Mesh(geometry, material)
+            mesh.userData.type = 'tileMeshes'
+            mesh.userData.meshId = meshId
+            mesh.userData.mapLayer = this.provider.mapLayer
+            this.meshes.tileMeshes[meshId] = mesh
+            this.scene.add(mesh)
+          }
+        }
+        //image.parentNode.removeChild(image);
+        this.removeTileFromPending(meshId,mapLayer)
+      })
+    },
+    renderGoogleTiles() {
+      this.clearByType('tileMeshes')
+      if (this.backgroundMap) {
+        this.backgroundMap.clear()
+        this.scene.remove(this.backgroundMap)
+        this.clearThreeObjects(this.backgroundMap)
+      }
+      this.backgroundMap = new THREE.Group()
+
+      let googleMapType = 'satellite'
+      switch (this.selectedMapLayer.key) {
+        case 'googleLayerRoadmap':
+          googleMapType = 'roadmap'
+          break
+        case 'googleLayer':
+          googleMapType = 'satellite'
+          break
+        case 'googleLayerTerrain':
+          googleMapType = 'terrain'
+          break
+      }
+
+      let apiKey = process.env.VUE_APP_GOOGLE_MAP_API_KEY
+      let backgroundPlane = []
+      let size = 640
+      let planeGeometry = []
+      let planeMaterial = []
+      let texture = []
+      let zoomLevels = [19, 16]
+      for (
+        let indexGoogleBackground = 0;
+        indexGoogleBackground < zoomLevels.length;
+        indexGoogleBackground++
+      ) {
+        let zoomLevel = zoomLevels[indexGoogleBackground]
+        let groundResolution =
+          (Math.cos((this.layoutSettings.layout_latitude * Math.PI) / 180) *
+            2 *
+            Math.PI *
+            6378137) /
+          (256 * Math.pow(2, zoomLevel))
+        let sizeInMeter = groundResolution * size
+        planeGeometry[indexGoogleBackground] = new THREE.PlaneGeometry(
+          sizeInMeter,
+          sizeInMeter
+        )
+        let googleBackgroundUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${
+          this.layoutSettings.layout_latitude +
+          ',' +
+          this.layoutSettings.layout_longitude
+        }&maptype=${googleMapType}&zoom=${zoomLevel}&size=${size}x${size}&key=${apiKey}`
+
+        texture[indexGoogleBackground] = this.loader.load(googleBackgroundUrl)
+        planeMaterial[indexGoogleBackground] = new THREE.MeshBasicMaterial({
+          map: texture[indexGoogleBackground],
+          side: THREE.DoubleSide
+        })
+        backgroundPlane[indexGoogleBackground] = new THREE.Mesh(
+          planeGeometry[indexGoogleBackground],
+          planeMaterial[indexGoogleBackground]
+        )
+        backgroundPlane[indexGoogleBackground].position.z =
+          -indexGoogleBackground / 2
+        this.backgroundMap.add(backgroundPlane[indexGoogleBackground])
+      }
+      this.scene.add(this.backgroundMap)
+    }
+  },
+  watch:{
+    selectedMapLayer(newMapLayer){
+      this.pendingTiles = this.pendingTiles.filter(
+        (t) => {
+          if(t.mapLayer != newMapLayer.key){
+            t.imagePromise.cancel()
+            return false
+          }
+        }
+      )
+    }
+  }
+}