Updated readme
This commit is contained in:
117
README.md
117
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)
|
### 1. WASM Particle Simulation (WASM → GPU Buffers)
|
||||||
* **Rendering** is performed using WebGPU
|
|
||||||
* **Data exchange** happens via shared linear memory (WASM → JavaScript → 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
|
* WASM renders directly into a CPU-side RGBA framebuffer
|
||||||
* JavaScript maps the WASM memory into a `Float32Array`
|
* The framebuffer is uploaded each frame to a WebGPU texture
|
||||||
* Each frame:
|
* Rendering is displayed using a fullscreen quad
|
||||||
|
* GPU-based post-processing is applied (FXAA, optional TAA)
|
||||||
|
|
||||||
1. WASM updates particle positions (`_update_particles`)
|
**Pipeline:**
|
||||||
2. The particle buffer is uploaded to a WebGPU storage buffer
|
|
||||||
3. A WebGPU render pass draws particles using a WGSL shader
|
|
||||||
|
|
||||||
### Key Technologies
|
```
|
||||||
|
WASM (software renderer)
|
||||||
|
↓
|
||||||
|
RGBA framebuffer (Uint8Array)
|
||||||
|
↓
|
||||||
|
WebGPU texture upload
|
||||||
|
↓
|
||||||
|
Fullscreen quad
|
||||||
|
↓
|
||||||
|
FXAA / TAA shaders
|
||||||
|
```
|
||||||
|
|
||||||
* WebGPU (rendering)
|
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.
|
||||||
* WebAssembly (simulation)
|
|
||||||
* SharedArrayBuffer (when pthreads are enabled)
|
|
||||||
* Custom minimal WebGPU framework
|
|
||||||
* WGSL shaders
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -59,6 +83,8 @@ One example demo is a **particle simulation** where particle positions and attri
|
|||||||
│
|
│
|
||||||
├── shaders/
|
├── shaders/
|
||||||
│ ├── simplePoint.wgsl
|
│ ├── simplePoint.wgsl
|
||||||
|
│ ├── triangle-list-texture-solid.wgsl
|
||||||
|
│ ├── fxaa.wgsl
|
||||||
│ └── taa.wgsl
|
│ └── taa.wgsl
|
||||||
│
|
│
|
||||||
├── textures/
|
├── textures/
|
||||||
@@ -78,20 +104,13 @@ One example demo is a **particle simulation** where particle positions and attri
|
|||||||
## Requirements
|
## Requirements
|
||||||
|
|
||||||
* Chromium-based browser with WebGPU enabled
|
* Chromium-based browser with WebGPU enabled
|
||||||
(Chrome, Chromium, or Edge with `--enable-unsafe-webgpu`)
|
* Node.js for the local server
|
||||||
* Node.js (for the local HTTPS server)
|
* HTTPS (required for WebGPU, SharedArrayBuffer, and WASM pthreads)
|
||||||
* HTTPS is required for:
|
|
||||||
|
|
||||||
* WebGPU
|
|
||||||
* SharedArrayBuffer
|
|
||||||
* WebAssembly pthreads
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
Install dependencies:
|
|
||||||
|
|
||||||
```
|
```
|
||||||
npm install
|
npm install
|
||||||
```
|
```
|
||||||
@@ -100,44 +119,32 @@ npm install
|
|||||||
|
|
||||||
## Running the Demos
|
## Running the Demos
|
||||||
|
|
||||||
Start the local HTTPS server:
|
Start the HTTPS development server:
|
||||||
|
|
||||||
```
|
```
|
||||||
node server.js
|
node server.js
|
||||||
```
|
```
|
||||||
|
|
||||||
Open your browser at:
|
Open the printed HTTPS URL in your browser and navigate to the demo directories under `/demos`.
|
||||||
|
|
||||||
```
|
|
||||||
https://localhost:PORT
|
|
||||||
```
|
|
||||||
|
|
||||||
(The exact port is printed by `server.js`.)
|
|
||||||
|
|
||||||
Navigate to one of 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.
|
This project is primarily concerned with:
|
||||||
* The WASM module exposes:
|
|
||||||
|
|
||||||
* particle count
|
* WASM ↔ JavaScript memory sharing
|
||||||
* particle pointer
|
* CPU → GPU data transfer costs
|
||||||
* update function
|
* WebGPU buffer vs texture upload strategies
|
||||||
* JavaScript performs a direct `writeBuffer` call each frame using the mapped WASM memory.
|
* Hybrid CPU/GPU rendering pipelines
|
||||||
* Rendering uses instanced quads (6 vertices per particle).
|
* GPU-based post-processing of CPU-generated images
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Status
|
## Status
|
||||||
|
|
||||||
This repository is experimental and intended for research and prototyping purposes:
|
This is an experimental research project.
|
||||||
|
APIs, shaders, and internal structure are subject to change.
|
||||||
* APIs may change
|
|
||||||
* No stability guarantees
|
|
||||||
* No abstraction layer beyond what is needed for experimentation
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user