Performance update

.changeset/serious-mangos-teach.md

@@ -0,0 +1,5 @@
+---
+"@benjaminbours/composite-core": patch
+---
+
+Pre compute center of bounce elements to avoid useless computation at run time

.changeset/short-hairs-jog.md

@@ -0,0 +1,5 @@
+---
+"@benjaminbours/composite-core": patch
+---
+
+Optimize performance of raycasting

packages/core/lib/elements/ElementToBounce.ts

@@ -1,11 +1,11 @@
 import { Camera, Mesh, Vector3 } from 'three';
 import { gsap } from 'gsap';
 import { Side } from '../types';
-import { getCenterPoint } from '../levels';
 import { degreesToRadians } from '../helpers/math';
 
 export class ElementToBounce extends Mesh {
     public bounce = true;
+    public center = new Vector3();
 
     constructor(
         geometry: any,
@@ -19,9 +19,7 @@ export class ElementToBounce extends Mesh {
     // TODO: Rename this function, its unclear
     // TODO: Duplicate function with player
     public get2dPosition = (camera: Camera) => {
-        // TODO: Try to optimize and save the center somewhere to avoid useless recomputation
-        const p = getCenterPoint(this);
-        const vector = p.project(camera);
+        const vector = this.localToWorld(this.center.clone()).project(camera);
         const x = (vector.x + 1) / 2;
         const y = (vector.y + 1) / 2;
         return new Vector3(x, y);

packages/core/lib/levels/levels.utils.ts

@@ -386,15 +386,8 @@ export function createBounce(
     wall.rotation.set(rotation.x, rotation.y, rotation.z);
     wall.updateMatrix();
     wall.geometry.center();
+    wall.geometry.computeBoundingBox();
+    wall.geometry.boundingBox?.getCenter(wall.center);
     wall.name = ElementName.BOUNCE(side);
     return wall;
 }
-
-export function getCenterPoint(mesh: Mesh) {
-    const geometry = mesh.geometry;
-    geometry.computeBoundingBox();
-    const center = new Vector3();
-    geometry.boundingBox?.getCenter(center);
-    mesh.localToWorld(center);
-    return center;
-}

packages/core/lib/physics/player.movement.utils.ts

@@ -7,7 +7,6 @@ import {
     COLLISION_DETECTION_RANGE,
     COLLISION_DETECTION_RANGE_INSIDE,
 } from './collision.system';
-import { getCenterPoint } from '../levels';
 import { isLevelWithBounces } from './simulation.updaters';
 import { degreesToRadians } from '../helpers/math';
 
@@ -55,7 +54,7 @@ function handleEnterElementToBounce(
     bounceElement: ElementToBounce,
     player: PlayerGameState,
 ) {
-    const center = getCenterPoint(bounceElement);
+    const center = bounceElement.localToWorld(bounceElement.center.clone());
     player.state = MovableComponentState.inside;
     player.insideElementID = bounceElement.bounceID;
     player.position.x = center.x;
@@ -179,8 +178,6 @@ export function handleJump(
         } else {
             player.velocity.y = rotatedVector.y;
         }
-
-        console.log(player.velocity);
     }
 }
 

packages/core/lib/physics/raycaster.ts

@@ -1,4 +1,4 @@
-import { Vector3, Raycaster, Intersection, Object3D, Vec2 } from 'three';
+import { Vector3, Raycaster, Intersection, Object3D, Vec2, Box3 } from 'three';
 
 export interface INearestObjects {
     right?: Intersection;
@@ -31,15 +31,26 @@ export function getNearestObjects(
 ): INearestObjects {
     const nearestObjects: INearestObjects = {};
 
+    // TODO: Can be optimize by filtering at a higher level.
+    // like this, it is filtered once for each player
+    const obstaclesToConsider = obstacles.filter((obstacle) => {
+        const playerBBox = new Box3().setFromCenterAndSize(
+            new Vector3(position.x, position.y, 0),
+            new Vector3(100, 100, 0),
+        );
+        const obstacleBox = new Box3().setFromObject(obstacle);
+        return playerBBox.intersectsBox(obstacleBox);
+    });
+
     const directions = Object.keys(RAYS) as (keyof typeof RAYS)[];
     for (let i = 0; i < directions.length; i++) {
         const direction = directions[i];
 
         const ray = RAYS[direction];
         RAYCASTER.set(new Vector3(position.x, position.y, 0), ray);
 
-        // TODO: Investigate if we need the recursive flag enabled
-        const intersectObjects = RAYCASTER.intersectObjects(obstacles);
+        const intersectObjects =
+            RAYCASTER.intersectObjects(obstaclesToConsider);
 
         if (!intersectObjects.length) {
             continue;