diff --git a/README.md b/README.md index 805d9d3..22074d7 100644 --- a/README.md +++ b/README.md @@ -1,43 +1,67 @@ -# WebGPU + WebAssembly Demos -This repository contains multiple experimental demos combining **WebGPU rendering** with **WebAssembly computation**, focused on high-performance graphics and data-parallel workloads in the browser. +# WebGPU + WebAssembly Rendering Experiments -The demos are served locally via a small Node.js HTTPS server and require a browser with WebGPU enabled. +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. --- -## Overview +## Demos Overview -Each demo follows the same high-level architecture: +The project currently contains multiple demos that share a small custom WebGPU framework but differ in how rendering data is produced. -* **Computation** is performed in WebAssembly (optionally with pthreads) -* **Rendering** is performed using WebGPU -* **Data exchange** happens via shared linear memory (WASM → JavaScript → GPU buffers) +### 1. WASM Particle Simulation (WASM → GPU Buffers) -One example demo is a **particle simulation** where particle positions and attributes are updated in WebAssembly and rendered each frame using instanced point-sprite quads in WebGPU. +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. --- -## Particle Simulation Demo +### 2. WASM Framebuffer Renderer (WASM → WebGPU Texture) -### Architecture +A software renderer implemented in WebAssembly where: -* Particle state lives entirely in WASM linear memory -* JavaScript maps the WASM memory into a `Float32Array` -* Each frame: +* 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) - 1. WASM updates particle positions (`_update_particles`) - 2. The particle buffer is uploaded to a WebGPU storage buffer - 3. A WebGPU render pass draws particles using a WGSL shader +**Pipeline:** -### Key Technologies +``` +WASM (software renderer) + ↓ +RGBA framebuffer (Uint8Array) + ↓ +WebGPU texture upload + ↓ +Fullscreen quad + ↓ +FXAA / TAA shaders +``` -* WebGPU (rendering) -* WebAssembly (simulation) -* SharedArrayBuffer (when pthreads are enabled) -* Custom minimal WebGPU framework -* WGSL 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. --- @@ -59,6 +83,8 @@ One example demo is a **particle simulation** where particle positions and attri │ ├── shaders/ │ ├── simplePoint.wgsl +│ ├── triangle-list-texture-solid.wgsl +│ ├── fxaa.wgsl │ └── taa.wgsl │ ├── textures/ @@ -78,20 +104,13 @@ One example demo is a **particle simulation** where particle positions and attri ## Requirements * Chromium-based browser with WebGPU enabled - (Chrome, Chromium, or Edge with `--enable-unsafe-webgpu`) -* Node.js (for the local HTTPS server) -* HTTPS is required for: - - * WebGPU - * SharedArrayBuffer - * WebAssembly pthreads +* Node.js for the local server +* HTTPS (required for WebGPU, SharedArrayBuffer, and WASM pthreads) --- ## Installation -Install dependencies: - ``` npm install ``` @@ -100,44 +119,32 @@ npm install ## Running the Demos -Start the local HTTPS server: +Start the HTTPS development server: ``` node server.js ``` -Open your browser at: - -``` -https://localhost:PORT -``` - -(The exact port is printed by `server.js`.) - -Navigate to one of the demo directories under `/demos`. +Open the printed HTTPS URL in your browser and navigate to the demo directories under `/demos`. --- -## Notes on WASM + WebGPU Integration +## Technical Focus -* Particle buffers are **not copied per particle**; a single contiguous buffer is shared. -* The WASM module exposes: +This project is primarily concerned with: - * particle count - * particle pointer - * update function -* JavaScript performs a direct `writeBuffer` call each frame using the mapped WASM memory. -* Rendering uses instanced quads (6 vertices per particle). +* 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 repository is experimental and intended for research and prototyping purposes: - -* APIs may change -* No stability guarantees -* No abstraction layer beyond what is needed for experimentation +This is an experimental research project. +APIs, shaders, and internal structure are subject to change. ---