Download Game! Currently 92 players and visitors. Last logged in:CovidDesertCaitlineDiv

Blitzer's Blog >> 72145

Back to blogs index
Posted: 06 Sep 2026 12:28 [ permalink ]
[Main] Starting
[Main] Worker created
[Main] Init message sent
[Main] Push successful? true
[Worker] Loaded
[Worker] Received message {
  type: 'init',
  sab: SharedArrayBuffer {
    [Uint8Contents]: <00 00 00 00 01 00 00 00 01 00 00 00 00 00 00 00 00 00 00
00 01 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00
00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00
00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00
00 00 00 ... 932 more bytes>,
    [byteLength]: 1032
  },
  capacity: 64
}
[Main] Received from worker: mesh
Received mesh for chunk 0
  Vertex count: 36
  First 4 vertices: Float32Array(12) [
  1, 0, 0, 1, 0,
  1, 1, 1, 1, 1,
  0, 0
]
[Main] Worker exited with code 1

==

##  **Success  The system is fully operational**

Your ring buffer and worker are now working as intended. The output confirms:

- The main thread pushes a command to the ring buffer.
- The worker receives the command, sets a voxel, and generates a cube mesh (36
vertices).
- The mesh is transferred back to the main thread.

The worker exits with code `1` because the main thread calls `worker.terminate(
)` after receiving the mesh  thats expected.

---

## What youve built

- **Lockfree SPSC ring buffer** (`edit_queue.ts`)  uses `SharedArrayBuffer`,
`Atomics`, and a blocking `wait` for efficient producer/consumer
communication.
- **Mesh worker** (`mesh_worker.ts`)  maintains chunk data in a `Map`,
processes `SET_VOXEL` commands, and generates naive triangle meshes (no
culling, no optimizations).
- **Test harness** (`test.ts`)  demonstrates the full pipeline: push an edit,
receive geometry, and clean up.

All components are written in TypeScript and compiled to CommonJS JavaScript
for Node.js compatibility.

---

## Next steps for your WebGL port

1. **Extend the command set**  
   Add more commands (e.g., `REMOVE_VOXEL`, `BATCH_UPDATE`) and support for
chunk coordinates other than `0`.

2. **Optimise mesh generation**  
   Implement face culling (skip faces between adjacent filled voxels) and
greedy meshing for better performance.

3. **Integrate with WebGL**  
   - In the main thread, receive the `Float32Array` of vertices via the
workers `message` event.
   - Upload it to a GPU buffer using `gl.bufferData(gl.ARRAY_BUFFER, vertices,
gl.STATIC_DRAW)`.
   - Render chunks as draw calls.

4. **Manage multiple workers**  
   For production, you may want a pool of workers to generate geometry in
parallel (though the SPSC design supports only one producer and one consumer 
that may be sufficient for a singlethreaded main loop).

5. **Deploy to the browser**  
   - The code uses `SharedArrayBuffer` and `Atomics`, which require
[crossorigin isolation](https://developer.mozilla.org/en-US/docs/Web/JavaScript
/Reference/Global_Objects/SharedArrayBuffer#security_requirements) (setting
`Cross-Origin-Opener-Policy` and `Cross-Origin-Embedder-Policy` headers).
   - Workers can be instantiated with `new Worker('mesh_worker.js')` in the
browser  just bundle the transpiled JavaScript.

---

## Quick reference for building and running

```bash
# Compile all .ts files to dist/
npx tsc

# Run the test
node dist/test.js
```

You can also run directly with `ts-node` by adjusting the worker path and
module resolution, but the compiled approach is more stable for production.

---

The core infrastructure is ready. You can now focus on rendering and
optimising the voxel engine. Well done!