Reintroduce Havok on the client #260 (#261)

* Reintroduce Havok on the client #260 * Make it work on the client
neu5 · Dec 28, 2023 · 9058afe · 9058afe
1 parent 3fc1ac4
commit 9058afe
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 61 deletions.
diff --git a/packages/client/src/main.ts b/packages/client/src/main.ts
@@ -85,7 +85,7 @@ ui.MobileControls.updateControls({ dialog, game, mobileControlsEls });
 
 const startEngineLoop = ({
   engine,
-  playersMap,
+  // playersMap,
   scene,
 }: {
   engine: Engine;
@@ -117,51 +117,45 @@ const startEngineLoop = ({
       return;
     }
 
-    dataFromServer.forEach((playerFromServer: PlayerFromServer) => {
-      const player = playersMap.find(
-        (currentPlayer) => currentPlayer.userID === playerFromServer.userID
-      );
-
-      if (!player || !playerFromServer.sphere) {
-        return;
-      }
-
-      const {
-        sphere: { position },
-      } = playerFromServer;
-
-      // @ts-ignore
-      player.vehicle.position.set(position._x, position._y, position._z);
-
-      // const {
-      //   vehicle: {
-      //     body: { position, quaternion },
-      //     wheels,
-      //   },
-      // } = playerFromServer;
-
-      // player.vehicle?.body.position.set(position.x, position.y, position.z);
-      // player.vehicle?.body.rotationQuaternion.set(
-      //   quaternion.x,
-      //   quaternion.y,
-      //   quaternion.z,
-      //   quaternion.w
-      // );
-
-      // wheels.forEach((wheel: { position: Position }, idx: number) => {
-      //   player.vehicle?.wheels[idx].position.set(
-      //     wheel.position.x,
-      //     wheel.position.y,
-      //     wheel.position.z
-      //   );
-      //   player.vehicle?.wheels[idx].rotationQuaternion.set(
-      //     quaternion.x,
-      //     quaternion.y,
-      //     quaternion.z,
-      //     quaternion.w
-      //   );
-      // });
-    });
+    // dataFromServer.forEach((playerFromServer: PlayerFromServer) => {
+    // const player = playersMap.find(
+    //   (currentPlayer) => currentPlayer.userID === playerFromServer.userID
+    // );
+    // if (!player || !playerFromServer.sphere) {
+    //   return;
+    // }
+    // const {
+    //   sphere: { position },
+    // } = playerFromServer;
+    // @ts-ignore
+    // player.vehicle.position.set(position._x, position._y, position._z);
+    // const {
+    //   vehicle: {
+    //     body: { position, quaternion },
+    //     wheels,
+    //   },
+    // } = playerFromServer;
+    // player.vehicle?.body.position.set(position.x, position.y, position.z);
+    // player.vehicle?.body.rotationQuaternion.set(
+    //   quaternion.x,
+    //   quaternion.y,
+    //   quaternion.z,
+    //   quaternion.w
+    // );
+    // wheels.forEach((wheel: { position: Position }, idx: number) => {
+    //   player.vehicle?.wheels[idx].position.set(
+    //     wheel.position.x,
+    //     wheel.position.y,
+    //     wheel.position.z
+    //   );
+    //   player.vehicle?.wheels[idx].rotationQuaternion.set(
+    //     quaternion.x,
+    //     quaternion.y,
+    //     quaternion.z,
+    //     quaternion.w
+    //   );
+    // });
+    // });
 
     FPSEl.textContent = `${engine.getFps().toFixed()} fps`;
   });

diff --git a/packages/client/src/scene/scene.ts b/packages/client/src/scene/scene.ts
@@ -1,12 +1,17 @@
 import {
   CascadedShadowGenerator,
   DirectionalLight,
+  HavokPlugin,
   HemisphericLight,
+  MeshBuilder,
+  PhysicsAggregate,
+  PhysicsShapeType,
   Scene,
   Vector3,
 } from "@babylonjs/core";
+import HavokPhysics from "@babylonjs/havok";
 
-import { addBox, addColors, addPlane, addVehicle } from "../utils";
+import { addBox, addColors } from "../utils";
 
 import type { Engine } from "@babylonjs/core";
 import type { GameConfig, GameObject } from "@neu5/types/src";
@@ -38,6 +43,17 @@ let actions = {
 //   "players-indicators"
 // ) as HTMLElement;
 
+const groundSize = 100;
+// let groundPhysicsMaterial = { friction: 0.2, restitution: 0.3 };
+
+async function getInitializedHavok() {
+  try {
+    return await HavokPhysics();
+  } catch (e) {
+    return e;
+  }
+}
+
 const createScene = async (engine: Engine) => {
   const scene: Scene = new Scene(engine);
 
@@ -48,6 +64,12 @@ const createScene = async (engine: Engine) => {
 
   const shadowGenerator = new CascadedShadowGenerator(1024, light);
 
+  const havokInstance = await getInitializedHavok();
+
+  const hk = new HavokPlugin(true, havokInstance);
+
+  scene.enablePhysics(new Vector3(0, -9.8, 0), hk);
+
   return { scene, shadowGenerator };
 };
 
@@ -101,7 +123,7 @@ const keyup = (event: KeyboardEvent) => {
 
 const startRace = async ({
   engine,
-  gameConfig,
+  // gameConfig,
   gameObjects,
   playersMap,
   sendAction,
@@ -126,21 +148,54 @@ const startRace = async ({
   });
 
   addColors(scene);
-  addPlane({ scene, width: gameConfig.width, height: gameConfig.height });
+  // addPlane({ scene, width: gameConfig.width, height: gameConfig.height });
+
+  const ground = MeshBuilder.CreateGround(
+    "ground",
+    { width: groundSize, height: groundSize },
+    scene
+  );
+  ground.receiveShadows = true;
+
+  // eslint-disable-next-line
+  const groundAggregate = new PhysicsAggregate(
+    ground,
+    PhysicsShapeType.BOX,
+    { mass: 0 },
+    scene
+  );
+
+  // const sphere = addSphere({ diameter: 2, shadowGenerator });
+  const sphere = MeshBuilder.CreateSphere(
+    "sphere",
+    { diameter: 4, segments: 32 },
+    scene
+  );
+
+  sphere.position.y = 20;
+  shadowGenerator.addShadowCaster(sphere, true);
+
+  // eslint-disable-next-line
+  const sphereAggregate = new PhysicsAggregate(
+    sphere,
+    PhysicsShapeType.SPHERE,
+    { mass: 1, restitution: 0.75 },
+    scene
+  );
 
   if (playersMap.length) {
-    playersMap.forEach((player: any) => {
-      player.vehicle = addVehicle({
-        colorName: player.color,
-        scene,
-        shadowGenerator,
-      });
-      // player.vehicle = addRigidVehicle({
-      //   colorName: player.color,
-      //   scene,
-      //   shadowGenerator,
-      // });
-    });
+    // playersMap.forEach((player: any) => {
+    // player.vehicle = addVehicle({
+    //   colorName: player.color,
+    //   scene,
+    //   shadowGenerator,
+    // });
+    // player.vehicle = addRigidVehicle({
+    //   colorName: player.color,
+    //   scene,
+    //   shadowGenerator,
+    // });
+    // });
   }
 
   setInterval(() => {