Teil 6: Meshing in Web Workern

import { buildChunk, type ChunkPosition } from './chunks.ts';
import type { MeshData } from './meshData.ts';
import type { MesherName } from './meshers.ts';

export interface ChunkJob {
  chunk: ChunkPosition;
  mesher: MesherName;
}

export interface ChunkResult {
  /** null when the chunk holds no surface. */
  mesh: MeshData | null;
  /** Milliseconds the worker spent on the chunk. */
  time: number;
}

self.onmessage = (event: MessageEvent<ChunkJob>) => {
  const started = performance.now();
  const mesh = buildChunk(event.data.chunk, event.data.mesher);
  const result: ChunkResult = { mesh, time: performance.now() - started };
  // Hand the arrays' memory over to the page instead of copying it.
  const transfer = mesh ? [mesh.positions.buffer, mesh.normals.buffer, mesh.indices.buffer] : [];
  self.postMessage(result, { transfer });
};

import type { ChunkJob, ChunkResult } from './chunkWorker.ts';

/** A few workers that build chunks, each one chunk at a time. */
export class ChunkWorkers {
  private readonly idle: Worker[] = [];
  readonly count: number;

  constructor() {
    // One core for the page, the others for the workers, but not too many.
    this.count = Math.min(Math.max((navigator.hardwareConcurrency || 2) - 1, 1), 6);
    for (let i = 0; i < this.count; i += 1) {
      this.idle.push(new Worker(new URL('./chunkWorker.ts', import.meta.url), { type: 'module' }));
    }
  }

  /** How many workers wait for a job. */
  get free(): number {
    return this.idle.length;
  }

  /** Builds a chunk on a free worker; check `free` first. */
  run(job: ChunkJob): Promise<ChunkResult> {
    const worker = this.idle.pop();
    if (!worker) throw new Error('No free worker');
    return new Promise((resolve) => {
      worker.onmessage = (event: MessageEvent<ChunkResult>) => {
        this.idle.push(worker);
        resolve(event.data);
      };
      worker.postMessage(job);
    });
  }
}

import {
  Color3,
  Color4,
  DirectionalLight,
  Engine,
  HemisphericLight,
  RegisterStandardEngineExtensions,
  RegisterStandardMaterial,
  Scene,
  StandardMaterial,
  UniversalCamera,
  Vector3,
  type Mesh,
} from '@babylonjs/core/pure';
import { chunkKey, type ChunkPosition } from './chunks.ts';
import { CHUNK_SIZE } from './grid.ts';
import { createMesh, type MeshData } from './meshData.ts';
import { MESHERS, otherMesher, type MesherName } from './meshers.ts';
import { surfaceHeight } from './terrain.ts';
import { ChunkWorkers } from './workers.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>();
const workers = new ChunkWorkers();

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

/** Shows a chunk's mesh in place of the one it had. */
function show(chunk: ChunkPosition, data: MeshData | null): void {
  meshes.get(chunkKey(chunk))?.dispose();
  meshes.delete(chunkKey(chunk));
  if (!data) return;
  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);
}

// The chunks still to build, and how the build of the whole area goes.
let todo: ChunkPosition[] = [];
let build = 0;
let built = 0;
let workTime = 0;
let started = 0;
let seconds = 0;

/** Starts building every chunk of the area again. */
function buildArea(): void {
  todo = [...area];
  build += 1;
  built = 0;
  workTime = 0;
  started = performance.now();
}
buildArea();

scene.onBeforeRenderObservable.add(() => {
  // Every free worker gets the next chunk.
  while (workers.free > 0 && todo.length > 0) {
    const chunk = todo.shift()!;
    const thisBuild = build;
    workers.run({ chunk, mesher }).then((result) => {
      // A switch of the mesher started a new build: this result is out of date.
      if (thisBuild !== build) return;
      show(chunk, result.mesh);
      built += 1;
      workTime += result.time;
      if (built === area.length) seconds = (performance.now() - started) / 1000;
    });
  }
  const done = built === area.length ? ` in ${seconds.toFixed(1)} s` : '';
  hud.textContent =
    `${MESHERS[mesher].label}: ${built} of ${area.length} chunks${done}\n` +
    `${workers.count} workers, ${(workTime / Math.max(built, 1)).toFixed(1)} ms per chunk\n` +
    `${engine.getFps().toFixed(0)} fps`;
});

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());