WebGPU + WebAssembly Rendering Experiments

This repository contains experimental browser-based demos that combine WebAssembly for computation or software rendering with WebGPU for presentation and post-processing. The project explores different CPU ↔ GPU data paths, memory layouts, and rendering architectures.

All demos are served locally over HTTPS and target modern browsers with WebGPU enabled.

Demos Overview

The project currently contains multiple demos that share a small custom WebGPU framework but differ in how rendering data is produced.

1. WASM Particle Simulation (WASM → GPU Buffers)

A particle simulation where:

Particle state is stored and updated in WebAssembly memory
JavaScript maps WASM memory into typed arrays
Particle data is uploaded each frame into WebGPU buffers
Particles are rendered using instanced quads and WGSL shaders

Pipeline:

WASM (particle simulation)
   ↓
Shared linear memory
   ↓
WebGPU storage buffer
   ↓
Vertex / fragment shaders

This demo focuses on compute-heavy workloads where the GPU only handles drawing.

2. WASM Framebuffer Renderer (WASM → WebGPU Texture)

A software renderer implemented in WebAssembly where:

WASM renders directly into a CPU-side RGBA framebuffer
The framebuffer is uploaded each frame to a WebGPU texture
Rendering is displayed using a fullscreen quad
GPU-based post-processing is applied (FXAA, optional TAA)

Pipeline:

WASM (software renderer)
   ↓
RGBA framebuffer (Uint8Array)
   ↓
WebGPU texture upload
   ↓
Fullscreen quad
   ↓
FXAA / TAA shaders

This demo explores hybrid rendering, where rasterization or ray-style rendering happens on the CPU and the GPU is used for presentation and post-processing.

Repository Structure

.
├── demos/
│   ├── WebGpuFrameworkWasm/
│   ├── webGpuFrameworkAndWasmParticles/
│   └── webGpuNativeWasm/
│
├── framework/
│   ├── WebGpu.js
│   ├── Camera.js
│   ├── Matrix4.js
│   ├── Vector3.js
│   └── EventManager.js
│
├── shaders/
│   ├── simplePoint.wgsl
│   ├── triangle-list-texture-solid.wgsl
│   ├── fxaa.wgsl
│   └── taa.wgsl
│
├── textures/
│
├── wasm_add_pthread.js
├── wasm_add_pthread.wasm
│
├── server.js
├── package.json
│
├── localhost.pem
├── localhost-key.pem

Requirements

Chromium-based browser with WebGPU enabled
Node.js for the local server
HTTPS (required for WebGPU, SharedArrayBuffer, and WASM pthreads)

Installation

npm install

Running the Demos

Start the HTTPS development server:

node server.js

Open the printed HTTPS URL in your browser and navigate to the demo directories under /demos.

Technical Focus

This project is primarily concerned with:

WASM ↔ JavaScript memory sharing
CPU → GPU data transfer costs
WebGPU buffer vs texture upload strategies
Hybrid CPU/GPU rendering pipelines
GPU-based post-processing of CPU-generated images

Status

This is an experimental research project. APIs, shaders, and internal structure are subject to change.

License

MIT

3.2 KiB Raw Blame History