WebGPU-Framework/Demos/TextureArray/webgpu_framework.md

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.