Improve performance by reducing the number of update radar entity events

Author: Scarabol

src/game/component/MapMarkerComponent.ts

@@ -1,4 +1,5 @@
 import { AbstractGameComponent } from '../ECS'
+import { Vector3 } from 'three'
 
 export const MAP_MARKER_TYPE = {
     default: 1,
@@ -15,6 +16,9 @@ export const MAP_MARKER_CHANGE = {
 export type MapMarkerChange = typeof MAP_MARKER_CHANGE[keyof typeof MAP_MARKER_CHANGE]
 
 export class MapMarkerComponent extends AbstractGameComponent {
+    readonly lastPos: Vector3 = new Vector3()
+    lastUpdateMs: number = 0
+
     constructor(readonly mapMarkerType: MapMarkerType) {
         super()
     }

src/game/system/MapMarkerUpdateSystem.ts

@@ -3,6 +3,7 @@ import { PositionComponent } from '../component/PositionComponent'
 import { MAP_MARKER_CHANGE, MapMarkerComponent } from '../component/MapMarkerComponent'
 import { UpdateRadarEntityEvent } from '../../event/LocalEvents'
 import { EventBroker } from '../../event/EventBroker'
+import { MAP_MAX_UPDATE_INTERVAL, TILESIZE } from '../../params'
 
 export class MapMarkerUpdateSystem extends AbstractGameSystem {
     readonly componentsRequired: Set<Function> = new Set([PositionComponent, MapMarkerComponent])
@@ -12,9 +13,15 @@ export class MapMarkerUpdateSystem extends AbstractGameSystem {
         for (const entity of dirty) {
             try {
                 const components = this.ecs.getComponents(entity)
-                const mapMarkerType = components.get(MapMarkerComponent).mapMarkerType
+                const mapMarkerComponent = components.get(MapMarkerComponent)
+                const mapMarkerType = mapMarkerComponent.mapMarkerType
+                mapMarkerComponent.lastUpdateMs += elapsedMs
                 const position = components.get(PositionComponent).position
-                EventBroker.publish(new UpdateRadarEntityEvent(mapMarkerType, entity, MAP_MARKER_CHANGE.update, position))
+                if (mapMarkerComponent.lastUpdateMs > MAP_MAX_UPDATE_INTERVAL && position.distanceToSquared(mapMarkerComponent.lastPos) / TILESIZE * 15 > 2) {
+                    EventBroker.publish(new UpdateRadarEntityEvent(mapMarkerType, entity, MAP_MARKER_CHANGE.update, position))
+                    mapMarkerComponent.lastUpdateMs = 0
+                    mapMarkerComponent.lastPos.copy(position)
+                }
             } catch (e) {
                 console.error(e)
             }

src/gui/radar/MapView.ts

@@ -95,12 +95,10 @@ export class MapView extends BaseElement {
                     entities.delete(event.entity)
                     break
             }
-            // TODO This should be limited in frontend, since requests blocked by worker still produce overhead
             this.mapRenderer.redrawEntities(this.offset, event.mapMarkerType, this.surfaceRectSize, Array.from(entities.values())).then(() => this.notifyRedraw())
         })
         this.registerEventListener(EventKey.UPDATE_RADAR_CAMERA, (event: UpdateRadarCamera) => {
             this.cameraRect = event.cameraRect
-            // TODO This should be limited in frontend, since requests blocked by worker still produce overhead
             this.mapRenderer.redrawCamera(this.offset, this.surfaceRectSize, this.cameraRect).then(() => this.notifyRedraw())
         })
     }