Fix transparent blocks

client/workers/chunk_messages.ts

@@ -1,6 +1,7 @@
 import type { BlockRegistry } from "$/common/everything_registry.ts";
 import type { SpriteRegion } from "$/common/constants.ts";
 import type { OreJson } from "$/common/mod_data.ts";
+import type { SortType } from "./translucent_sort.ts";
 
 // messages between the main thread and the chunk workers
 
@@ -17,7 +18,30 @@ export type ToChunkWorker =
 		ores: OreJson[];
 	}
 	| { type: "generate"; chunk_x: number; chunk_z: number; seed: string }
-	| { type: "mesh"; chunk_x: number; chunk_z: number; version: number; padded_chunk: Uint32Array };
+	| {
+		type: "mesh";
+		chunk_x: number;
+		chunk_z: number;
+		version: number;
+		padded_chunk: Uint32Array;
+		// where the camera is, to sort the translucent quads
+		camera: number[];
+	}
+	| {
+		type: "sort";
+		chunk_x: number;
+		chunk_z: number;
+		version: number;
+		sort_version: number;
+		centers: Float32Array;
+		camera: number[];
+	};
+
+// 4 vertices per quad
+export interface LayerMesh {
+	vertices: Float32Array;
+	quad_count: number;
+}
 
 export type FromChunkWorker =
 	| {
@@ -33,8 +57,23 @@ export type FromChunkWorker =
 		chunk_x: number;
 		chunk_z: number;
 		version: number;
-		opaque_vertices: Float32Array;
-		opaque_count: number;
-		transparent_vertices: Float32Array;
-		transparent_count: number;
+		solid: LayerMesh;
+		cutout: LayerMesh;
+		translucent: LayerMesh & {
+			// sorted back to front for the camera the mesh was requested with
+			indices: Uint32Array;
+			sort_type: SortType;
+			// what resorting needs, see translucent_sort.ts
+			centers: Float32Array;
+			planes: [Float32Array, Float32Array, Float32Array];
+		};
+		camera: number[];
+	}
+	| {
+		type: "sorted";
+		chunk_x: number;
+		chunk_z: number;
+		version: number;
+		sort_version: number;
+		indices: Uint32Array;
 	};

client/workers/chunk_worker.ts

@@ -1,12 +1,20 @@
 /// <reference lib="webworker" />
 
-import type { BlockRegistry } from "$/common/everything_registry.ts";
-import type { SpriteRegion } from "$/common/constants.ts";
+import type { BlockRegistry, RenderLayer } from "$/common/everything_registry.ts";
+import { AIR, type SpriteRegion } from "$/common/constants.ts";
 import type { Texture } from "../renderer/types.ts";
 import type { FromChunkWorker, ToChunkWorker } from "./chunk_messages.ts";
 import { generate_raw_chunk, WorldgenSetup } from "$/common/generation.ts";
 import { load_worldgen } from "$/common/worldgen_loader.ts";
 import { default_block_value } from "$/common/utils.ts";
+import {
+	choose_sort_type,
+	FACE_NORMALS,
+	quad_indices,
+	quad_planes,
+	sort_by_distance,
+	sort_quads,
+} from "./translucent_sort.ts";
 
 const pad = 0.5;
 
