115 lines
3.0 KiB
Markdown
115 lines
3.0 KiB
Markdown
|
# 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.
|