Part 5: Chunks and Seams

import { CHUNK_SIZE, DensityGrid } from './grid.ts';
import type { MeshData } from './meshData.ts';
import { MESHERS, type MesherName } from './meshers.ts';
import { density } from './terrain.ts';

/** A chunk's place in the grid of chunks: chunk (1, 0, 2) starts at x 32, y 0, z 64. */
export interface ChunkPosition {
  x: number;
  y: number;
  z: number;
}

export const chunkKey = ({ x, y, z }: ChunkPosition) => `${x},${y},${z}`;

/** Samples the terrain in a chunk and meshes it, or null when it holds no surface. */
export function buildChunk(chunk: ChunkPosition, mesher: MesherName): MeshData | null {
  const origin = { x: chunk.x * CHUNK_SIZE, y: chunk.y * CHUNK_SIZE, z: chunk.z * CHUNK_SIZE };
  const grid = new DensityGrid().fill(density, origin);
  if (!grid.hasSurface()) return null;
  return MESHERS[mesher].mesh(grid);
}

/** Whether the grid has solid and air samples, and so a surface between them. */
hasSurface(): boolean {
  const solid = this.values[0] > 0;
  return this.values.some((value) => value > 0 !== solid);
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Voxel terrain</title>
  </head>
  <body>
    <canvas id="game"></canvas>
    <div id="hud"></div>
    <div id="help">WASD fly, Q/E down/up, drag to look · M mesher · C chunks · L wireframe</div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

import {
  Color3,
  Color4,
  DirectionalLight,
  Engine,
  HemisphericLight,
  RegisterStandardEngineExtensions,
  RegisterStandardMaterial,
  Scene,
  StandardMaterial,
  UniversalCamera,
  Vector3,
  type Mesh,
} from '@babylonjs/core/pure';
import { buildChunk, chunkKey, type ChunkPosition } from './chunks.ts';
import { CHUNK_SIZE } from './grid.ts';
import { createMesh } from './meshData.ts';
import { MESHERS, otherMesher, type MesherName } from './meshers.ts';
import { surfaceHeight } from './terrain.ts';
import './style.css';

RegisterStandardEngineExtensions();
RegisterStandardMaterial();

const canvas = document.querySelector<HTMLCanvasElement>('#game')!;
const hud = document.querySelector<HTMLElement>('#hud')!;

const engine = new Engine(canvas, true, {}, true);
const scene = new Scene(engine);
scene.clearColor = Color4.FromHexString('#2a1150ff');

// A cool light from the sky and a warm, low sun.
const sky = new HemisphericLight('sky', new Vector3(0, 1, 0), scene);
sky.intensity = 0.6;
sky.diffuse = Color3.FromHexString('#c4b5fd');
sky.groundColor = Color3.FromHexString('#3b1676');
const sun = new DirectionalLight('sun', new Vector3(0.5, -0.65, -0.55), scene);
sun.intensity = 1.1;
sun.diffuse = Color3.FromHexString('#ffd8a8');

/** Two materials, so that every other chunk can be told apart. */
const materials = ['#d9a066', '#a0d966'].map((color, i) => {
  const material = new StandardMaterial(`ground-${i}`, scene);
  material.diffuseColor = Color3.FromHexString(color);
  material.specularColor = Color3.Black();
  return material;
});
let tinted = false;

// The chunks around the origin: 8 × 8 columns, from 32 m down to 160 m up.
const area: ChunkPosition[] = [];
for (let z = -4; z < 4; z += 1) {
  for (let x = -4; x < 4; x += 1) {
    for (let y = -1; y < 5; y += 1) area.push({ x, y, z });
  }
}

let mesher: MesherName = 'marching-cubes';
const meshes = new Map<string, Mesh>();

function materialFor(chunk: ChunkPosition): StandardMaterial {
  return materials[tinted ? (chunk.x + chunk.y + chunk.z) & 1 : 0];
}

/** Builds every chunk of the area, one after the other. */
function buildArea(): void {
  for (const mesh of meshes.values()) mesh.dispose();
  meshes.clear();
  const started = performance.now();
  let triangles = 0;
  for (const chunk of area) {
    const data = buildChunk(chunk, mesher);
    if (!data) continue;
    const mesh = createMesh(`chunk ${chunkKey(chunk)}`, data, scene);
    mesh.position.set(chunk.x * CHUNK_SIZE, chunk.y * CHUNK_SIZE, chunk.z * CHUNK_SIZE);
    mesh.material = materialFor(chunk);
    // The chunk never moves: Babylon.js can stop working out its world matrix.
    mesh.freezeWorldMatrix();
    mesh.metadata = chunk;
    meshes.set(chunkKey(chunk), mesh);
    triangles += data.indices.length / 3;
  }
  const time = performance.now() - started;
  hud.textContent =
    `${MESHERS[mesher].label}: ${area.length} chunks in ${(time / 1000).toFixed(1)} s\n` +
    `${meshes.size} with a surface, ${triangles} triangles`;
}
buildArea();

window.addEventListener('keydown', (event) => {
  if (event.code === 'KeyL') for (const material of materials) material.wireframe = !material.wireframe;
  if (event.code === 'KeyC') {
    tinted = !tinted;
    for (const mesh of meshes.values()) mesh.material = materialFor(mesh.metadata);
  }
  if (event.code === 'KeyM') {
    mesher = otherMesher(mesher);
    buildArea();
  }
});

// A flying camera: WASD to move, Q and E for down and up, drag the mouse to look.
const start = new Vector3(40, surfaceHeight(40, 170) + 60, 170);
const camera = new UniversalCamera('camera', start, scene);
camera.setTarget(new Vector3(0, surfaceHeight(0, -60), -60));
camera.keysUp = [87];
camera.keysDown = [83];
camera.keysLeft = [65];
camera.keysRight = [68];
camera.keysDownward = [81];
camera.keysUpward = [69];
camera.speed = 1;
camera.minZ = 0.1;
camera.attachControl();

engine.runRenderLoop(() => scene.render());
window.addEventListener('resize', () => engine.resize());