WebGpu-Wasm-Raytracing-And-Particles/README.md

# 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