Part 12: A Far View to the Horizon

import type { MeshData } from './meshData.ts';
import { surfaceHeight } from './terrain.ts';

/** Rings from INNER to OUTER meters around the center, each further one wider. */
export const INNER = 150;
export const OUTER = 4500;
const RINGS = 128;
const SEGMENTS = 256;
/** The far ground lies this much lower, so that the chunks win where both are drawn. */
const SINK = 1;

export interface FarJob {
  x: number;
  z: number;
}

/** A heightfield of rings around (x, z), positions from that point. */
self.onmessage = (event: MessageEvent<FarJob>) => {
  const { x, z } = event.data;
  const growth = (OUTER / INNER) ** (1 / (RINGS - 1));
  const positions = new Float32Array(RINGS * SEGMENTS * 3);
  for (let ring = 0; ring < RINGS; ring += 1) {
    const radius = INNER * growth ** ring;
    for (let segment = 0; segment < SEGMENTS; segment += 1) {
      const angle = (segment / SEGMENTS) * Math.PI * 2;
      const px = Math.cos(angle) * radius;
      const pz = Math.sin(angle) * radius;
      positions.set([px, surfaceHeight(x + px, z + pz) - SINK, pz], (ring * SEGMENTS + segment) * 3);
    }
  }

  // Normals from the neighbors: across the ring outwards, and along it.
  const at = (ring: number, segment: number, axis: number) =>
    positions[(Math.min(Math.max(ring, 0), RINGS - 1) * SEGMENTS + ((segment + SEGMENTS) % SEGMENTS)) * 3 + axis];
  const normals = new Float32Array(positions.length);
  for (let ring = 0; ring < RINGS; ring += 1) {
    for (let segment = 0; segment < SEGMENTS; segment += 1) {
      const out = [0, 1, 2].map((axis) => at(ring + 1, segment, axis) - at(ring - 1, segment, axis));
      const along = [0, 1, 2].map((axis) => at(ring, segment + 1, axis) - at(ring, segment - 1, axis));
      // The cross product of the two, turned to point up.
      let nx = out[1] * along[2] - out[2] * along[1];
      let ny = out[2] * along[0] - out[0] * along[2];
      let nz = out[0] * along[1] - out[1] * along[0];
      if (ny < 0) [nx, ny, nz] = [-nx, -ny, -nz];
      const length = Math.hypot(nx, ny, nz);
      normals.set([nx / length, ny / length, nz / length], (ring * SEGMENTS + segment) * 3);
    }
  }

  // Two triangles between each ring and the next, segment by segment, split along the
  // shorter diagonal as in the surface nets: the triangles then follow the ridges.
  const distance = (a: number, b: number) =>
    Math.hypot(
      positions[a * 3] - positions[b * 3],
      positions[a * 3 + 1] - positions[b * 3 + 1],
      positions[a * 3 + 2] - positions[b * 3 + 2],
    );
  const indices = new Uint32Array((RINGS - 1) * SEGMENTS * 6);
  let i = 0;
  for (let ring = 0; ring < RINGS - 1; ring += 1) {
    for (let segment = 0; segment < SEGMENTS; segment += 1) {
      const a = ring * SEGMENTS + segment;
      const b = ring * SEGMENTS + ((segment + 1) % SEGMENTS);
      const c = a + SEGMENTS;
      const d = b + SEGMENTS;
      if (distance(a, d) <= distance(b, c)) indices.set([a, d, b, a, c, d], i);
      else indices.set([a, c, b, b, c, d], i);
      i += 6;
    }
  }

  const mesh: MeshData = { positions, normals, indices };
  self.postMessage(mesh, { transfer: [positions.buffer, normals.buffer, indices.buffer] });
};

import type { Material, Mesh, Scene, Vector3 } from '@babylonjs/core/pure';
import type { FarJob } from './farWorker.ts';
import { createMesh, type MeshData } from './meshData.ts';

/** The far view moves along in steps of this many meters, and is built again each time. */
const STEP = 64;

/** The ground beyond the chunks, to the horizon: a heightfield of the generated heights. */
export class FarView {
  private mesh: Mesh | null = null;
  private center: FarJob | null = null;
  private building: FarJob | null = null;
  private readonly worker = new Worker(new URL('./farWorker.ts', import.meta.url), { type: 'module' });
  private readonly scene: Scene;
  private readonly material: Material;

  constructor(scene: Scene, material: Material) {
    this.scene = scene;
    this.material = material;
    this.worker.onmessage = (event: MessageEvent<MeshData>) => this.show(event.data);
  }

  get vertices(): number {
    return this.mesh?.getTotalVertices() ?? 0;
  }

  /** Once a frame: builds the far view again when the camera has moved a step. */
  update(focus: Vector3): void {
    const x = Math.round(focus.x / STEP) * STEP;
    const z = Math.round(focus.z / STEP) * STEP;
    if (this.building || (this.center?.x === x && this.center.z === z)) return;
    this.building = { x, z };
    this.worker.postMessage(this.building);
  }

