feat: Implement 2D physics system with Rapier integration

Author: silwalanish

.github/workflows/publish-examples.yml

@@ -15,7 +15,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: "24"
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4

examples/showcase/package.json

@@ -9,18 +9,22 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@silwalanish/engine": "workspace:*",
     "@silwalanish/geometry": "workspace:*",
+    "@silwalanish/physics": "workspace:*",
     "@silwalanish/planet": "workspace:*",
     "@silwalanish/renderer": "workspace:*",
     "@silwalanish/scene": "workspace:*",
     "@silwalanish/shader": "workspace:*",
-    "@silwalanish/engine": "workspace:*",
-    "gl-matrix": "^3.4.3"
+    "gl-matrix": "^3.4.3",
+    "nanoid": "^5.1.5"
   },
   "devDependencies": {
     "@silwalanish/tsconfig": "workspace:*",
     "@types/three": "^0.176.0",
     "typescript": "~5.7.2",
-    "vite": "^6.3.1"
+    "vite": "^6.3.1",
+    "vite-plugin-top-level-await": "^1.5.0",
+    "vite-plugin-wasm": "^3.4.1"
   }
 }

examples/showcase/src/app.ts

@@ -1,19 +1,17 @@
 import { vec3, vec4 } from "gl-matrix";
+import { Plane } from "@silwalanish/geometry";
+import { GameObject } from "@silwalanish/engine";
 import { BasicMaterial } from "@silwalanish/shader";
 import { GroundManager } from "@silwalanish/planet";
+import { PhysicsScene2D } from "@silwalanish/physics";
+import { Camera, MeshComponent, SceneNode } from "@silwalanish/scene";
 import {
   CanvasSurface,
   Orthographic,
   Perspective,
   Renderer,
 } from "@silwalanish/renderer";
-import {
-  Camera,
-  MeshComponent,
-  SceneGraph,
-  SceneNode,
-} from "@silwalanish/scene";
-import { Plane } from "@silwalanish/geometry";
+
 import { Player } from "./player";
 import { PlayerAction } from "./playercontrol";
 
@@ -27,12 +25,12 @@ export class App {
   private _lastTime: number;
   private _surface: CanvasSurface;
   private _renderer: Renderer;
-  private _scene: SceneGraph;
+  private _scene: PhysicsScene2D;
   private _perspective: Perspective;
   private _orthographic: Orthographic;
   private _groundManager: GroundManager;
-  private _camera: Camera;
-  private _sky: SceneNode;
+  private _camera: Camera<any>;
+  private _sky: GameObject<any>;
   private _player: Player;
   private _domElement: HTMLDivElement;
   private _speedLabel: HTMLLabelElement;
@@ -46,13 +44,13 @@ export class App {
     });
     this._renderer = new Renderer(this._surface);
 
-    this._scene = new SceneGraph();
+    this._scene = new PhysicsScene2D();
     this._perspective = new Perspective(90, 1.33, 0.01, 1000);
-    this._orthographic = new Orthographic(-50, 50, -50, 50, 0.01, 1000);
+    this._orthographic = new Orthographic(-50, 50, 0, 100, 0.01, 1000);
     this._camera = new Camera("activeCamera");
     this._groundManager = new GroundManager(this._camera);
     this._sky = new SceneNode("sky");
-    this._player = new Player(this._camera);
+    this._player = new Player();
 
     this._speedLabel = document.createElement("label");
 
