@eturnity/eturnity_3d 8.16.0 → 8.16.2

package/src/helper/render/moduleField.js

@@ -2,6 +2,11 @@ import * as THREE from 'three'
 import { getBufferModuleFieldGeometry } from './geometryHandler'
 export default {
   methods: {
+    data() {
+      return {
+        areModuleFieldsVisible: true,
+      }
+    },
     renderModuleFields() {
       this.clearByType('moduleFieldsMeshes')
       const moduleFieldPolygons = this.polygons.filter((p) =>
@@ -11,8 +16,6 @@ export default {
         let material
         if (moduleFieldPolygon.data.number_of_panels_override) {
           material = this.material.moduleFieldWithPanelOveride
-        } else if (this.areModuleFieldsVisible) {
-          material = this.material.moduleField
         } else {
           return
         }
@@ -25,10 +28,17 @@ export default {
           mesh.userData.layer = moduleFieldPolygon.layer
           mesh.userData.meshId = moduleFieldPolygon.id
           mesh.userData.polygonId = moduleFieldPolygon.id
+          mesh.visible = this.areModuleFieldsVisible
           this.scene.add(mesh)
           this.meshes.moduleFieldsMeshes[moduleFieldPolygon.id] = mesh
         }
       })
     },
+    setModuleFieldsVisibility(isVisible) {
+      this.areModuleFieldsVisible = isVisible
+      Object.values(this.meshes['moduleFieldsMeshes']).forEach(
+        (mesh) => (mesh.visible = isVisible)
+      )
+    },
   },
 }

package/src/helper/render/overlay.js

