Fix transparent blocks

2026-09-25 15:01:03 -03:00
parent dfabe40e7a
commit f8d406dcf0
13 changed files with 645 additions and 192 deletions
@@ -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;
 }