WayRenderer 性能优化, 压力测试

src/components/Model3DView.vue

@@ -870,7 +870,6 @@ function handleFileChange(file) {
       const arrayBuffer = reader.result
       //@ts-ignore
       loader.parseAsync(arrayBuffer, '').then((content) => {
-        debugger
         addGroupToScene(content.scene)
       })
 

src/core/Constract.ts

@@ -33,6 +33,7 @@ const Constract = Object.freeze({
   HEIGHT_WAY_LABEL: 0.03,
   HEIGHT_WAY_LINE: 0.02,
 
+  MAX_WAY_INSTANCES: 10000,
   MAX_MEASURE_INSTANCES: 1000,
   MAX_GSTORE_INSTANCES: 10000,
   MAX_PALLET_INSTANCES: 10000,

src/core/manager/LineSegmentManager.ts

@@ -4,13 +4,15 @@ import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeome
 import { LineSegments2 } from 'three/examples/jsm/lines/LineSegments2'
 import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'
 import type { Object3DLike, Vector3Like } from '@/types/ModelTypes.ts'
+import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry'
+import { Line2 } from 'three/examples/jsm/lines/Line2'
 
 /**
  * 线段管理器
  */
 export default class LineSegmentManager {
   private readonly viewport: Viewport
-  private readonly lineGeometry: LineSegmentsGeometry
+  private readonly lineGeometry: LineGeometry // LineSegmentsGeometry
   private readonly lineMaterial: LineMaterial
   private readonly lineSegments: LineSegments2
   private readonly segments: Map<string, LineManageWrap> = new Map()
@@ -242,7 +244,7 @@ export default class LineSegmentManager {
     this.lineGeometry.setColors(this.colorArray)
 
     // 设置实例计数为可见线段数量
-    this.lineGeometry.instanceCount = Array.from(this.segments.values()).filter(s => s.visible).length
+    // this.lineGeometry.instanceCount = Array.from(this.segments.values()).filter(s => s.visible).length
     this.needsUpdate = false
   }
 
@@ -257,10 +259,10 @@ export default class LineSegmentManager {
     this.viewport = viewport
     this.lineMaterial = lineMaterial
 
-    this.lineGeometry = new LineSegmentsGeometry()
+    this.lineGeometry = new LineGeometry() // new LineSegmentsGeometry()
 
     // 创建线段的渲染对象
-    this.lineSegments = new LineSegments2(this.lineGeometry, this.lineMaterial)
+    this.lineSegments = new Line2(this.lineGeometry, this.lineMaterial)
     this.lineSegments.name = name
     this.lineSegments.frustumCulled = false
     this.viewport.scene.add(this.lineSegments)

src/example/example1.js

@@ -330,13 +330,27 @@ export default {
           t: 'carton',
           v: true,
           tf: [[0, 0.1, 0], [0, 0, 0], [1.0, 1.0, 1.0]],
-          dt: { in: [], out: [], center: [], storeWidth: 1.4, storeDepth: 1.4 }
+          dt: { in: [], out: [], center: [] }
+        },
+        {
+          id: 'way1',
+          t: 'way',
+          v: true,
+          tf: [[2, 0.1, 0], [0, 0, 0], [1.0, 1.0, 1.0]],
+          dt: { in: [], out: [], center: ['way2'] }
+        },
+        {
+          id: 'way2',
+          t: 'way',
+          v: true,
+          tf: [[5, 0.1, 0], [0, 0, 0], [1.0, 1.0, 1.0]],
+          dt: { in: [], out: [], center: ['way1'] }
         }
       ]
     },
     {
       catalogCode: '__f1', t: 'floor',
-      items: buildAgvPerformanceData('measure', 100, 100)
+      items: buildAgvPerformanceData('way', 100, 100)
     },
     {
       catalogCode: '__f2', t: 'floor',

src/modules/carton/CartonRenderer.ts

@@ -37,11 +37,15 @@ export default class PalletRenderer extends BaseRenderer {
       this.cartonGeometry = mesh.geometry
       this.cartonMaterial = new THREE.MeshPhongMaterial({ color: 0xc29a70 }) // mesh.material as THREE.Material
       this.cartonGeometry.scale(0.01, 0.01, 0.01)
-      this.cartonGeometry.rotateX(Math.PI / 2)
+      // this.cartonGeometry.rotateX(-Math.PI / 2)
+      this.cartonGeometry.center()
+      this.cartonGeometry.translate(0, 0.3, 0)
 
+      cartonTexture.flipY = true
       cartonTexture.wrapS = THREE.RepeatWrapping
       cartonTexture.wrapT = THREE.RepeatWrapping
-      cartonTexture.repeat.set(1, 1)
+      cartonTexture.repeat.set(1, -1)
+      cartonTexture.offset.y = 1
       //@ts-ignore
       this.cartonMaterial.map = cartonTexture
       //@ts-ignore

src/modules/measure/MeasureRenderer.ts

@@ -34,32 +34,6 @@ export default class MeasureRenderer extends BaseRenderer {
   readonly defaultScale: THREE.Vector3 = new THREE.Vector3(0.25, 0.25, 0.1)
   readonly defaultRotation: THREE.Vector3 = new THREE.Vector3(90, 0, 0)
 
-  get pointManager(): InstancePointManager {
-    if (!this.tempViewport) {
-      throw new Error('tempViewport is not set.')
-    }
-    return this.tempViewport.getOrCreatePointManager(this.itemTypeName, () =>
-      // 构建 InstanceMesh 代理对象
-      InstancePointManager.create(this.itemTypeName,
-        this.tempViewport,
-        this.pointGeometry,
-        this.pointMaterial,
-        Constract.MAX_MEASURE_INSTANCES)
-    )
-  }
-
-  get lineSegmentManager(): LineSegmentManager {
-    if (!this.tempViewport) {
-      throw new Error('tempViewport is not set.')
-    }
-    return this.tempViewport.getOrCreateLineManager(this.itemTypeName, () =>
-      // 构建 LineSegment.points 代理对象
-      LineSegmentManager.create(this.itemTypeName,
-        this.tempViewport,
-        this.lineMaterial)
-    )
-  }
-
   /**
    * 所有的点，必须使用同一个尺寸, 改属性也无效
    */
@@ -109,6 +83,32 @@ export default class MeasureRenderer extends BaseRenderer {
     this.tempViewport.labelManager.removeLabel(object)
   }
 
+  get pointManager(): InstancePointManager {
+    if (!this.tempViewport) {
+      throw new Error('tempViewport is not set.')
+    }
+    return this.tempViewport.getOrCreatePointManager(this.itemTypeName, () =>
+      // 构建 InstanceMesh 代理对象
+      InstancePointManager.create(this.itemTypeName,
+        this.tempViewport,
+        this.pointGeometry,
+        this.pointMaterial,
+        Constract.MAX_MEASURE_INSTANCES)
+    )
+  }
+
+  get lineSegmentManager(): LineSegmentManager {
+    if (!this.tempViewport) {
+      throw new Error('tempViewport is not set.')
+    }
+    return this.tempViewport.getOrCreateLineManager(this.itemTypeName, () =>
+      // 构建 LineSegment.points 代理对象
+      LineSegmentManager.create(this.itemTypeName,
+        this.tempViewport,
+        this.lineMaterial)
+    )
+  }
+
   dispose() {
     super.dispose()
     this.pointMaterial?.dispose()

src/modules/way/WayRenderer.ts

@@ -4,10 +4,12 @@ import { Text } from 'troika-three-text'
 import MoveLinePointPng from '@/assets/images/moveline_point.png'
 import SimSunTTF from '@/assets/fonts/simsunb.ttf'
 import { getLineId } from '@/core/ModelUtils.ts'
-import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'
-import { numberToString } from '@/utils/webutils.ts'
 import Constract from '@/core/Constract.ts'
 import type { ExtrudeGeometryOptions } from 'three/src/geometries/ExtrudeGeometry'
+import InstancePointManager from '@/core/manager/InstancePointManager.ts'
+import type { Object3DLike } from '@/types/ModelTypes.ts'
+import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'
+import LineSegmentManager from '@/core/manager/LineSegmentManager.ts'
 
 /**
  * 辅助测量工具渲染器
@@ -17,166 +19,184 @@ export default class WayRenderer extends BaseRenderer {
   static POINT_NAME = 'way_point'
   static LINE_NAME = 'way_line'
 
+  pointGeometry: THREE.BufferGeometry
   pointMaterial: THREE.Material
-  lineMaterial = new THREE.MeshBasicMaterial({
+  lineMaterial: LineMaterial = new LineMaterial({
     color: 0xa0cfff,
-    transparent: true,
+    linewidth: 0.8,
-    opacity: 0.2,
+    vertexColors: false,
-    side: THREE.DoubleSide
+    dashed: false,
+    gapSize: 0,
+    worldUnits: true
   })
+  // lineMaterial = new THREE.MeshBasicMaterial({
+  //   color: 0xa0cfff,
+  //   transparent: true,
+  //   opacity: 0.2,
+  //   side: THREE.DoubleSide
+  // })
 
   /**
    * 默认点的高度, 防止和地面重合
    */
   readonly defulePositionY: number = Constract.HEIGHT_WAY
-  readonly defaultScale: THREE.Vector3 = new THREE.Vector3(0.25, 0.25, 0.1)
+  readonly defaultScale: THREE.Vector3 = new THREE.Vector3(0.5, 0.1, 0.5)
-  readonly defaultRotation: THREE.Vector3 = new THREE.Vector3(90, 0, 0)
+  readonly defaultRotation: THREE.Vector3 = new THREE.Vector3(0, 0, 0)
-
-  constructor(itemTypeName: string) {
-    super(itemTypeName)
-  }
 
   async init() {
     return Promise.all([
       super.init(),
-      this.loadFont()
+      new THREE.TextureLoader().loadAsync(MoveLinePointPng)
-    ])
-  }
-
-  async loadFont() {
-    return new Promise<void>((resolve, reject) => {
-      new THREE.TextureLoader().load(
-        MoveLinePointPng,
-        (texture) => {
-          this.pointMaterial = new THREE.SpriteMaterial({
-            map: texture,
-            transparent: true,
-            side: THREE.DoubleSide
-          })
-          resolve()
-        },
-        undefined,
-        function(err) {
-          reject(err)
-        }
-      )
-    })
-  }
-
-  /**
-   * 所有的点，必须使用同一个尺寸, 改属性也无效
-   */
-  override afterCreateOrUpdatePoint(item: ItemJson, option: RendererCudOption, object: THREE.Object3D) {
-    super.afterCreateOrUpdatePoint(item, option, object)
-
-    const point = object
-    point.position.y = this.defulePositionY
-    point.scale.set(this.defaultScale.x, this.defaultScale.y, this.defaultScale.z)
-    point.rotation.set(
-      THREE.MathUtils.degToRad(this.defaultRotation.x),
-      THREE.MathUtils.degToRad(this.defaultRotation.y),
-      THREE.MathUtils.degToRad(this.defaultRotation.z)
-    )
-  }
-
-  private _createOrUpdateLine(startPosition: THREE.Vector3, endPosition: THREE.Vector3, type: LinkType) {
-    const width = 1
-    const halfWidth = width / 2
-
-    const path = new THREE.LineCurve3(
-      new THREE.Vector3(startPosition.x, startPosition.z, halfWidth - Constract.HEIGHT_WAY_LINE),
-      new THREE.Vector3(endPosition.x, endPosition.z, halfWidth - Constract.HEIGHT_WAY_LINE)
-    )
 
-    const shape = new THREE.Shape()
+    ]).then(([_, texture]) => {
-    shape.moveTo(halfWidth, -halfWidth)
+      texture.flipY = false
-    shape.lineTo(halfWidth, halfWidth)
 
-    const extrudeSettings: ExtrudeGeometryOptions = {
+      this.pointGeometry = new THREE.PlaneGeometry(1, 1).rotateX(-Math.PI / 2)
-      steps: 2,           // 沿路径的分段数
+      this.pointGeometry.center()
-      depth: 1,           // 实际由路径长度决定
-      bevelEnabled: false, // 禁用倒角
-      extrudePath: path   // 挤出路径
-    }
-
-    const extrudedGeometry = new THREE.ExtrudeGeometry(shape, extrudeSettings)
-    extrudedGeometry.rotateX(Math.PI / 2)
 
-    return new THREE.Mesh(extrudedGeometry, this.lineMaterial)
+      this.pointMaterial = new THREE.MeshBasicMaterial({
+        map: texture,
+        transparent: true,
+        depthWrite: false,
+        side: THREE.DoubleSide
+      })
+      this.pointMaterial.needsUpdate = true
+    })
   }
 
-  createLineBasic(start: ItemJson, end: ItemJson, type: LinkType): THREE.Object3D {
+  createPointBasic(item: ItemJson, option?: RendererCudOption): Object3DLike {
-    const startPosition = new THREE.Vector3(start.tf[0][0], 0, start.tf[0][2])
+    // 不允许改变高度/角度/大小
-    const endPosition = new THREE.Vector3(end.tf[0][0], 0, end.tf[0][2])
+    item.tf = [
-
+      [item.tf[0][0], this.defulePositionY, item.tf[0][2]],
-    const group = new THREE.Group()
+      [this.defaultRotation.x, this.defaultRotation.y, this.defaultRotation.z],
-    const lineMesh = this._createOrUpdateLine(startPosition, endPosition, type)
+      [this.defaultScale.x, this.defaultScale.y, this.defaultScale.z]
-    group.add(lineMesh)
+    ]
-
+    return this.pointManager.createPoint(item)
-
-    const midPoint = new THREE.Vector3()
-      .addVectors(startPosition, endPosition)
-      .multiplyScalar(0.5)
-
-    const distance = (startPosition.distanceTo(endPosition) * 1000).toFixed(0)
-
-    const label = new Text()
-    label.text = distance
-    label.font = SimSunTTF
-    label.fontSize = 0.2
-    label.color = '#5f5f5f'
-    label.opacity = 0.8
-    label.anchorX = 'center'
-    label.anchorY = 'middle'
-    label.depthOffset = 1
-    label.material.depthTest = false
-    label.name = WayRenderer.LABEL_NAME
-    label.quaternion.copy(this.tempViewport.camera.quaternion)
-    label.sync()
-    label.position.set(midPoint.x, Constract.HEIGHT_WAY_LABEL, midPoint.z)
-
-    group.add(label)
-
-    return group
   }
 
-  updateLine(start: ItemJson, end: ItemJson, type: LinkType, option?: RendererCudOption) {
+  createLineBasic(start: ItemJson, end: ItemJson, type: LinkType): Object3DLike {
-    super.updateLine(start, end, type, option)
-
-    const startPosition = new THREE.Vector3(start.tf[0][0], 0.01, start.tf[0][2])
-    const endPosition = new THREE.Vector3(end.tf[0][0], 0.01, end.tf[0][2])
-
     const lineId = getLineId(start.id, end.id, type)
-    const group = this.tempViewport.entityManager.findLineObjectById(lineId)
+    return this.lineSegmentManager.createLine(lineId, start.tf[0], end.tf[0], this.lineMaterial.color)
-
-    // 清空group里的元素
-    const label: Text = group.children[1]
-    group.clear()
-
-    const lineMesh = this._createOrUpdateLine(startPosition, endPosition, type)
-    group.add(lineMesh)
-
-    const midPoint = new THREE.Vector3()
-      .addVectors(startPosition, endPosition)
-      .multiplyScalar(0.5)
-
-    const distance = (startPosition.distanceTo(endPosition) * 1000).toFixed(0)
-    label.text = distance
-    label.quaternion.copy(this.tempViewport.camera.quaternion)
-    label.sync()
-    label.position.set(midPoint.x, midPoint.y, midPoint.z)
-    group.add(label)
   }
 
-  createPointBasic(item: ItemJson, option?: RendererCudOption): THREE.Object3D {
+  // private _createOrUpdateLine(startPosition: THREE.Vector3, endPosition: THREE.Vector3, type: LinkType) {
-    const obj = new THREE.Sprite(this.pointMaterial as THREE.SpriteMaterial)
+  //   const width = 1
-    obj.name = WayRenderer.POINT_NAME
+  //   const halfWidth = width / 2
-    return obj
+  //
-  }
+  //   const path = new THREE.LineCurve3(
+  //     new THREE.Vector3(startPosition.x, startPosition.z, halfWidth - Constract.HEIGHT_WAY_LINE),
+  //     new THREE.Vector3(endPosition.x, endPosition.z, halfWidth - Constract.HEIGHT_WAY_LINE)
+  //   )
+  //
+  //   const shape = new THREE.Shape()
+  //   shape.moveTo(halfWidth, -halfWidth)
+  //   shape.lineTo(halfWidth, halfWidth)
+  //
+  //   const extrudeSettings: ExtrudeGeometryOptions = {
+  //     steps: 2,           // 沿路径的分段数
+  //     depth: 1,           // 实际由路径长度决定
+  //     bevelEnabled: false, // 禁用倒角
+  //     extrudePath: path   // 挤出路径
+  //   }
+  //
+  //   const extrudedGeometry = new THREE.ExtrudeGeometry(shape, extrudeSettings)
+  //   extrudedGeometry.rotateX(Math.PI / 2)
+  //
+  //   return new THREE.Mesh(extrudedGeometry, this.lineMaterial)
+  // }
+
+  // createLineBasic(start: ItemJson, end: ItemJson, type: LinkType): THREE.Object3D {
+  //   const startPosition = new THREE.Vector3(start.tf[0][0], 0, start.tf[0][2])
+  //   const endPosition = new THREE.Vector3(end.tf[0][0], 0, end.tf[0][2])
+  //
+  //   const group = new THREE.Group()
+  //   const lineMesh = this._createOrUpdateLine(startPosition, endPosition, type)
+  //   group.add(lineMesh)
+  //
+  //
+  //   const midPoint = new THREE.Vector3()
+  //     .addVectors(startPosition, endPosition)
+  //     .multiplyScalar(0.5)
+  //
+  //   const distance = (startPosition.distanceTo(endPosition) * 1000).toFixed(0)
+  //
+  //   const label = new Text()
+  //   label.text = distance
+  //   label.font = SimSunTTF
+  //   label.fontSize = 0.2
+  //   label.color = '#5f5f5f'
+  //   label.opacity = 0.8
+  //   label.anchorX = 'center'
+  //   label.anchorY = 'middle'
+  //   label.depthOffset = 1
+  //   label.material.depthTest = false
+  //   label.name = WayRenderer.LABEL_NAME
+  //   label.quaternion.copy(this.tempViewport.camera.quaternion)
+  //   label.sync()
+  //   label.position.set(midPoint.x, Constract.HEIGHT_WAY_LABEL, midPoint.z)
+  //
+  //   group.add(label)
+  //
+  //   return group
+  // }
+  //
+  // updateLine(start: ItemJson, end: ItemJson, type: LinkType, option?: RendererCudOption) {
+  //   super.updateLine(start, end, type, option)
+  //
+  //   const startPosition = new THREE.Vector3(start.tf[0][0], 0.01, start.tf[0][2])
+  //   const endPosition = new THREE.Vector3(end.tf[0][0], 0.01, end.tf[0][2])
+  //
+  //   const lineId = getLineId(start.id, end.id, type)
+  //   const group = this.tempViewport.entityManager.findLineObjectById(lineId)
+  //
+  //   // 清空group里的元素
+  //   const label: Text = group.children[1]
+  //   group.clear()
+  //
+  //   const lineMesh = this._createOrUpdateLine(startPosition, endPosition, type)
+  //   group.add(lineMesh)
+  //
+  //   const midPoint = new THREE.Vector3()
+  //     .addVectors(startPosition, endPosition)
+  //     .multiplyScalar(0.5)
+  //
+  //   const distance = (startPosition.distanceTo(endPosition) * 1000).toFixed(0)
+  //   label.text = distance
+  //   label.quaternion.copy(this.tempViewport.camera.quaternion)
+  //   label.sync()
+  //   label.position.set(midPoint.x, midPoint.y, midPoint.z)
+  //   group.add(label)
+  // }
 
   dispose() {
     super.dispose()
     this.pointMaterial?.dispose()
     this.lineMaterial?.dispose()
   }
+
+  get lineSegmentManager(): LineSegmentManager {
+    if (!this.tempViewport) {
+      throw new Error('tempViewport is not set.')
+    }
+    return this.tempViewport.getOrCreateLineManager(this.itemTypeName, () =>
+      // 构建 LineSegment.points 代理对象
+      LineSegmentManager.create(this.itemTypeName,
+        this.tempViewport,
+        this.lineMaterial)
+    )
+  }
+
+  get pointManager(): InstancePointManager {
+    if (!this.tempViewport) {
+      throw new Error('tempViewport is not set.')
+    }
+    return this.tempViewport.getOrCreatePointManager(this.itemTypeName, () =>
+      // 构建 InstanceMesh 代理对象
+      InstancePointManager.create(this.itemTypeName,
+        this.tempViewport,
+        this.pointGeometry,
+        this.pointMaterial,
+        Constract.MAX_WAY_INSTANCES)
+    )
+  }
 }