nova64 0.2.4 → 0.2.6

package/dist/examples/instancing-demo/code.js

@@ -0,0 +1,315 @@
+// NOVA64 INSTANCING SHOWCASE
+// Demonstrates GPU instancing, LOD, and PBR/normal-map features
+// added in the Phase 2/4 performance and feature updates.
+//
+// Controls:
+//   WASD / Arrow keys  — move camera
+//   Q / E             — zoom out / in
+//   1 / 2 / 3         — switch showcase scene
+//   F                 — toggle wireframe HUD overlay
+
+// ── State ───────────────────────────────────────────────────────────────────
+let scene = 1;
+let prevScene = 0;
+let time = 0;
+let showHUD = true;
+
+// Instanced mesh handles (crystalId/dustId checked in update)
+let crystalId = null;
+let dustId = null;
+let crystalLightId = null;
+
+// Camera orbit
+let camAngle = 0;
+let camRadius = 30;
+let camHeight = 12;
+
+// ── Init ─────────────────────────────────────────────────────────────────────
+export async function init() {
+  setCameraFOV(60);
+  setAmbientLight(0x223344, 0.4);
+  setDirectionalLight([-1, -2, -1], 0xffffff, 1.2);
+  setFog(0x0a0a1a, 30, 120);
+  enableBloom(0.8, 0.3, 0.5);
+  enableVignette(1.0, 0.85);
+
+  await loadScene(scene);
+}
+
+// ── Scene loader ─────────────────────────────────────────────────────────────
+async function loadScene(id) {
+  clearScene();
+  crystalId = dustId = crystalLightId = null;
+
+  // Ground plane — shared across scenes
+  createPlane(200, 200, 0x1a2a1a, [0, 0, 0]);
+
+  if (id === 1) await buildForestScene();
+  else if (id === 2) await buildCrystalScene();
+  else if (id === 3) await buildLODScene();
+}
+
+// ── Scene 1: Forest — 500 instanced trees ────────────────────────────────
+async function buildForestScene() {
+  setFog(0x0a1a08, 35, 130);
+  setAmbientLight(0x204020, 0.5);
+
+  // Trunks: 500 instanced cylinders
+  const trunkId = createInstancedMesh('cylinder', 500, 0x4a2e10, {
+    size: 0.25,
+    height: 3,
+    roughness: 1,
+    metalness: 0,
+  });
+
+  // Canopies: 500 instanced spheres, per-instance colour
+  const canopyId = createInstancedMesh('sphere', 500, 0x226622, {
+    size: 0.9,
+    segments: 5,
+    roughness: 0.9,
+    metalness: 0,
+  });
+
+  const RANGE = 40;
+  for (let i = 0; i < 500; i++) {
+    const x = (Math.random() - 0.5) * RANGE;
+    const z = (Math.random() - 0.5) * RANGE;
+    const h = 2 + Math.random() * 3;
+
+    setInstanceTransform(trunkId, i, x, h * 0.5, z, 0, 0, 0, 1, h, 1);
+    setInstanceTransform(
+      canopyId,
+      i,
+      x,
+      h + 1.2,
+      z,
+      0,
+      0,
+      0,
+      1 + Math.random() * 0.5,
+      1 + Math.random() * 0.3,
+      1 + Math.random() * 0.5
+    );
+
+    // Vary canopy green shade
+    const g = 0x33 + Math.floor(Math.random() * 0x55);
+    setInstanceColor(canopyId, i, (0x10 << 16) | (g << 8) | 0x10);
+  }
+
+  finalizeInstances(trunkId);
+  finalizeInstances(canopyId);
+
+  // Floating dust particles (animated in update)
+  dustId = createInstancedMesh('sphere', 200, 0xaaffaa, {
+    size: 0.05,
+    segments: 3,
+    emissive: 0x224422,
+    emissiveIntensity: 0.8,
+  });
+  for (let i = 0; i < 200; i++) {
+    setInstanceTransform(
+      dustId,
+      i,
+      (Math.random() - 0.5) * 35,
+      0.5 + Math.random() * 8,
+      (Math.random() - 0.5) * 35
+    );
+  }
+  finalizeInstances(dustId);
+}
+
+// ── Scene 2: Crystal Field — instanced prisms with per-instance colour ─────
+async function buildCrystalScene() {
+  setFog(0x0a0020, 30, 100);
+  setAmbientLight(0x100030, 0.3);
+  crystalLightId = createPointLight(0x6644ff, 4, 20, 0, 8, 0);
+  createPointLight(0xff44aa, 3, 20, 10, 5, -10);
+
+  const CRYSTAL_COUNT = 300;
+  crystalId = createInstancedMesh('cone', CRYSTAL_COUNT, 0x8855ff, {
+    size: 0.6,
+    height: 3,
+    roughness: 0.1,
+    metalness: 0.8,
+    emissive: 0x220044,
+    emissiveIntensity: 0.5,
+  });
+
+  const hues = [0x8855ff, 0xff44cc, 0x44aaff, 0xffaa00, 0x44ffaa];
+  for (let i = 0; i < CRYSTAL_COUNT; i++) {
+    const angle = Math.random() * Math.PI * 2;
+    const r = 3 + Math.random() * 22;
+    const x = Math.cos(angle) * r;
+    const z = Math.sin(angle) * r;
+    const h = 0.8 + Math.random() * 3.5;
+    const tiltX = (Math.random() - 0.5) * 0.4;
+    const tiltZ = (Math.random() - 0.5) * 0.4;
+
+    setInstanceTransform(
+      crystalId,
+      i,
+      x,
+      h * 0.5,
+      z,
+      tiltX,
+      0,
+      tiltZ,
+      0.5 + Math.random() * 0.8,
+      h,
+      0.5 + Math.random() * 0.8
+    );
+    setInstanceColor(crystalId, i, hues[i % hues.length]);
+  }
+  finalizeInstances(crystalId);
+}
+
+// ── Scene 3: LOD Rock Field ──────────────────────────────────────────────────
+async function buildLODScene() {
+  setFog(0x1a1208, 40, 120);
+  setAmbientLight(0x302010, 0.6);
+  setDirectionalLight([-1, -2, 0.5], 0xffd090, 1.4);
+
+  // One LOD rock model: high-poly close, low-poly far
+  createLODMesh(
+    [
+      {
+        shape: 'sphere',
+        size: 2,
+        color: 0x887766,
+        distance: 0,
+        options: { segments: 8, roughness: 1, metalness: 0 },
+      },
+      {
+        shape: 'sphere',
+        size: 2,
+        color: 0x887766,
+        distance: 15,
+        options: { segments: 5, roughness: 1, metalness: 0 },
+      },
+      {
+        shape: 'cube',
+        size: 2,
+        color: 0x776655,
+        distance: 35,
+        options: { roughness: 1, metalness: 0 },
+      },
+    ],
+    [0, 1, 0]
+  );
+
+  // Scatter 80 individual rocks using instancing
+  const ROCK_COUNT = 80;
+  const rocksId = createInstancedMesh('sphere', ROCK_COUNT, 0x887766, {
+    size: 1,
+    segments: 5,
+    roughness: 1,
+    metalness: 0,
+  });
+
+  const RANGE = 45;
+  for (let i = 0; i < ROCK_COUNT; i++) {
+    const x = (Math.random() - 0.5) * RANGE;
+    const z = (Math.random() - 0.5) * RANGE;
+    const s = 0.4 + Math.random() * 1.8;
+    setInstanceTransform(rocksId, i, x, s * 0.5, z, 0, Math.random() * Math.PI, 0, s, s * 0.7, s);
+    const shade = 0x66 + Math.floor(Math.random() * 0x44);
+    setInstanceColor(rocksId, i, (shade << 16) | ((shade - 0x10) << 8) | (shade - 0x20));
+  }
+  finalizeInstances(rocksId);
+}
+
+// ── Update ───────────────────────────────────────────────────────────────────
+export function update(dt) {
+  time += dt;
+
+  // Switch scene on 1/2/3
+  if (keyp('Digit1') && scene !== 1) {
+    scene = 1;
+    prevScene = 0;
+  }
+  if (keyp('Digit2') && scene !== 2) {
+    scene = 2;
+    prevScene = 0;
+  }
+  if (keyp('Digit3') && scene !== 3) {
+    scene = 3;
+    prevScene = 0;
+  }
+  if (keyp('KeyF')) showHUD = !showHUD;
+
+  if (scene !== prevScene) {
+    loadScene(scene);
+    prevScene = scene;
+  }
+
+  // Camera orbit
+  if (key('KeyA') || key('ArrowLeft')) camAngle -= dt * 0.8;
+  if (key('KeyD') || key('ArrowRight')) camAngle += dt * 0.8;
+  if (key('KeyW') || key('ArrowUp')) camHeight = Math.min(40, camHeight + dt * 6);
+  if (key('KeyS') || key('ArrowDown')) camHeight = Math.max(3, camHeight - dt * 6);
+  if (key('KeyQ')) camRadius = Math.min(55, camRadius + dt * 8);
+  if (key('KeyE')) camRadius = Math.max(8, camRadius - dt * 8);
+
+  const cx = Math.cos(camAngle) * camRadius;
+  const cz = Math.sin(camAngle) * camRadius;
+  setCameraPosition(cx, camHeight, cz);
+  setCameraTarget(0, 3, 0);
+
+  // Animate dust in forest scene
+  if (scene === 1 && dustId !== null) {
+    for (let i = 0; i < 200; i++) {
+      const offset = i * 1.37;
+      const x = Math.sin(time * 0.3 + offset) * 17;
+      const y = 0.5 + ((time * 0.2 + offset * 0.5) % 8);
+      const z = Math.cos(time * 0.2 + offset * 0.7) * 17;
+      setInstanceTransform(dustId, i, x, y, z);
+    }
+    finalizeInstances(dustId);
+  }
+
+  // Animate crystals — subtle pulse
+  if (scene === 2 && crystalId !== null && crystalLightId !== null) {
+    // Update point light position to orbit
+    setPointLightPosition(
+      crystalLightId,
+      Math.cos(time * 0.5) * 8,
+      6 + Math.sin(time * 0.7) * 2,
+      Math.sin(time * 0.5) * 8
+    );
+  }
+
+  // Update LOD (required each frame)
+  updateLODs();
+}
+
+// ── Draw ─────────────────────────────────────────────────────────────────────
+export function draw() {
+  if (!showHUD) return;
+
+  const sceneNames = [
+    '',
+    'FOREST (500 instanced trees)',
+    'CRYSTAL FIELD (300 instanced prisms)',
+    'LOD ROCKS (80 instanced + 1 LOD)',
+  ];
+  const BLUE = rgba8(40, 80, 180, 200);
+  const WHITE = rgba8(255, 255, 255, 255);
+  const YELLOW = rgba8(255, 220, 50, 255);
+  const DIM = rgba8(180, 180, 180, 200);
+
+  // Title bar
+  drawRoundedRect(0, 0, 320, 18, 0, rgba8(0, 0, 0, 160));
+  printCentered('NOVA64 — INSTANCING SHOWCASE', 160, 4, WHITE);
+
+  // Scene name
+  drawRoundedRect(0, 210, 320, 30, 0, rgba8(0, 0, 0, 140));
+  printCentered(sceneNames[scene] ?? '', 160, 217, YELLOW);
+  printCentered('1=Forest  2=Crystals  3=LOD  F=HUD  WASD=Orbit  QE=Zoom', 160, 225, DIM);
+
+  // Scene-specific stats
+  let statLine = '';
+  if (scene === 1) statLine = 'GPU draw calls: 3  |  instances: 700';
+  else if (scene === 2) statLine = 'GPU draw calls: 1  |  instances: 300';
+  else if (scene === 3) statLine = 'GPU draw calls: 2  |  LOD levels: 3  |  instances: 80';
+  print(statLine, 8, 22, BLUE);
+}