@@ -5,15 +5,13 @@ export default {
   data() {
     return {}
   },
-  created() {
-  },
+  created() {},
   computed: {
     ...mapState({}),
   },
   methods: {
-    renderOverlays() {
+    async renderOverlays() {
       let overlays = OverlayLayer.getItems()
-
       let overlaysIds = overlays.map((o) => o.id)
       let overlayMeshesIds = Object.keys(this.meshes.overlayMeshes)
       overlayMeshesIds.forEach((meshId) => {
@@ -22,8 +20,66 @@ export default {
           this.clearMeshFromScene(mesh, this.scene)
         }
       })
+      const yearlySunShadingOverlay = overlays.find(
+        (o) => o.type == 'yearly_sun_shading'
+      )
+      let yearlySunShadingMaterial = null
+      if (yearlySunShadingOverlay) {
+        yearlySunShadingMaterial =
+          await yearlySunShadingOverlay.getProjectionMaterial()
+      }
       OverlayLayer.getItems().forEach((overlay) => {
-        overlay.renderOnThreeJS(this)
+        const meshPromise = overlay.renderOnThreeJS(this)
+        if (meshPromise) {
+          meshPromise.then((mesh) => {
+            if (mesh) {
+              const texturedRoof = mesh.getObjectByName('textured_roof')
+              if (texturedRoof) {
+                if (
+                  yearlySunShadingOverlay &&
+                  yearlySunShadingOverlay.isActive &&
+                  yearlySunShadingMaterial
+                ) {
+                  if (!Array.isArray(texturedRoof.material)) {
+                    texturedRoof.material = [texturedRoof.material]
+                  }
+                  texturedRoof.material = texturedRoof.material.filter(
+                    (m) => m.userData.overlayType != 'yearly_sun_shading'
+                  )
+                  texturedRoof.material.push(yearlySunShadingMaterial)
+                  if (
+                    texturedRoof.geometry.groups.length !=
+                    texturedRoof.material.length
+                  ) {
+                    texturedRoof.geometry.clearGroups()
+                    for (let k = 0; k < texturedRoof.material.length; k++) {
+                      texturedRoof.geometry.addGroup(0, Infinity, k)
+                    }
+                  }
+
+                  // Ensure all materials in the array are properly initialized
+                  texturedRoof.userData.test = true
+                  this.applyTextureOnMesh(texturedRoof.material, texturedRoof)
+                } else {
+                  if (Array.isArray(texturedRoof.material)) {
+                    texturedRoof.material = texturedRoof.material.filter(
+                      (m) => m.userData.overlayType != 'yearly_sun_shading'
+                    )
+                  } else {
+                    texturedRoof.material = [texturedRoof.material]
+                    texturedRoof.geometry.addGroup(0, Infinity, 0)
+                  }
+                }
+                texturedRoof.material.forEach((material) => {
+                  if (material) {
+                    material.needsUpdate = true
+                  }
+                })
+              }
+            }
+          })
+        }
+        //[TODO] Project YearlySunShadingOverlay's material on mesh
       })
     },
     updateOverlayRendering() {

package/src/helper/render/projectionMaterial.js

@@ -1,3 +1,4 @@
+import * as THREE from 'three'
 function cloneMaterialArrayAndAddEmission(material, color) {
   let newMaterial = material.clone()
   newMaterial.camera = material.camera
@@ -29,6 +30,7 @@ export default {
       this.material.roof = [...this.material.roof, ...this.overlayMaterials]
       this.renderImageOverlayOnBackground()
       this.applyTextureOnRoofs()
+      this.applyTextureOnObstacles()
     },
   },
 }

package/src/helper/render/roof.js

@@ -120,7 +120,6 @@ export default {
             this.scene.add(mesh)
           }
         }
-        //roofGeometries.push(this.meshes.roofMeshes[roofPolygon.id].geometry)
         if (mesh) {
           this.applyTextureOnMesh(material, mesh)
         }

package/src/helper/render/shadingMaterial/ShadingImageGenerator.js

@@ -0,0 +1,241 @@
+import * as THREE from 'three'
+import {
+  getEdgesForHorizonForShader,
+  blurImagePreserveTransparency,
+} from '../shadingMaterial/helper'
+import yearlySunShaderMaterial from './yearlySunShaderMaterial'
+import { getBufferRoofGeometry } from '../geometryHandler'
+import {
+  getNormalVectorFromFlatOutline,
+  getOptimizedGHI,
+} from '@eturnity/eturnity_maths'
+
+export default class ShadingImageGenerator {
+  constructor({ lat, lng, dataGrids }) {
+    this.lat = lat
+    this.lng = lng
+    this.dataGrids = dataGrids
+    this.maxGHI = getOptimizedGHI({ dataGrids, lat, lng })
+    this.scene = new THREE.Scene()
+    this.projectionCamera = new THREE.OrthographicCamera(
+      -1,
+      1,
+      1,
+      -1,
+      0.1,
+      1000
+    )
+    this.canvas = this.createCanvas()
+    this.renderer = new THREE.WebGLRenderer({
+      canvas: this.canvas,
+      alpha: true,
+    })
+    this.renderer.setClearColor(0x000000, 0)
+  }
+  async generateShadingFactors(polygons, edges, normal = null) {
+    polygons.forEach((polygon) => {
+      let material = new yearlySunShaderMaterial({
+        lat: this.lat,
+        lng: this.lng,
+        dataGrids: this.dataGrids,
+        colorfull: false,
+        isShadingFactor: true,
+        normalVector: normal,
+      })
+      this.renderPolygon(polygon, edges, material)
+    })
+    this.updateBox()
+    this.updateCanvasFromBoxSize()
+    this.updateProjectionCamera()
+    const renderTarget = this.getRenderTarget()
+    const averageValues = this.getAverageValueFromRenderTarget(
+      polygons,
+      renderTarget
+    )
+    this.resetScene()
+    return averageValues
+  }
+  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())
+  }
+  updateCanvasFromBoxSize() {
+    if (!this.boxSize) return
+    this.canvasWidth = this.boxSize.x * 10 // 10cm resolution
+    this.canvasHeight = this.boxSize.y * 10
+    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.canvasWidth = Math.round(this.canvasWidth)
+    this.canvasHeight = Math.round(this.canvasHeight)
+    this.renderer.setSize(this.canvasWidth, this.canvasHeight)
+    this.canvas.width = this.canvasWidth
+    this.canvas.height = this.canvasHeight
+  }
+  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
+    this.projectionCamera.position.set(
+      this.boxCenter.x,
+      this.boxCenter.y,
+      this.boxCenter.z + 100
+    )
+    this.projectionCamera.lookAt(this.boxCenter.x, this.boxCenter.y, 0)
+    this.projectionCamera.left = left
+    this.projectionCamera.right = right
+    this.projectionCamera.top = top
+    this.projectionCamera.bottom = bottom
+    this.projectionCamera.updateProjectionMatrix()
+  }
+  renderPolygon(polygon, edges, material) {
+    const normalVector = polygon.normalVector
+      ? polygon.normalVector
+      : getNormalVectorFromFlatOutline(polygon.outline)
+    const point = polygon.outline[0]
+    const plane = { normalVector, point }
+    const edgesForHorizon = getEdgesForHorizonForShader(plane, edges)
+    material.updateEdges(edgesForHorizon)
+    let geometry = getBufferRoofGeometry(polygon.outline, [])
+    this.mesh = new THREE.Mesh(geometry, material)
+    this.scene.add(this.mesh)
+  }
+  getRenderTarget() {
+    const renderTarget = new THREE.WebGLRenderTarget(
+      this.canvasWidth,
+      this.canvasHeight
+    )
+    this.renderer.setRenderTarget(renderTarget)
+    this.renderer.render(this.scene, this.projectionCamera)
+
+    // Get the URL from the render target
+    this.renderer.setRenderTarget(null)
+    this.getImage()
+    return renderTarget
+  }
+  getImage() {
+    return new Promise((resolve) => {
+      // Render the scene
+      this.renderer.render(this.scene, this.projectionCamera)
+
+      // Generate image from canvas
+      const imageUrl = this.canvas.toDataURL()
+      blurImagePreserveTransparency(imageUrl)
+        .then((blurredImageUrl) => {
+          resolve(blurredImageUrl)
+        })
+        .catch((error) => {
+          resolve(imageUrl)
+        })
+    })
+  }
+  getAverageValueFromRenderTarget(polygons, renderTarget) {
+    const pixelBuffer = new Uint8Array(this.canvasWidth * this.canvasHeight * 4)
+    this.renderer.readRenderTargetPixels(
+      renderTarget,
+      0,
+      0,
+      this.canvasWidth,
+      this.canvasHeight,
+      pixelBuffer
+    )
+    return polygons.map((polygon) => {
+      const pixelCoords = this.convertOutlineToPixelCoords(polygon.outline)
+      const pixels = this.getPixelsWithinPolygon(pixelCoords, pixelBuffer)
+      return {
+        polygonId: polygon.id,
+        shadingFactor: this.calculateAverageRedValue(pixels),
+      }
+    })
+  }
+
+  convertOutlineToPixelCoords(outline) {
+    return outline.map((point) => {
+      const x =
+        ((point.x / 1000 - this.boxCenter.x) / this.boxSize.x + 0.5) *
+        this.canvasWidth
+      const y =
+        ((point.y / 1000 - this.boxCenter.y) / this.boxSize.y + 0.5) *
+        this.canvasHeight
+      return { x: Math.round(x), y: Math.round(y) }
+    })
+  }
+
+  getPixelsWithinPolygon(pixelCoords, pixelBuffer) {
+    const pixels = []
+    const minX = Math.min(...pixelCoords.map((p) => p.x))
+    const maxX = Math.max(...pixelCoords.map((p) => p.x))
+    const minY = Math.min(...pixelCoords.map((p) => p.y))
+    const maxY = Math.max(...pixelCoords.map((p) => p.y))
+
+    for (let y = minY; y <= maxY; y++) {
+      for (let x = minX; x <= maxX; x++) {
+        if (this.isPointInPolygon({ x, y }, pixelCoords)) {
+          const index = (y * this.canvasWidth + x) * 4
+          pixels.push(pixelBuffer[index])
+          pixels.push(pixelBuffer[index + 1])
+          pixels.push(pixelBuffer[index + 2])
+          pixels.push(pixelBuffer[index + 3])
+        }
+      }
+    }
+
+    return pixels
+  }
+
+  isPointInPolygon(point, polygon) {
+    let inside = false
+    for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+      const xi = polygon[i].x,
+        yi = polygon[i].y
+      const xj = polygon[j].x,
+        yj = polygon[j].y
+      const intersect =
+        yi > point.y !== yj > point.y &&
+        point.x < ((xj - xi) * (point.y - yi)) / (yj - yi) + xi
+      if (intersect) inside = !inside
+    }
+    return inside
+  }
+
+  calculateAverageRedValue(pixels) {
+    if (pixels.length === 0) return 0
+
+    let sum = 0
+    let count = 0
+    for (let i = 0; i < pixels.length; i += 4) {
+      const r = pixels[i]
+      const a = pixels[i + 3]
+      if (a === 255) {
+        // Only consider pixels with full opacity
+        sum += r
+        count++
+      }
+    }
+
+    return count > 0 ? sum / count / 255 : 0 // Normalize to 0-1 range
+  }
+  createCanvas() {
+    const canvas = document.createElement('canvas')
+    canvas.width = 100
+    canvas.height = 100
+    canvas.style.position = 'fixed'
+    canvas.style.top = '100px'
+    canvas.style.left = '50px'
+    canvas.style.zIndex = 0
+    return canvas
+  }
+  resetScene() {
+    this.scene.remove(this.mesh)
+  }
+  updateCanvasSize() {
+    this.canvas.width = this.canvasWidth
+    this.canvas.height = this.canvasHeight
+  }
+}

