# Simplifying WebGPU with This Framework

WebGPU’s native API is complex and verbose. This framework reduces that complexity by providing simple classes and methods to manage shaders, buffers, and execution. Instead of handling low-level GPU commands, you focus on your logic.

## 1. Loading and Using a Shader

**Without Framework:**

```
Manual setup of device, pipeline, bind groups, etc. Very verbose and error-prone
const shaderModule = device.createShaderModule({ code: wgslSource });
const pipeline = device.createComputePipeline({ ... });
// Setup bind groups and command encoder manually
```

**With Framework:**

```
const shader = new Shader( "myComputeShader.wgsl" );

await shader.compile();

shader.setVariable( "someUniform", 42 );

shader.execute( 64 ); // runs compute with 64 workgroups
```

The framework loads, compiles, sets uniforms, and dispatches the compute shader with simple method calls.

## 2. Setting Buffers

**Without Framework:**

```
Create GPU buffer, write data, create bind group manually
```

**With Framework:**

```
const dataBuffer = gpu.createBuffer( new Float32Array([1, 2, 3]) );

shader.setBuffer( "inputBuffer", dataBuffer );
```

Buffers are bound by name with a simple call.

## 3. Rendering to Canvas

**Without Framework:**

```
Create render pipeline, set vertex buffers, encode commands manually
```

**With Framework:**

```
shader.setCanvas( canvasElement );

shader.setAttributes( vertexData );

shader.execute();
```

The framework handles pipeline creation, drawing commands, and presentation automatically.

## 4. Camera and Matrix Utilities

**Example:**

```
const camera = new Camera();

camera.position.set( 0, 1, 5 );

camera.updateViewMatrix();

shader.setVariable( "viewMatrix", camera.viewMatrix );
```

The framework provides built-in classes for common math tasks.

## 5. Event Handling

**Example:**

```
const events = new EventManager( canvasElement );

events.on( "mouseMove", (event) => {
  camera.rotate( event.deltaX, event.deltaY );
  shader.setVariable( "viewMatrix", camera.viewMatrix );
  shader.execute();
});
```

Separates input handling cleanly from GPU logic.

## Summary Table

| Task | WebGPU Native API | This Framework |
| --- | --- | --- |
| Load and compile shader | Many steps, manual setup | One line with `new Shader()` + `compile()` |
| Set uniforms | Define bind groups and layouts | Simple `setVariable()` calls |
| Bind buffers | Manual buffer creation and binding | `setBuffer()` by name |
| Execute compute | Command encoder and dispatch calls | `execute(workgroupCount)` method |
| Render to canvas | Complex pipeline and draw calls | `setCanvas()`, `setAttributes()`, `execute()` |
| Handle math and camera | External libs or manual math | Built-in Matrix4, Camera classes |
| Input handling | Manual event listeners | `EventManager` handles input cleanly |

---

This framework hides the low-level complexity behind a clean, simple API that accelerates WebGPU development and makes GPU programming accessible and maintainable.
