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.
|