package/src/helper/render/shadingMaterial/helper.js

@@ -0,0 +1,109 @@
+import {
+  verticalProjectionOnPlane,
+  multiplyVector,
+} from '@eturnity/eturnity_maths'
+
+export function getEdgesForHorizonForShader(plane, edges) {
+  let roofEdgesForHorizon = edges
+    .filter((e) => e.layer == 'roof')
+    .map((e) => e.outline)
+  let obstacleEdgesForHorizon = edges
+    .filter((e) => e.layer == 'obstacle')
+    .map((e) => {
+      const obstaclePolygon = e.belongsTo[0].polygon
+      let obstacleHeight
+      if (obstaclePolygon.isParallel) {
+        obstacleHeight = parseInt(obstaclePolygon.height || 0)
+        return e.outline.map((p) => {
+          return { ...p, z: p.z + obstacleHeight }
+        })
+      } else {
+        obstacleHeight = parseInt(
+          obstaclePolygon.heightReference + obstaclePolygon.height || 0
+        )
+        return e.outline.map((p) => {
+          return { ...p, z: obstacleHeight }
+        })
+      }
+    })
+  let edgesForHorizon = [...roofEdgesForHorizon, ...obstacleEdgesForHorizon]
+    .filter((e) =>
+      e.some(
+        (p) =>
+          p.z >
+          0.1 + verticalProjectionOnPlane(p, plane.normalVector, plane.point).z
+      )
+    )
+    .map((e) => e.map((p) => multiplyVector(1 / 1000, p)))
+  return edgesForHorizon
+}
+export function blurImagePreserveTransparency(imageUrl, blurRadius = 10) {
+  return new Promise((resolve, reject) => {
+    const image = new Image()
+    image.crossOrigin = 'Anonymous' // Handle CORS if needed
+
+    image.onload = () => {
+      const canvas = document.createElement('canvas')
+      const context = canvas.getContext('2d')
+
+      canvas.width = image.width
+      canvas.height = image.height
+
+      // Draw the original image onto the canvas
+      context.drawImage(image, 0, 0)
+
+      // Get the image data
+      const imageData = context.getImageData(0, 0, canvas.width, canvas.height)
+      const data = imageData.data
+
+      // Create a temporary canvas for the blur effect
+      const tempCanvas = document.createElement('canvas')
+      const tempContext = tempCanvas.getContext('2d')
+      tempCanvas.width = canvas.width
+      tempCanvas.height = canvas.height
+
+      // Draw the image onto the temporary canvas
+      tempContext.putImageData(imageData, 0, 0)
+
+      // Apply the blur filter to the temporary canvas
+      tempContext.filter = `blur(${blurRadius}px)`
+      tempContext.drawImage(tempCanvas, 0, 0)
+
+      // Get the blurred image data
+      const blurredImageData = tempContext.getImageData(
+        0,
+        0,
+        tempCanvas.width,
+        tempCanvas.height
+      )
+      const blurredData = blurredImageData.data
+
+      // Combine the original and blurred data, preserving transparency
+      for (let i = 0; i < data.length; i += 4) {
+        const isPxNotBlack = data[i] > 0 || data[i + 1] > 0 || data[i + 2] > 0
+        if (data[i + 3] > 0 && isPxNotBlack) {
+          // If the pixel is not transparent
+          data[i] = blurredData[i]
+          data[i + 1] = blurredData[i + 1]
+          data[i + 2] = blurredData[i + 2]
+        }
+      }
+
+      // Put the combined image data back onto the original canvas
+      context.putImageData(imageData, 0, 0)
+
+      // Generate the resulting image URL
+      const resultImageUrl = canvas.toDataURL()
+
+      // Remove canvases after use
+      canvas.remove()
+      tempCanvas.remove()
+
+      resolve(resultImageUrl)
+    }
+    image.onerror = (error) => {
+      reject(error)
+    }
+    image.src = imageUrl
+  })
+}