feat: better walls

app/level.ts

@@ -32,6 +32,10 @@ export type Level = {
 
 const ARENA = 12
 const WALL_HEIGHT = 4
+/** How deep the perimeter walls are. Thick enough to read as solid walls (and to
+ *  give the doorway real jambs); their outer faces sit flush with the room edge,
+ *  so they eat into the interior, not the terrain. */
+const WALL_THICKNESS = 1.5
 const CRATE = { x: -2, z: -2, half: 1, height: 1 }
 /** Z-bias lifting the stone floor above the terrain skirt that laps under the
  *  room edge (see `buildLevel`). Big enough to beat depth precision, too small
@@ -96,20 +100,21 @@ export function buildLevel(): Level {
 
   const walls = mesh()
   const h = WALL_HEIGHT
-  // Three inward-facing walls; the north (-Z) side is left open onto the world.
-  // No ceiling, so the sky shows above.
-  quad(walls, [ARENA, 0, ARENA], [-ARENA, 0, ARENA], [-ARENA, h, ARENA], [ARENA, h, ARENA], 12, 2.5)
-  quad(walls, [ARENA, 0, -ARENA], [ARENA, 0, ARENA], [ARENA, h, ARENA], [ARENA, h, -ARENA], 12, 2.5)
-  quad(walls, [-ARENA, 0, ARENA], [-ARENA, 0, -ARENA], [-ARENA, h, -ARENA], [-ARENA, h, ARENA], 12, 2.5)
+  const t = WALL_THICKNESS
+  // Three thick perimeter walls, outer faces flush with the room edge; the north
+  // (-Z) side is left open onto the world. No ceiling, so the sky shows above.
+  slab(walls, -ARENA, ARENA, ARENA - t, ARENA, 0, h, 0.5) // south (+Z)
+  slab(walls, ARENA - t, ARENA, -ARENA, ARENA - t, 0, h, 0.5) // east (+X)
+  slab(walls, -ARENA, -ARENA + t, -ARENA, ARENA - t, 0, h, 0.5) // west (-X)
 
   // Crate on the flat room floor.
   const crate = mesh()
   box(crate, CRATE.x, CRATE.z, CRATE.half, 0, CRATE.height)
 
   const colliders: Aabb[] = [
-    wall(-ARENA, ARENA, ARENA - 1, ARENA),
-    wall(ARENA - 1, ARENA, -ARENA, ARENA),
-    wall(-ARENA, -ARENA + 1, -ARENA, ARENA),
+    wall(-ARENA, ARENA, ARENA - t, ARENA),
+    wall(ARENA - t, ARENA, -ARENA, ARENA - t),
+    wall(-ARENA, -ARENA + t, -ARENA, ARENA - t),
     {
       minX: CRATE.x - CRATE.half,
       maxX: CRATE.x + CRATE.half,
@@ -138,8 +143,10 @@ function mesh(): Mesh {
   return { vertices: [], indices: [] }
 }
 
+/** A perimeter wall collider: blocks from the sides, and `standable` so you can
+ *  jump up and land on its top (given enough JUMP_SPEED to clear WALL_HEIGHT). */
 function wall(minX: number, maxX: number, minZ: number, maxZ: number): Aabb {
-  return { minX, maxX, minZ, maxZ, top: WALL_HEIGHT, standable: false }
+  return { minX, maxX, minZ, maxZ, top: WALL_HEIGHT, standable: true }
 }
 
 /** One flat quad (two tris). Corners run a (uv 0,0) -> b (us,0) -> c (us,vs) ->
@@ -157,6 +164,20 @@ function quad(m: Mesh, a: Corner, b: Corner, c: Corner, d: Corner, us: number, v
   m.indices.push(base, base + 1, base + 2, base, base + 2, base + 3)
 }
 
+/** An axis-aligned box from (x0,z0)-(x1,z1), y0..y1: four sides + top, no bottom
+ *  (never seen from below). `tpu` = texture tiles per world unit, so every face
+ *  tiles at the same density whatever its size. Used for the thick walls. */
+function slab(m: Mesh, x0: number, x1: number, z0: number, z1: number, y0: number, y1: number, tpu: number): void {
+  const dx = (x1 - x0) * tpu
+  const dz = (z1 - z0) * tpu
+  const dy = (y1 - y0) * tpu
+  quad(m, [x0, y1, z0], [x1, y1, z0], [x1, y1, z1], [x0, y1, z1], dx, dz)
+  quad(m, [x0, y0, z0], [x1, y0, z0], [x1, y1, z0], [x0, y1, z0], dx, dy)
+  quad(m, [x1, y0, z1], [x0, y0, z1], [x0, y1, z1], [x1, y1, z1], dx, dy)
+  quad(m, [x0, y0, z1], [x0, y0, z0], [x0, y1, z0], [x0, y1, z1], dz, dy)
+  quad(m, [x1, y0, z0], [x1, y0, z1], [x1, y1, z1], [x1, y1, z0], dz, dy)
+}
+
 /** A box centered at (cx, cz), rising `height` units from `base`: top face plus
  *  four sides, one uv tile per face. No bottom (never seen). */
 function box(m: Mesh, cx: number, cz: number, half: number, base: number, height: number): void {

app/player.ts

@@ -14,9 +14,13 @@ export type Player = {
 
 export const EYE_HEIGHT = 1.6
 const RADIUS = 0.35
-const SPEED = 4
+const SPEED = 6
+/** Speed multiplier while a Run key (Shift) is held. Tweak to taste; set high to
+ *  blast across the big terrain -- move+collision is substepped, so walls stay
+ *  solid even at big multipliers. */
+const RUN_MULTIPLIER = 2
 const GRAVITY = 22
-const JUMP_SPEED = 8
+const JUMP_SPEED = 20
 const NPC_RADIUS = 0.5
 
 export namespace Player {
@@ -26,13 +30,31 @@ export namespace Player {
       player.velocityY = JUMP_SPEED
       player.onGround = false
     }
-    moveHorizontal(player, keys, dt)
-    collide(player, level)
+    // Move + collide in small substeps: collision is discrete (move, then push
+    // out), so a single big running step could otherwise skip clean through a
+    // wall. Substepping keeps each advance short enough to always hit it.
+    const steps = moveSubsteps(keys, dt)
+    for (let i = 0; i < steps; i++) {
+      moveHorizontal(player, keys, dt / steps)
+      collide(player, level)
+    }
     fall(player, dt, level)
   }
 
+  /** Run-speed factor for the frame: RUN_MULTIPLIER while Shift is held, else 1. */
+  function runFactor(keys: Set<string>): number {
+    return keys.has("ShiftLeft") || keys.has("ShiftRight") ? RUN_MULTIPLIER : 1
+  }
+
+  /** Number of move+collide substeps so each advances at most ~RADIUS, keeping
+   *  the player from tunneling walls however fast they run. */
+  function moveSubsteps(keys: Set<string>, dt: number): number {
+    const perFrame = SPEED * runFactor(keys) * dt * Math.SQRT2
+    return Math.max(1, Math.ceil(perFrame / RADIUS))
+  }
+
   function moveHorizontal(player: Player, keys: Set<string>, dt: number): void {
-    const speed = SPEED * dt
+    const speed = SPEED * runFactor(keys) * dt
     const fx = Math.sin(player.yaw)
     const fz = -Math.cos(player.yaw)
     const rx = Math.cos(player.yaw)