154 lines
3.2 KiB
Markdown
154 lines
3.2 KiB
Markdown
|
|
|
|
# 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
|