use bounding boxes to optimize collision detection

2025-01-19 14:24:19 +09:00
parent 0a4853aff9
commit e75c0d2944
10 changed files with 275 additions and 94 deletions
@@ -21,9 +21,9 @@ camera.updateProjectionMatrix()
 camera.layers.enable(1)
 camera.layers.enable(2)

-// const entityMaterial = new THREE.MeshToonMaterial({ color: 0xffffff })
 const projectileMaterial = new THREE.MeshToonMaterial({ color: 0xcccccc })
-const terrainMaterial = new THREE.MeshToonMaterial({ color: 0xffd700 })
+const terrainMaterial = new THREE.MeshToonMaterial({ color: 0x5c4033 })
+const bboxMaterial = new THREE.MeshToonMaterial({ color: 0xffd700, transparent: true, opacity: 0.2 })
 const opacity = 0.3
 const teamMaterials = {
  blue: new THREE.MeshToonMaterial({ color: 0x4444ff }),
@@ -328,7 +328,7 @@ function connectWebSocket() {
        rangeMarker.scale.y = e.height / rangeMarkerSize
        rangeMarker.position.y = (e.height / (rangeMarkerSize * 2)) - (e.height / 100)
        rangeMarker.layers.set(1)
-        buffMarker.visible = false
+        rangeMarker.visible = false
        entity.add(rangeMarker)

        entities[e.id] = entity
@@ -345,7 +345,7 @@ function connectWebSocket() {
      hp.scale.x = percentageHp
      hp.position.x = -(1 - percentageHp) / 2

-      entity.children.at(4).visible = e.id == playerId
+      entity.children.at(4).visible = e.id == playerId // TODO: undo, just for clarity
      entity.children.at(3).children.at(0).visible = e.casting != null
    }

@@ -414,6 +414,17 @@ function connectWebSocket() {
        terrain.userData.id = t.id
        scene.add(terrain)
        terrains[t.id] = terrain
+
+        // TODO: bboxes aren't tracked and can leak memory
+        const bboxValues = Object.values(t.bbox)
+        if (bboxValues.length >= 4) {
+          const width = (bboxValues[1] - bboxValues[3]) / 100
+          const height = (bboxValues[0] - bboxValues[2]) / 100
+
+          const bbox = new THREE.Mesh(new THREE.BoxGeometry(width, height, 0.2), bboxMaterial)
+          bbox.position.set((bboxValues[3] / 100) + (width / 2), (bboxValues[2] / 100) + (height / 2), 0)
+          scene.add(bbox)
+        }
      }

      terrain.position.set(t.position.x / 100, t.position.y / 100, 0)
@@ -168,7 +168,6 @@
    </style>
  </head>
  <body>
-    <!-- TODO: display buffs -->
    <div class="debug-panel">
      <p>Connection: <span id="connection"></span></p>
      <pre id="state"></pre>