@@ -64,9 +72,6 @@ export function push_front_face(
 	i = push_vertex(vertices, i, x, y, z2, u0, v1, r, g, b, a);
 	i = push_vertex(vertices, i, x2, y, z2, u1, v1, r, g, b, a);
 	i = push_vertex(vertices, i, x2, y2, z2, u1, v0, r, g, b, a);
-
-	i = push_vertex(vertices, i, x, y, z2, u0, v1, r, g, b, a);
-	i = push_vertex(vertices, i, x2, y2, z2, u1, v0, r, g, b, a);
 	i = push_vertex(vertices, i, x, y2, z2, u0, v0, r, g, b, a);
 
 	return i;
@@ -99,9 +104,6 @@ export function push_back_face(
 	i = push_vertex(vertices, i, x2, y, z, u0, v1, r, g, b, a);
 	i = push_vertex(vertices, i, x, y, z, u1, v1, r, g, b, a);
 	i = push_vertex(vertices, i, x, y2, z, u1, v0, r, g, b, a);
-
-	i = push_vertex(vertices, i, x2, y, z, u0, v1, r, g, b, a);
-	i = push_vertex(vertices, i, x, y2, z, u1, v0, r, g, b, a);
 	i = push_vertex(vertices, i, x2, y2, z, u0, v0, r, g, b, a);
 
 	return i;
@@ -134,9 +136,6 @@ export function push_left_face(
 	i = push_vertex(vertices, i, x, y, z, u0, v1, r, g, b, a);
 	i = push_vertex(vertices, i, x, y, z2, u1, v1, r, g, b, a);
 	i = push_vertex(vertices, i, x, y2, z2, u1, v0, r, g, b, a);
-
-	i = push_vertex(vertices, i, x, y, z, u0, v1, r, g, b, a);
-	i = push_vertex(vertices, i, x, y2, z2, u1, v0, r, g, b, a);
 	i = push_vertex(vertices, i, x, y2, z, u0, v0, r, g, b, a);
 
 	return i;
@@ -170,9 +169,6 @@ export function push_right_face(
 	i = push_vertex(vertices, i, x2, y, z2, u0, v1, r, g, b, a);
 	i = push_vertex(vertices, i, x2, y, z, u1, v1, r, g, b, a);
 	i = push_vertex(vertices, i, x2, y2, z, u1, v0, r, g, b, a);
-
-	i = push_vertex(vertices, i, x2, y, z2, u0, v1, r, g, b, a);
-	i = push_vertex(vertices, i, x2, y2, z, u1, v0, r, g, b, a);
 	i = push_vertex(vertices, i, x2, y2, z2, u0, v0, r, g, b, a);
 
 	return i;
@@ -206,9 +202,6 @@ export function push_top_face(
 	i = push_vertex(vertices, i, x, y2, z2, u0, v1, r, g, b, a);
 	i = push_vertex(vertices, i, x2, y2, z2, u1, v1, r, g, b, a);
 	i = push_vertex(vertices, i, x2, y2, z, u1, v0, r, g, b, a);
-
-	i = push_vertex(vertices, i, x, y2, z2, u0, v1, r, g, b, a);
-	i = push_vertex(vertices, i, x2, y2, z, u1, v0, r, g, b, a);
 	i = push_vertex(vertices, i, x, y2, z, u0, v0, r, g, b, a);
 
 	return i;
@@ -241,9 +234,6 @@ export function push_bottom_face(
 	i = push_vertex(vertices, i, x, y, z, u0, v1, r, g, b, a);
 	i = push_vertex(vertices, i, x2, y, z, u1, v1, r, g, b, a);
 	i = push_vertex(vertices, i, x2, y, z2, u1, v0, r, g, b, a);
-
-	i = push_vertex(vertices, i, x, y, z, u0, v1, r, g, b, a);
-	i = push_vertex(vertices, i, x2, y, z2, u1, v0, r, g, b, a);
 	i = push_vertex(vertices, i, x, y, z2, u0, v0, r, g, b, a);
 
 	return i;
@@ -254,18 +244,29 @@ type TexturesInfo = Record<string, SpriteRegion>;
 const CHUNK_SIZE = 16;
 const CHUNK_HEIGHT = 128;
 const TEXTURE_SIZE = 16;
+const FLOATS_PER_QUAD = 4 * 9;
 
-const FACE_PUSHING_FUNCTIONS = {
-	top: push_top_face,
-	bottom: push_bottom_face,
-	front: push_front_face,
-	back: push_back_face,
-	left: push_left_face,
-	right: push_right_face,
-} as const;
+// same order as FACE_NORMALS in translucent_sort.ts
+const FACES = ["top", "bottom", "front", "back", "left", "right"] as const;
+const FACE_PUSHING_FUNCTIONS = [
+	push_top_face,
+	push_bottom_face,
+	push_front_face,
+	push_back_face,
+	push_left_face,
+	push_right_face,
+] as const;
+
+const SOLID = 0;
+const CUTOUT = 1;
+const TRANSLUCENT = 2;
+const LAYER_IDS: Record<RenderLayer, number> = { solid: SOLID, cutout: CUTOUT, translucent: TRANSLUCENT };
 
 let blocks_registry: BlockRegistry[] = [];
 let block_ids: Record<string, number> = {};
+// by numeric id, checked for every face
+let block_layers = new Uint8Array(0);
+let block_cull_same = new Uint8Array(0);
 let textures_info: TexturesInfo = {};
 let image: Texture;
 let worldgen: WorldgenSetup | undefined;
@@ -280,6 +281,11 @@ self.onmessage = async (event: MessageEvent<ToChunkWorker>) => {
 		case "init":
 			blocks_registry = message.blocks_registry;
 			block_ids = message.block_ids;
+			block_layers = Uint8Array.from(blocks_registry, (block) => LAYER_IDS[block?.render_layer ?? "solid"]);
+			block_cull_same = Uint8Array.from(
+				blocks_registry,
+				(block) => (block?.cull_same ?? block?.render_layer === "translucent") ? 1 : 0,
+			);
 			textures_info = message.textures_info;
 			image = message.image as Texture;
 			default_values = blocks_registry.map((block, nid) => default_block_value(nid, block));
@@ -292,13 +298,11 @@ self.onmessage = async (event: MessageEvent<ToChunkWorker>) => {
 			generate(message.chunk_x, message.chunk_z, message.seed);
 			break;
 		case "mesh": {
-			const [opaque_vertices, opaque_count, transparent_vertices, transparent_count] = make_chunk_mesh(
+			const { solid, cutout, translucent } = make_chunk_mesh(
 				message.chunk_x,
 				message.chunk_z,
 				message.padded_chunk,
-				blocks_registry,
-				textures_info,
-				image,
+				message.camera,
 			);
 			post(
 				{
@@ -306,15 +310,35 @@ self.onmessage = async (event: MessageEvent<ToChunkWorker>) => {
 					chunk_x: message.chunk_x,
 					chunk_z: message.chunk_z,
 					version: message.version,
-					opaque_vertices,
-					opaque_count,
-					transparent_vertices,
-					transparent_count,
+					solid,
+					cutout,
+					translucent,
+					camera: message.camera,
 				},
-				[opaque_vertices.buffer, transparent_vertices.buffer],
+				[
+					solid.vertices.buffer,
+					cutout.vertices.buffer,
+					translucent.vertices.buffer,
+					translucent.indices.buffer,
+					translucent.centers.buffer,
+					...translucent.planes.map((planes) => planes.buffer),
+				],
 			);
 			break;
 		}
+		case "sort": {
+			const [x, y, z] = message.camera;
+			const indices = quad_indices(sort_by_distance(message.centers, message.centers.length / 3, x, y, z));
+			post({
+				type: "sorted",
+				chunk_x: message.chunk_x,
+				chunk_z: message.chunk_z,
+				version: message.version,
+				sort_version: message.sort_version,
+				indices,
+			}, [indices.buffer]);
+			break;
+		}
 	}
 };
 
@@ -327,42 +351,38 @@ function generate(chunk_x: number, chunk_z: number, seed: string) {
 	post({ type: "generated", chunk_x, chunk_z, blocks, spills }, [blocks.buffer, spills.buffer]);
 }
 
-function make_chunk_mesh(
-	chunk_x: number,
-	chunk_z: number,
-	padded_chunk: Uint32Array,
-	blocks_registry: BlockRegistry[],
-	textures_info: TexturesInfo,
-	image: Texture,
-): [Float32Array, number, Float32Array, number] {
-	let opaque_vertices = new Float32Array(2048);
-	let opaque_count = 0;
-	let transparent_vertices = new Float32Array(2048);
-	let transparent_count = 0;
+// the rule vanilla minecraft (and so sodium) uses: solid neighbors hide a face, and some blocks
+// hide faces between two of themselves
+function show_face(block: number, neighbor: number) {
+	if (neighbor === AIR) return true;
+	// unloaded (VOID) or above/below the world
+	const layer = block_layers[neighbor];
+	if (layer === undefined || layer === SOLID) return false;
+	return !(neighbor === block && block_cull_same[block]);
+}
+
+function make_chunk_mesh(chunk_x: number, chunk_z: number, padded_chunk: Uint32Array, camera: number[]) {
+	const layers = [SOLID, CUTOUT, TRANSLUCENT].map(() => ({ vertices: new Float32Array(2048), floats: 0 }));
+	// for sorting the translucent quads
+	let centers = new Float32Array(256);
+	let faces = new Uint8Array(256);
 
 	const size = CHUNK_SIZE + 2;
-	const layer = size * size;
-
-	const padded_index = (x: number, y: number, z: number) => {
-		return y * layer + z * size + x;
-	};
-
-	const show_face = (block: number) => {
-		if (block === 0) return true;
-		const info = blocks_registry[block];
-		return info?.transparent ?? false;
-	};
+	const layer_size = size * size;
+	// where the neighbor on each face is in padded_chunk, same order as FACES
+	const face_offsets = [layer_size, -layer_size, size, -size, -1, 1];
 
 	for (let y = 0; y < CHUNK_HEIGHT; y++) {
 		for (let z = 0; z < CHUNK_SIZE; z++) {
 			for (let x = 0; x < CHUNK_SIZE; x++) {
-				const px = x + 1;
-				const pz = z + 1;
-
-				const block_nid = padded_chunk[padded_index(px, y, pz)];
-				if (block_nid === 0) continue;
+				const index = y * layer_size + (z + 1) * size + (x + 1);
+				const block_nid = padded_chunk[index];
+				if (block_nid === AIR) continue;
 
 				const block_info = blocks_registry[block_nid];
+				const layer_id = block_layers[block_nid];
+				const layer = layers[layer_id];
+				const alpha = layer_id === TRANSLUCENT ? block_info.alpha ?? 1 : 1;
 
 				const texture_ids = {
 					top: "engine:missing",
@@ -402,72 +422,71 @@ function make_chunk_mesh(
 				const wx = chunk_x * CHUNK_SIZE + x;
 				const wz = chunk_z * CHUNK_SIZE + z;
 
-				const faces = {
-					front: show_face(padded_chunk[padded_index(px, y, pz + 1)]),
-					back: show_face(padded_chunk[padded_index(px, y, pz - 1)]),
-					left: show_face(padded_chunk[padded_index(px - 1, y, pz)]),
-					right: show_face(padded_chunk[padded_index(px + 1, y, pz)]),
-					top: show_face(padded_chunk[padded_index(px, y + 1, pz)]),
-					bottom: show_face(padded_chunk[padded_index(px, y - 1, pz)]),
-				} as const;
+				for (let face = 0; face < 6; face++) {
+					if (!show_face(block_nid, padded_chunk[index + face_offsets[face]])) {
+						continue;
+					}
 
-				for (const side of ["front", "back", "left", "right", "top", "bottom"] as const) {
-					if (faces[side]) {
-						const region = textures_info[texture_ids[side]];
+					const region = textures_info[texture_ids[FACES[face]]];
+					layer.vertices = ensure_capacity(layer.vertices, layer.floats + FLOATS_PER_QUAD);
+					layer.floats = FACE_PUSHING_FUNCTIONS[face](
+						layer.vertices,
+						layer.floats,
+						image,
+						wx,
+						y,
+						wz,
+						region.x * TEXTURE_SIZE,
+						region.y * TEXTURE_SIZE,
+						TEXTURE_SIZE,
+						TEXTURE_SIZE,
+						1,
+						1,
+						1,
+						alpha,
+					);
 
-						if (block_info.transparent) {
-							transparent_vertices = ensure_capacity(
-								transparent_vertices,
-								transparent_count + (6 * 6 * 9),
-							);
-							transparent_count = FACE_PUSHING_FUNCTIONS[side](
-								transparent_vertices,
-								transparent_count,
-								image,
-								wx,
-								y,
-								wz,
-								region.x * TEXTURE_SIZE,
-								region.y * TEXTURE_SIZE,
-								TEXTURE_SIZE,
-								TEXTURE_SIZE,
-								1,
-								1,
-								1,
-								block_info.alpha ?? 1,
-							);
-						} else {
-							opaque_vertices = ensure_capacity(opaque_vertices, opaque_count + (6 * 6 * 9));
-							opaque_count = FACE_PUSHING_FUNCTIONS[side](
-								opaque_vertices,
-								opaque_count,
-								image,
-								wx,
-								y,
-								wz,
-								region.x * TEXTURE_SIZE,
-								region.y * TEXTURE_SIZE,
-								TEXTURE_SIZE,
-								TEXTURE_SIZE,
-								1,
-								1,
-								1,
-								1,
-							);
-						}
+					if (layer_id === TRANSLUCENT) {
+						const quad = layer.floats / FLOATS_PER_QUAD - 1;
+						centers = ensure_capacity(centers, (quad + 1) * 3);
+						faces = ensure_capacity(faces, quad + 1);
+						const [nx, ny, nz] = FACE_NORMALS[face];
+						centers[quad * 3] = wx + 0.5 + nx * 0.5;
+						centers[quad * 3 + 1] = y + 0.5 + ny * 0.5;
+						centers[quad * 3 + 2] = wz + 0.5 + nz * 0.5;
+						faces[quad] = face;
 					}
 				}
 			}
 		}
 	}
 
-	return [opaque_vertices, opaque_count, transparent_vertices, transparent_count];
+	const [solid, cutout, translucent] = layers.map((layer) => ({
+		vertices: layer.vertices,
+		quad_count: layer.floats / FLOATS_PER_QUAD,
+	}));
+
+	const quads = { centers, faces, count: translucent.quad_count };
+	const sort_type = choose_sort_type(quads);
+	const [camera_x, camera_y, camera_z] = camera;
+
+	return {
+		solid,
+		cutout,
+		translucent: {
+			...translucent,
+			indices: sort_quads(quads, sort_type, camera_x, camera_y, camera_z),
+			sort_type,
+			centers: centers.slice(0, quads.count * 3),
+			planes: quad_planes(quads),
+		},
+	};
 }
 
-function ensure_capacity(
-	buffer: Float32Array<ArrayBuffer>,
+function ensure_capacity<T extends Float32Array<ArrayBuffer> | Uint8Array<ArrayBuffer>>(
+	buffer: T,
 	required: number,
-) {
+): T {
 	if (required <= buffer.length) return buffer;
 
 	let new_length = buffer.length;
@@ -475,7 +494,7 @@ function ensure_capacity(
 		new_length *= 2;
 	}
 
-	const new_buffer = new Float32Array(new_length);
-	new_buffer.set(buffer);
+	const new_buffer = new (buffer.constructor as new (length: number) => T)(new_length);
+	new_buffer.set(buffer as ArrayLike<number>);
 	return new_buffer;
 }

client/workers/translucent_sort.ts

@@ -0,0 +1,158 @@
+// translucent quad sorting, the way sodium does it (its "translucency sorting"), simplified for quads
+// that all face along an axis.
+// every chunk's translucent mesh gets a sort type when it's meshed:
+// - none: the order can't matter, one quad or all of them in a single plane
+// - static: all quads face along one axis, so sorting them by distance along their normal once is right
+//   from anywhere the camera can see them
+// - dynamic: sorted by distance to the camera, and sorted again only when the camera crosses one of the
+//   planes the chunk's quads lie on, the only time the order between them can change (sodium's GFNI)
+
+export type SortType = "none" | "static" | "dynamic";
+
+// same order as the mesher's faces
+export const FACE_NORMALS = [
+	[0, 1, 0], // top
+	[0, -1, 0], // bottom
+	[0, 0, 1], // front
+	[0, 0, -1], // back
+	[-1, 0, 0], // left
+	[1, 0, 0], // right
+] as const;
+
+export const FACE_AXIS = [1, 1, 2, 2, 0, 0] as const;
+
+// for each quad: its center, and which face it is
+export interface TranslucentQuads {
+	centers: Float32Array;
+	faces: Uint8Array;
+	count: number;
+}
+
+export function choose_sort_type(quads: TranslucentQuads): SortType {
+	if (quads.count <= 1) {
+		return "none";
+	}
+
+	let axes = 0;
+	for (let q = 0; q < quads.count; q++) {
+		axes |= 1 << FACE_AXIS[quads.faces[q]];
+	}
+	// more than one axis, the order depends on where the camera is
+	if (axes & (axes - 1)) {
+		return "dynamic";
+	}
+
+	// quads facing opposite ways on the same axis are never both visible over each other, so only
+	// the distance along the axis matters. if they all share a plane, nothing can overlap at all
+	const axis = FACE_AXIS[quads.faces[0]];
+	const plane = quads.centers[axis];
+	for (let q = 1; q < quads.count; q++) {
+		if (quads.centers[q * 3 + axis] !== plane) {
+			return "static";
+		}
+	}
+	return "none";
+}
+
+// the unique coordinates of the planes the quads lie on, per axis, sorted. the camera crossing one of
+// these is what triggers a dynamic sort
+export function quad_planes(quads: TranslucentQuads): [Float32Array, Float32Array, Float32Array] {
+	const sets = [new Set<number>(), new Set<number>(), new Set<number>()];
+	for (let q = 0; q < quads.count; q++) {
+		const axis = FACE_AXIS[quads.faces[q]];
+		sets[axis].add(quads.centers[q * 3 + axis]);
+	}
+	return sets.map((set) => Float32Array.from(set).sort()) as [Float32Array, Float32Array, Float32Array];
+}
+
+// whether moving the camera from a to b crosses any of the planes
+export function crosses_planes(planes: [Float32Array, Float32Array, Float32Array], a: number[], b: number[]) {
+	for (let axis = 0; axis < 3; axis++) {
+		if (a[axis] === b[axis] || planes[axis].length === 0) {
+			continue;
+		}
+		if (count_below(planes[axis], a[axis]) !== count_below(planes[axis], b[axis])) {
+			return true;
+		}
+	}
+	return false;
+}
+
+function count_below(sorted: Float32Array, value: number) {
+	let lo = 0;
+	let hi = sorted.length;
+	while (lo < hi) {
+		const mid = (lo + hi) >> 1;
+		if (sorted[mid] < value) {
+			lo = mid + 1;
+		} else {
+			hi = mid;
+		}
+	}
+	return lo;
+}
+
+// back to front, for the camera at camera_x/y/z when the sort type is dynamic
+export function sort_quads(
+	quads: TranslucentQuads,
+	sort_type: SortType,
+	camera_x: number,
+	camera_y: number,
+	camera_z: number,
+): Uint32Array {
+	const { centers, faces, count } = quads;
+	if (sort_type === "dynamic") {
+		return quad_indices(sort_by_distance(centers, count, camera_x, camera_y, camera_z));
+	}
+
+	const order = new Uint32Array(count);
+	for (let q = 0; q < count; q++) {
+		order[q] = q;
+	}
+	if (sort_type === "static") {
+		// for quads facing the camera, the ones further along their normal are closer to it
+		const keys = new Float32Array(count);
+		for (let q = 0; q < count; q++) {
+			const [nx, ny, nz] = FACE_NORMALS[faces[q]];
+			keys[q] = centers[q * 3] * nx + centers[q * 3 + 1] * ny + centers[q * 3 + 2] * nz;
+		}
+		order.sort((a, b) => keys[a] - keys[b]);
+	}
+	return quad_indices(order);
+}
+
+// dynamic sorting only needs the centers, so resorting doesn't need the whole mesh
+export function sort_by_distance(
+	centers: Float32Array,
+	count: number,
+	camera_x: number,
+	camera_y: number,
+	camera_z: number,
+): Uint32Array {
+	const order = new Uint32Array(count);
+	const distances = new Float32Array(count);
+	for (let q = 0; q < count; q++) {
+		order[q] = q;
+		const dx = centers[q * 3] - camera_x;
+		const dy = centers[q * 3 + 1] - camera_y;
+		const dz = centers[q * 3 + 2] - camera_z;
+		distances[q] = dx * dx + dy * dy + dz * dz;
+	}
+	return order.sort((a, b) => distances[b] - distances[a]);
+}
+
+// two triangles per quad, drawn in the given order
+export function quad_indices(order: Uint32Array): Uint32Array {
+	const indices = new Uint32Array(order.length * 6);
+	for (let i = 0; i < order.length; i++) {
+		const v = order[i] * 4;
+		const o = i * 6;
+		indices[o] = v;
+		indices[o + 1] = v + 1;
+		indices[o + 2] = v + 2;
+		indices[o + 3] = v;
+		indices[o + 4] = v + 2;
+		indices[o + 5] = v + 3;
+	}
+	return indices;
+}