samdauwe / webgpu-aquarium

Reimplementation of WebGL Aquarium using the WebGPU API.

WebGPU Aquarium

The WebGPU API is the successor to the WebGL and WebGL 2 graphics APIs for the Web. It aims to provide modern features such as “GPU compute” as well as lower overhead access to GPU hardware and better, more predictable performance. WebGPU is being developed by the “GPU for the Web” W3C community group.

WebGPU Aquarium is an reimplementation of WebGL Aquarium using the WebGPU API and based on the Dawn backend of the native implementation Aquarium. The goal of this project is to compare the performance of WebGPU (JavaScript) version to its native counterparts, such as OpenGL, D3D, Vulkan, Metal, ANGLE and Dawn.

This project is currenlty work in progress, a list with todos is available on the bottom of this page. An online demo of the latest version is available on this link.

Setup

First install:

• Git

• Node.js

• A Text Editor such as Visual Studio Code.

Then type the following commands in any terminal such as VS Code's Integrated Terminal.

# Clone the repo
git clone https://github.com/samdauwe/webgpu-aquarium

# Go inside the 'webgpu-aquarium' folder
cd webgpu-aquarium

# Start installing dependencies, building, and running at localhost:8080
npm start

Launch Chrome Canary with the enable-unsafe-webgpu flag set (at chrome://flags/#enable-unsafe-webgpu) and open the aquarium scene using the url 'http://localhost:8080/dist'. Other browsers were not tested yet, see the Implementation Status page for updates on browser support.

Local development

Hot code reloading does not seem to be always very reliable, this might be a caching issue. An alternative approach is to launch a local http server:

# Go inside the 'webgpu-aquarium' folder
cd webgpu-aquarium

# Start a local http server listening on port 8080
python3 -m http.server 8080

Manually trigger a rebuild in a separate console on code changes:

# Go inside the 'webgpu-aquarium' source folder
cd webgpu-aquarium
cd src

# Start a local http server listening on port 8080
npm run build

Refresh the aquarium scene on the url 'http://localhost:8080/dist'.

Todos

• Inner globe is not properly rendered.
• Debug asynchronous buffer mapping for better performance.
• Add control panel
  • Show FPS and Frame time
  • Show current settings
  • Configure the amount of fishs
• Seaweeds are not rendered transparent and are flickering.
• Scene does not exacly match the native counterpart (i.e. placement of meshes).
• Implement scene resize.

License

Open-source under BSD 3-Clause License.