package/dist/examples/minecraft-demo/code.js

@@ -0,0 +1,387 @@
+// Minecraft Demo - Ultimate Edition with Biomes
+let player = {
+  x: 0,
+  y: 30,
+  z: 0,
+  vx: 0,
+  vy: 0,
+  vz: 0,
+  speed: 0.15,
+  jump: 0.35,
+  size: 0.6,
+  onGround: false,
+  yaw: 0,
+  pitch: 0,
+};
+
+let selectedBlock = 1; // 1 = Grass
+let time = 0;
+let loadState = 0;
+let isLoaded = false;
+let loadProgress = 0;
+let currentBiome = 'Plains';
+
+const BLOCK_NAMES = {
+  1: 'GRASS',
+  2: 'DIRT',
+  3: 'STONE',
+  4: 'SAND',
+  5: 'WATER',
+  6: 'WOOD',
+  7: 'LEAVES',
+  8: 'PLANKS',
+};
+const BLOCK_COLORS = {
+  1: 0x55cc33,
+  2: 0x886644,
+  3: 0x888888,
+  4: 0xddcc88,
+  5: 0x3388ff,
+  6: 0x664422,
+  7: 0x228833,
+  8: 0xccaa66,
+};
+const HOTBAR_BLOCKS = [1, 2, 3, 8, 6, 4];
+
+// Biome detection (mirrors runtime terrain gen noise)
+function detectBiome(px, pz) {
+  // Use same perlinNoise-based logic as runtime generateChunkTerrain
+  // We approximate using sin-based hash since we don't have perlinNoise exposed
+  const tx = px * 0.5,
+    tz = pz * 0.5;
+  const temperature =
+    Math.sin(tx * 0.01 * 3.7 + tz * 0.01 * 2.3) * 0.3 +
+    Math.sin(tx * 0.01 * 7.1 + tz * 0.01 * 5.9) * 0.15 +
+    0.5;
+  const mx = px * 0.3 + 1000,
+    mz = pz * 0.3 + 1000;
+  const moisture =
+    Math.sin(mx * 0.01 * 3.7 + mz * 0.01 * 2.3) * 0.3 +
+    Math.sin(mx * 0.01 * 7.1 + mz * 0.01 * 5.9) * 0.15 +
+    0.5;
+
+  if (temperature < 0.2) return 'Frozen Tundra';
+  if (temperature < 0.35 && moisture > 0.5) return 'Taiga';
+  if (temperature > 0.7 && moisture < 0.25) return 'Desert';
+  if (temperature > 0.6 && moisture > 0.6) return 'Jungle';
+  if (moisture < 0.3) return 'Savanna';
+  if (temperature > 0.4 && moisture > 0.4) return 'Forest';
+  if (temperature < 0.35) return 'Snowy Hills';
+  return 'Plains';
+}
+
+const BIOME_COLORS = {
+  'Frozen Tundra': rgba8(200, 220, 255),
+  Taiga: rgba8(100, 180, 140),
+  Desert: rgba8(255, 220, 130),
+  Jungle: rgba8(80, 220, 80),
+  Savanna: rgba8(220, 180, 100),
+  Forest: rgba8(100, 200, 100),
+  'Snowy Hills': rgba8(220, 230, 255),
+  Plains: rgba8(150, 220, 150),
+};
+
+function createVoxelTexture() {
+  const canvas = document.createElement('canvas');
+  canvas.width = 64;
+  canvas.height = 64;
+  const ctx = canvas.getContext('2d');
+
+  for (let y = 0; y < 64; y++) {
+    for (let x = 0; x < 64; x++) {
+      let noise = Math.random() * 60 - 30;
+      let isBorder = x % 16 === 0 || y % 16 === 0 ? -20 : 0;
+      let val = 180 + noise + isBorder;
+      ctx.fillStyle = `rgb(${val}, ${val}, ${val})`;
+      ctx.fillRect(x, y, 1, 1);
+    }
+  }
+
+  const tex = new globalThis.THREE.CanvasTexture(canvas);
+  tex.magFilter = globalThis.THREE.NearestFilter;
+  tex.minFilter = globalThis.THREE.NearestFilter;
+
+  globalThis.window.VOXEL_MATERIAL = new globalThis.THREE.MeshStandardMaterial({
+    vertexColors: true,
+    map: tex,
+    flatShading: true,
+    roughness: 0.9,
+    metalness: 0.0,
+  });
+}
+
+function getHighestBlockAlt(hx, hz) {
+  for (let i = 60; i > 0; i--) {
+    if (getVoxelBlock(hx, i, hz) !== 0) return i;
+  }
+  return 30;
+}
+
+export function init() {
+  createVoxelTexture();
+  setCameraPosition(0, 30, 0);
+  setFog(0x87ceeb, 10, 60);
+
+  // We don't block here, we let the update/draw loop handle state
+}
+
+export function update() {
+  if (loadState === 0) {
+    loadState = 1;
+    return;
+  } else if (loadState === 1) {
+    // Wait a few frames for the canvas to present the loading text
+    loadState = 2;
+    return;
+  } else if (loadState === 2) {
+    if (typeof updateVoxelWorld === 'function') {
+      updateVoxelWorld(0, 0); // Gen initial chunks
+    }
+    player.y = getHighestBlockAlt(Math.floor(player.x), Math.floor(player.z)) + 2;
+    if (player.y < 5) player.y = 40; // Fallback
+    loadState = 3;
+    isLoaded = true;
+    return;
+  }
+
+  if (!isLoaded) return;
+
+  time += 0.005;
+  let skyR = Math.sin(time) > 0 ? 135 : 10;
+  let skyG = Math.sin(time) > 0 ? 206 : 10;
+  let skyB = Math.sin(time) > 0 ? 235 : 20;
+  setFog((skyR << 16) | (skyG << 8) | skyB, 20, 80);
+
+  // Detect current biome
+  currentBiome = detectBiome(player.x, player.z);
+
+  handleInput();
+  updatePhysics();
+  updateCamera();
+  handleBlockInteraction();
+
+  if (typeof updateVoxelWorld === 'function') {
+    updateVoxelWorld(player.x, player.z);
+  }
+}
+
+function handleInput() {
+  if (key('ArrowLeft')) player.yaw -= 0.05;
+  if (key('ArrowRight')) player.yaw += 0.05;
+  if (key('ArrowUp') && player.pitch < Math.PI / 2) player.pitch += 0.05;
+  if (key('ArrowDown') && player.pitch > -Math.PI / 2) player.pitch -= 0.05;
+
+  let dx = 0,
+    dz = 0;
+  const cosY = Math.cos(player.yaw);
+  const sinY = Math.sin(player.yaw);
+
+  if (key('KeyW')) {
+    dx -= sinY;
+    dz -= cosY;
+  }
+  if (key('KeyS')) {
+    dx += sinY;
+    dz += cosY;
+  }
+  if (key('KeyA')) {
+    dx -= cosY;
+    dz += sinY;
+  }
+  if (key('KeyD')) {
+    dx += cosY;
+    dz -= sinY;
+  }
+
+  if (dx !== 0 || dz !== 0) {
+    const len = Math.sqrt(dx * dx + dz * dz);
+    player.vx = (dx / len) * player.speed;
+    player.vz = (dz / len) * player.speed;
+  } else {
+    player.vx = 0;
+    player.vz = 0;
+  }
+
+  if (key('Space') && player.onGround) {
+    player.vy = player.jump;
+    player.onGround = false;
+  }
+
+  // Number keys for block selection
+  if (keyp('Digit1')) selectedBlock = HOTBAR_BLOCKS[0];
+  if (keyp('Digit2')) selectedBlock = HOTBAR_BLOCKS[1];
+  if (keyp('Digit3')) selectedBlock = HOTBAR_BLOCKS[2];
+  if (keyp('Digit4')) selectedBlock = HOTBAR_BLOCKS[3];
+  if (keyp('Digit5')) selectedBlock = HOTBAR_BLOCKS[4];
+  if (keyp('Digit6')) selectedBlock = HOTBAR_BLOCKS[5];
+
+  if (btnp(0)) selectedBlock = 1; // Grass
+  if (btnp(1)) selectedBlock = 2; // Dirt
+  if (btnp(2)) selectedBlock = 3; // Stone
+  if (btnp(3)) selectedBlock = 8; // Planks
+
+  // B key = respawn with new biome (random world + random position)
+  if (keyp('KeyB') && typeof resetVoxelWorld === 'function') {
+    resetVoxelWorld();
+    // Scatter to a random position so we land in a different biome
+    player.x = (Math.random() - 0.5) * 400;
+    player.z = (Math.random() - 0.5) * 400;
+    updateVoxelWorld(player.x, player.z);
+    player.y = getHighestBlockAlt(Math.floor(player.x), Math.floor(player.z)) + 2;
+    if (player.y < 5) player.y = 40;
+    player.vy = 0;
+    player.onGround = false;
+    player.yaw = 0;
+    player.pitch = 0;
+  }
+}
+
+function updatePhysics() {
+  player.vy -= 0.02;
+
+  let nx = player.x + player.vx;
+  let ny = player.y + player.vy;
+  let nz = player.z + player.vz;
+
+  player.onGround = false;
+
+  if (
+    checkCollision(player.x, ny - player.size, player.z) ||
+    checkCollision(player.x, ny + 0.2, player.z)
+  ) {
+    if (player.vy < 0) player.onGround = true;
+    player.vy = 0;
+    ny = player.y;
+  }
+  if (
+    checkCollision(
+      nx + (player.vx > 0 ? player.size : -player.size),
+      player.y - player.size + 0.1,
+      player.z
+    )
+  ) {
+    player.vx = 0;
+    nx = player.x;
+  }
+  if (
+    checkCollision(
+      player.x,
+      player.y - player.size + 0.1,
+      nz + (player.vz > 0 ? player.size : -player.size)
+    )
+  ) {
+    player.vz = 0;
+    nz = player.z;
+  }
+
+  player.x = nx;
+  player.y = ny;
+  player.z = nz;
+
+  // Antifall fallback
+  if (player.y < -10) {
+    player.y = 40;
+    player.vy = 0;
+  }
+}
+
+function checkCollision(x, y, z) {
+  if (typeof checkVoxelCollision === 'function') {
+    return checkVoxelCollision([x, y, z], player.size);
+  }
+  const block = getVoxelBlock(Math.floor(x), Math.floor(y), Math.floor(z));
+  return block !== 0 && block !== undefined;
+}
+
+function updateCamera() {
+  setCameraPosition(player.x, player.y + 0.8, player.z);
+  const targetX = player.x - Math.sin(player.yaw) * Math.cos(player.pitch);
+  const targetY = player.y + 0.8 + Math.sin(player.pitch);
+  const targetZ = player.z - Math.cos(player.yaw) * Math.cos(player.pitch);
+  setCameraTarget(targetX, targetY, targetZ);
+}
+
+function handleBlockInteraction() {
+  if (typeof raycastVoxelBlock === 'function') {
+    const targetX = player.x - Math.sin(player.yaw) * Math.cos(player.pitch);
+    const targetY = player.y + 0.8 + Math.sin(player.pitch);
+    const targetZ = player.z - Math.cos(player.yaw) * Math.cos(player.pitch);
+
+    const dx = targetX - player.x;
+    const dy = targetY - (player.y + 0.8);
+    const dz = targetZ - player.z;
+    const len = Math.sqrt(dx * dx + dy * dy + dz * dz);
+
+    const rayStr = raycastVoxelBlock(
+      player.x,
+      player.y + 0.8,
+      player.z,
+      dx / len,
+      dy / len,
+      dz / len,
+      5
+    );
+    if (rayStr) {
+      if (btnp(4)) {
+        setVoxelBlock(rayStr.hit.x, rayStr.hit.y, rayStr.hit.z, 0); // break
+      }
+      if (btnp(5)) {
+        setVoxelBlock(rayStr.prev.x, rayStr.prev.y, rayStr.prev.z, selectedBlock); // place
+      }
+    }
+    return;
+  }
+}
+
+export function draw() {
+  if (!isLoaded) {
+    rectfill(0, 0, 640, 360, rgba8(10, 10, 20, 255));
+    print('NOVA64 MINECRAFT EDITION', 20, 40, rgba8(255, 255, 255, 255));
+    print('GENERATING WORLD...', 20, 60, rgba8(255, 255, 255, 255));
+    return;
+  }
+
+  // Title bar
+  rect(0, 0, 640, 16, rgba8(0, 0, 0, 150), true);
+  print('MINECRAFT ULTIMATE 64', 5, 4, 0xffdd88);
+  const pos = `${Math.floor(player.x)}, ${Math.floor(player.y)}, ${Math.floor(player.z)}`;
+  print(pos, 560, 4, rgba8(200, 200, 200, 200));
+
+  // Biome indicator
+  const biomeCol = BIOME_COLORS[currentBiome] || rgba8(200, 200, 200);
+  print(currentBiome, 220, 4, biomeCol);
+
+  // Crosshair
+  const cx = 320,
+    cy = 180;
+  rect(cx - 1, cy - 8, 2, 16, rgba8(255, 255, 255, 200), true);
+  rect(cx - 8, cy - 1, 16, 2, rgba8(255, 255, 255, 200), true);
+
+  // Hotbar
+  const hbY = 340;
+  const hbW = HOTBAR_BLOCKS.length * 32 + 8;
+  const hbX = (640 - hbW) / 2;
+  rect(hbX, hbY, hbW, 20, rgba8(0, 0, 0, 180), true);
+  rect(hbX, hbY, hbW, 20, rgba8(100, 100, 100, 150), false);
+  for (let i = 0; i < HOTBAR_BLOCKS.length; i++) {
+    const bx = hbX + 4 + i * 32;
+    const bid = HOTBAR_BLOCKS[i];
+    const col = BLOCK_COLORS[bid] || 0xffffff;
+    if (bid === selectedBlock) {
+      rect(bx - 1, hbY - 1, 30, 22, rgba8(255, 255, 255, 255), false);
+    }
+    rect(bx + 2, hbY + 2, 24, 16, col, true);
+    print(`${i + 1}`, bx + 10, hbY + 4, rgba8(255, 255, 255, 220));
+  }
+  // Block name below hotbar
+  const bname = BLOCK_NAMES[selectedBlock] || 'UNKNOWN';
+  print(bname, (640 - bname.length * 8) / 2, hbY - 14, rgba8(255, 255, 255, 200));
+
+  // Controls hint
+  print(
+    'WASD=Move  Space=Jump  Arrows=Look  L/R Click=Break/Place  1-6=Block  B=New Biome',
+    30,
+    20,
+    rgba8(255, 255, 255, 200)
+  );
+}