@@ -146,7 +144,7 @@ export class App {
     this._scene.camera = this._camera;
 
     this._sky.mesh = new MeshComponent(
-      new Plane(150, 100),
+      new Plane(150, 400),
       new BasicMaterial("skyMaterial", vec4.fromValues(0.5, 0.7, 1, 1))
     );
     this._sky.transform.Position = vec3.fromValues(0, 0, -20);
@@ -173,8 +171,17 @@ export class App {
         3,
         "0"
       );
+      this._scene.physicsUpdate();
+
       this._scene.update(deltaTime);
       this._renderer.render(this._scene, this._orthographic);
+
+      this._camera.transform.Position = vec3.fromValues(
+        this._player.transform.getWorldPosition()[0],
+        this._camera.transform.Position[1],
+        this._camera.transform.Position[2]
+      );
+      this._camera.lookAt(vec3.fromValues(0, 0, -1));
     }
 
     window.requestAnimationFrame(() => {

examples/showcase/src/main.ts

@@ -1,7 +1,11 @@
 import "./app.css";
 import { App } from "./app";
 
-window.addEventListener("DOMContentLoaded", () => {
+import { initPhysics } from "@silwalanish/physics";
+
+initPhysics();
+
+window.addEventListener("rapierLoaded", () => {
   const element = document.getElementById("app");
   if (!element) {
     throw new Error("Element with id 'app' not found");

examples/showcase/src/player.ts

@@ -1,30 +1,38 @@
-import { vec3, vec4 } from "gl-matrix";
+import { vec2, vec3, vec4 } from "gl-matrix";
 import { Plane } from "@silwalanish/geometry";
 import { BasicMaterial } from "@silwalanish/shader";
-import { Camera, MeshComponent, SceneNode } from "@silwalanish/scene";
+import { Physics2DType } from "@silwalanish/engine";
+import { MeshComponent, SceneNode } from "@silwalanish/scene";
+import { RapierPhysics2D, PhysicsShapeType, Box } from "@silwalanish/physics";
+
 import { PlayerControl } from "./playercontrol";
 
-const MAX_ACCELERATION = 100.0;
-const MAX_DECCELERATION = 0.0;
+const MAX_SPEED = 100.0;
 const ACCELERATION_RATE = 5.0;
-const DECCLERATION_RATE = 20.0;
-
-export class Player extends SceneNode {
-  private _camera: Camera;
+const DECCLERATION_RATE = 5.0;
 
+export class Player extends SceneNode<PhysicsShapeType> {
   private _speed: number = 0.0;
   private _control: PlayerControl;
 
-  public constructor(camera: Camera) {
+  public constructor() {
     super("player");
 
-    this._camera = camera;
     this._control = new PlayerControl();
 
     this.mesh = new MeshComponent(
-      new Plane(2, 5),
+      new Plane(2, 2),
       new BasicMaterial("playerMaterial", vec4.fromValues(1, 0, 0, 1))
     );
+
+    this.physics = new RapierPhysics2D(
+      Physics2DType.DYNAMIC,
+      10.0, // mass
+      0.0, // friction
+      Box(1, 1)
+    );
+
+    this.transform.Position = vec3.fromValues(0, 70, 0);
   }
 
   public get control() {
@@ -35,28 +43,27 @@ export class Player extends SceneNode {
     return this._speed;
   }
 
-  public override update(deltaTime: number): void {
-    super.update(deltaTime);
+  public override physicsUpdate(): void {
+    super.physicsUpdate();
 
-    if (this._control.isAccelerating) {
-      this._speed = Math.min(
-        this._speed + ACCELERATION_RATE * deltaTime,
-        MAX_ACCELERATION
-      );
-    } else if (this._control.isDeccelerating) {
-      this._speed = Math.max(
-        this._speed - DECCLERATION_RATE * deltaTime,
-        -MAX_DECCELERATION
-      );
-    } else if (this._speed > 0.0) {
-      this._speed = Math.max(this._speed - ACCELERATION_RATE * deltaTime, 0.0);
-    } else if (this._speed < 0.0) {
-      this._speed = Math.min(this._speed + ACCELERATION_RATE * deltaTime, 0.0);
+    if (!this.physicsBody) {
+      return;
     }
 
-    this.transform.Position[0] += this._speed * deltaTime;
+    const body = this.physicsBody;
 
-    this._camera.transform.Position[0] = this.transform.Position[0];
-    this._camera.lookAt(vec3.fromValues(0, 0, -1));
+    this._speed = body.velocity[0];
+
+    if (this._speed < MAX_SPEED) {
+      if (this._control.isAccelerating) {
+        body.applyImpulse(vec2.fromValues(ACCELERATION_RATE, 0));
+      } else if (this._control.isDeccelerating) {
+        body.applyImpulse(vec2.fromValues(-DECCLERATION_RATE, 0));
+      }
+    }
+  }
+
+  public override update(deltaTime: number): void {
+    super.update(deltaTime);
   }
 }

examples/showcase/vite.config.ts

@@ -1,4 +1,8 @@
+import wasm from "vite-plugin-wasm";
+import topLevelAwait from "vite-plugin-top-level-await";
+
 /** @type {import('vite').UserConfig} */
 export default {
   base: "./",
+  plugins: [wasm(), topLevelAwait()],
 };

packages/engine/package.json

@@ -20,7 +20,7 @@
   },
   "scripts": {
     "build": "tsc",
-    "clean": "tsc --build --clean",
+    "clean": "tsc --build --clean && rm -rf dist",
     "dev": "tsc --watch",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

packages/engine/src/gameobject.ts

@@ -1,25 +1,29 @@
 import { Mesh } from "./mesh";
+import { Scene } from "./scene";
 import { Physics2D } from "./physics2d";
 import { Transform } from "./transform";
 import { PhysicsBody } from "./physicsbody";
 
-export interface GameObject {
+export interface GameObject<ShapeType = any> {
   get id(): string;
   get name(): string;
   get mesh(): Mesh | null;
   get transform(): Transform;
   get children(): GameObject[];
-  get physics(): Physics2D | null;
+  get physics(): Physics2D<ShapeType> | null;
   get parent(): GameObject | null;
   get physicsBody(): PhysicsBody | null;
+  get scene(): Scene<ShapeType> | null;
 
   set mesh(value: Mesh | null);
   set transform(value: Transform);
-  set physics(value: Physics2D | null);
+  set physics(value: Physics2D<ShapeType> | null);
   set parent(value: GameObject | null);
   set physicsBody(value: PhysicsBody | null);
+  set scene(value: Scene<ShapeType> | null);
 
   update(deltaTime: number): void;
+  physicsUpdate(): void;
   addChild(child: GameObject): void;
   removeChild(child: GameObject): void;
 }

packages/engine/src/physics2d.ts

@@ -1,17 +1,15 @@
-import { vec2 } from "gl-matrix";
-
 export enum Physics2DType {
   STATIC = "static",
   DYNAMIC = "dynamic",
   KINEMATIC = "kinematic",
 }
 
-export interface Physics2D {
+export interface Physics2D<TShapeType> {
   get id(): string;
   get type(): Physics2DType;
 
-  get density(): number;
+  get mass(): number;
   get friction(): number;
 
-  get shape(): vec2[];
+  get shape(): TShapeType;
 }

packages/engine/src/physicsbody.ts

@@ -1,3 +1,12 @@
+import { vec2 } from "gl-matrix";
+
 export interface PhysicsBody {
   get id(): string;
+
+  get velocity(): vec2;
+
+  resetForces(): void;
+
+  addForce(force: vec2): void;
+  applyImpulse(impulse: vec2): void;
 }