  private show(data: MeshData): void {
    this.mesh?.dispose();
    const mesh = createMesh('far view', data, this.scene);
    // The far ground is all surface, under the open sky.
    const count = data.positions.length / 3;
    mesh.setVerticesData('depth', new Float32Array(count), false, 1);
    mesh.setVerticesData('light', new Float32Array(count).fill(1), false, 1);
    mesh.position.set(this.building!.x, 0, this.building!.z);
    mesh.material = this.material;
    mesh.isPickable = false;
    mesh.freezeWorldMatrix();
    this.mesh = mesh;
    this.center = this.building;
    this.building = null;
  }
}

#ifdef FAR
uniform float nearRadius;
#endif

void main() {
#ifdef FAR
  // Near the camera, the chunks show the ground.
  if (distance(vPosition.xz, cameraPosition.xz) < nearRadius) discard;
#endif
  vec3 normal = normalize(vNormal);
  // …

import {
  Color3,
  Constants,
  RawTexture2DArray,
  ShaderMaterial,
  Texture,
  Vector2,
  Vector3,
  type Scene,
} from '@babylonjs/core/pure';
import fragmentSource from './terrain.fragment.glsl?raw';
import vertexSource from './terrain.vertex.glsl?raw';
import { LAYERS, paintLayers, TEXTURE_SIZE } from './textures.ts';

/** The sky's color, a hazy lilac, which the fog fades to. */
export const SKY = Color3.FromHexString('#b8a4e0');

/** The painted textures, as the layers of one texture array. */
export function createTextures(scene: Scene): RawTexture2DArray {
  const textures = new RawTexture2DArray(
    paintLayers(),
    TEXTURE_SIZE,
    TEXTURE_SIZE,
    LAYERS.length,
    Constants.TEXTUREFORMAT_RGBA,
    scene,
    true,
    false,
    Texture.TRILINEAR_SAMPLINGMODE,
  );
  textures.wrapU = Texture.WRAP_ADDRESSMODE;
  textures.wrapV = Texture.WRAP_ADDRESSMODE;
  // Sharper textures on ground seen at a flat angle.
  textures.anisotropicFilteringLevel = 8;
  return textures;
}

interface TerrainOptions {
  fogStart: number;
  fogEnd: number;
  /** For the far view: the distance from the camera within which it isn't drawn. */
  nearRadius?: number;
}

/** The terrain's material: painted textures, projected from three sides, and lit. */
export function createTerrainMaterial(
  scene: Scene,
  textures: RawTexture2DArray,
  options: TerrainOptions,
): ShaderMaterial {
  const far = options.nearRadius !== undefined;
  const material = new ShaderMaterial(
    far ? 'far terrain' : 'terrain',
    scene,
    { vertexSource, fragmentSource },
    {
      attributes: ['position', 'normal', 'depth', 'light'],
      uniforms: [
        'world', 'viewProjection', 'cameraPosition', 'sunDirection', 'sunColor', 'skyColor',
        'groundColor', 'caveColor', 'lampColor', 'fogColor', 'fogRange', 'nearRadius',
      ],
      samplers: ['layers'],
      defines: far ? ['#define FAR'] : [],
    },
  );
  material.setTexture('layers', textures);

  // A warm, low sun, a cool sky and a dark violet below.
  material.setVector3('sunDirection', new Vector3(0.5, -0.65, -0.55).normalize());
  material.setColor3('sunColor', Color3.FromHexString('#ffd8a8').scale(1.1));
  material.setColor3('skyColor', Color3.FromHexString('#c4b5fd').scale(0.6));
  material.setColor3('groundColor', Color3.FromHexString('#3b1676').scale(0.6));
  // In caves: a faint violet glow, and a warm lamp.
  material.setColor3('caveColor', Color3.FromHexString('#5b21b6').scale(0.3));
  material.setColor3('lampColor', Color3.FromHexString('#fdba74').scale(1.2));
  material.setColor3('fogColor', SKY);
  material.setVector2('fogRange', new Vector2(options.fogStart, options.fogEnd));
  if (far) material.setFloat('nearRadius', options.nearRadius!);
  return material;
}

import {
  Engine,
  RegisterEnginesExtensionsEngineRawTexture,
  RegisterRay,
  RegisterShaderMaterial,
  RegisterStandardEngineExtensions,
  RegisterStandardMaterial,
  Scene,
  UniversalCamera,
  Vector3,
} from '@babylonjs/core/pure';
import { FarView } from './farView.ts';
import { OUTER } from './farWorker.ts';
import { Field } from './field.ts';
import { CHUNK_SIZE } from './grid.ts';
import { Input } from './input.ts';
import { createTerrainMaterial, createTextures, SKY } from './material.ts';
import { MESHERS, otherMesher } from './meshers.ts';
import { EYES, Player } from './player.ts';
import { surfaceHeight } from './terrain.ts';
import { DigTool } from './tool.ts';
import { ChunkWorkers } from './workers.ts';
import { VIEW_RADIUS, World } from './world.ts';
import './style.css';

RegisterStandardEngineExtensions();
// For the texture array of the terrain.
RegisterEnginesExtensionsEngineRawTexture();
RegisterShaderMaterial();
// For the tool: the marker's material, and the ray that finds the ground.
RegisterStandardMaterial();
RegisterRay();

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 = SKY.toColor4();

// The chunks reach VIEW_RADIUS chunks around the camera, the far view to the horizon.
// The fog is the same for both, and only hides the far view's edge.
const textures = createTextures(scene);
const fog = { fogStart: OUTER * 0.25, fogEnd: OUTER * 0.95 };
const material = createTerrainMaterial(scene, textures, fog);
// The far view leaves out the ground near the camera, which the chunks show. They are
// sure to cover a little less than VIEW_RADIUS chunks.
const nearRadius = (VIEW_RADIUS - 1.75) * CHUNK_SIZE;
const farView = new FarView(scene, createTerrainMaterial(scene, textures, { ...fog, nearRadius }));

const world = new World(scene, material, new ChunkWorkers());

// The camera only looks around: the player and the flying below move it.
const feet = new Vector3(0, surfaceHeight(0, 40) + 1, 40);
const camera = new UniversalCamera('camera', feet.add(new Vector3(0, EYES, 0)), scene);
camera.setTarget(new Vector3(0, surfaceHeight(0, -200) + 20, -200));
camera.inputs.removeByType('FreeCameraKeyboardMoveInput');
camera.minZ = 0.1;
camera.maxZ = OUTER * 1.1;
camera.attachControl();

const input = new Input();
const player = new Player(new Field(world.edits), feet);
// This part starts high in the air, with the far view in sight; F lands.
let mode: 'walk' | 'fly' = 'fly';
camera.position.set(0, 160, 120);
camera.setTarget(new Vector3(0, 110, -100));

/** Flies the camera: WASD along the view, Q and E down and up, Shift faster. */
function fly(dt: number): void {
  const speed = input.pressed('ShiftLeft') ? 60 : 15;
  const forward = camera.getDirection(Vector3.Forward()).scale(input.axis('KeyS', 'KeyW'));
  const right = camera.getDirection(Vector3.Right()).scale(input.axis('KeyA', 'KeyD'));
  camera.position.addInPlace(forward.add(right).scale(speed * dt));
  camera.position.y += input.axis('KeyQ', 'KeyE') * speed * dt;
}

const tool = new DigTool(scene, camera, world);
// The mouse wheel sizes the tool instead of moving the camera.
camera.inputs.removeByType('FreeCameraMouseWheelInput');

// A click captures the mouse, so that it turns the camera without a button held down.
// While it is captured, the left button digs and the right one builds.
canvas.addEventListener('pointerdown', (event) => {
  if (document.pointerLockElement !== canvas) {
    canvas.requestPointerLock();
    return;
  }
  if (event.button === 0) tool.start('dig');
  if (event.button === 2) tool.start('build');
});
window.addEventListener('pointerup', () => tool.stop());
canvas.addEventListener('contextmenu', (event) => event.preventDefault());
canvas.addEventListener('wheel', (event) => tool.resize(-Math.sign(event.deltaY)), { passive: true });

window.addEventListener('keydown', (event) => {
  if (event.code === 'KeyL') material.wireframe = !material.wireframe;
  if (event.code === 'KeyM') world.setMesher(otherMesher(world.mesher));
  if (event.code === 'KeyF') {
    mode = mode === 'walk' ? 'fly' : 'walk';
    // Landing where the camera is: the feet go below the eyes.
    if (mode === 'walk') {
      player.position.copyFrom(camera.position).y -= EYES;
      player.velocity.setAll(0);
    }
  }
});

scene.onBeforeRenderObservable.add(() => {
  // After a stall, such as a tab in the background, one huge step would be no good.
  const dt = Math.min(engine.getDeltaTime() / 1000, 0.05);
  if (mode === 'walk') {
    player.update(dt, input, camera.rotation.y);
    camera.position.copyFrom(player.position).y += EYES;
  } else {
    fly(dt);
  }
  world.update(camera.position);
  farView.update(camera.position);
  tool.update(performance.now());
  const { loaded, waiting } = world.counts;
  const { x, y, z } = camera.position;
  hud.textContent =
    `${MESHERS[world.mesher].label}: ${loaded} chunks, ${waiting} waiting\n` +
    `${mode === 'walk' ? (player.grounded ? 'Walking' : 'In the air') : 'Flying'}\n` +
    `x ${x.toFixed(0)}, y ${y.toFixed(0)}, z ${z.toFixed(0)}\n` +
    `Tool ${tool.radius.toFixed(1)} m, far view ${farView.vertices} vertices\n` +
    `${engine.getFps().toFixed(0)} fps`;
});

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