Skip to content

About

Overview

What is Crab Island?

Crab Island is a demonstraton of the combined abilities of Rust, WASM, WebGPU and compute shaders. It renders 3D islands in a web browser, utilising the computing power of a graphics card (GPU). Crab Island uses the GPU not only for drawing triangles, but also for more general computation (GPGPU).

What are the technical goals of Crab Island?

Crab Island is designed to

  • Load quickly and start rendering as soon as possible over a typical internet connection
  • Run at a consistent, high frame rate
  • Have a responsive UI at all times
  • Be scalable to a variety of platforms that might have both a web browser and a GPU
  • Demonstate real-time interaction between the web browser controls and the 3D renderer

Architecture

What technologies is Crab Island made with?

  • Rust - programming language
  • WebAssembly (aka WASM) - portable code format
  • WebGPU - interface to graphics hardware
  • Trunk - build system for web applications
  • Yew - user interface for web applications

How many threads does Crab Island use?

Crab Island uses two threads: One thread for the User Interface (UI), and one "engine" thread which commands the GPU. Crab Island doesn't do much else on the CPU, but if it did then I would consider adding a third thread.

Thread 1: UI Thread

The UI thread is the first thread that is invoked by the web browser. It is responsible for interacting with the Document Object Model (DOM), generating the user interface, and then marshalling user input to the engine thread. The UI thread is responsible for drawing the controls such a buttons and sliders, all text, and anything that isn't the main island 3D viewport. I chose to keep the UI thread separate from the rest of the program because I want the UI to always feel responsive to the user, and to never block due to any other tasks.

Thread 2: Engine / GPU Thread

The engine thread is a WebWorker which is spawned and controlled by the UI thread. The engine thread is the only thread which interacts with WGPU. I chose this design because WGPU isn't yet designed to make use of multiple threads (although there are plans to improve this in future). I also wanted a dedicated thread to always be rendering, so that I can acheive high frame rates. That said, the engine thread does perform some miscellaneous low-priority, lightweight tasks in between the main high-priority rendering task. Low priority tasks include: Waiting for the results of GPU computations and waiting for the network to load files.

I only need a dual-core CPU?

Correct. Crab Island has a low CPU requirement. It will still work on a single core CPU, albeit less efficiently. However you won't see much performance benefit from a CPU with more than 2 cores.

Why not use more threads?

Unfortunately current web browsers have limitations for communicating between threads. I found the most reliable method to be to serialize everything to a text format called JavaScript Object Notation (JSON) and then send that between threads. I decided to limit inter thread communication by using threads only where neccessary, primarily to save my programming efforts on writing serialization code, but also to save the CPU time wasted on serialization. In future, it may be easier to directly share memory between threads in a web browser and then I would consider using more threads in order to utilize all of the cores available on a CPU.