UWAL

The goal of UWAL is to remove as much boilerplate as possible when working with the WebGPU APIs, while still providing a flexible interface with reasonable defaults for all configuration options.

Introduction

• UWAL is very minimal, under development and in early beta stage, so expect breaking changes in the future.
• There are no plans to implement any WebGL fallback, so keep an eye on browsers that support WebGPU APIs.
• It is aimed at developers who like minimal layers of abstraction and are interested in writing their own shaders.
• To get started with UWAL, feel free to check out the Wiki page for some simple examples using version 0.2.x.

Installation

npm i uwal
# or
yarn add uwal
# or
pnpm add uwal
# or
bun add uwal

Diagram

flowchart TD
  GPU[WebGPU APIs]
  DEV[Device]
  APP[Your Appliation]

  BP[Base Pipeline]
  CP[Compute Pipeline]
  RP[Render Pipeline]
  BS[Base Stage]
  COMP[Computation]
  RNDR[Renderer]
  TEX[Texture]

  GPU  --> DEV
  DEV  --> BS
  DEV  --> TEX
  BS   --> COMP
  BS   --> RNDR
  COMP --> CP
  COMP --> APP
  BP   --> CP
  BP   --> RP
  CP   --> APP
  RP   --> APP
  RNDR --> RP
  RNDR --> APP

  TIME[GPUTiming] --> APP
  MATH[MathUtils] --> APP

  ND2[Node2D]
  GEO[Geometries]
  ND[Node]
  MAT[Materials]
  SHDS[Shaders]
  CAM[Camera]
  SHP[Shape]
  MESH[Mesh]
  SCN[Scene]
  TXT[MSDFText]

  CONST[Constants] --> APP
  COL[Color]       --> APP

  ND2  --> APP
  ND2  --> SCN
  ND2  --> CAM
  ND2  --> SHP
  MAT  --> SHP
  GEO  --> APP
  GEO  --> SHP
  GEO  --> MESH
  MAT  --> MESH
  ND   --> CAM
  ND   --> MESH
  ND   --> SCN
  ND   --> APP
  SHP  --> SCN
  MESH --> SCN
  CAM  --> APP
  CAM  --> SCN
  SHDS --> MAT
  SHDS --> TXT
  RP   --> APP
  TEX  --> APP
  SCN  --> APP
  SHP  --> APP
  MAT  --> APP
  TXT  --> APP
  SHDS --> APP

Examples

Basic Program	Ripple Effect
WebGPU Smallpt	Pong Game

Lessons

• Basics
  • Fundamentals
  • Inter-stage Variables
  • Uniforms
  • Storage Buffers
  • Vertex Buffers
  • Textures
    • Textures
    • Mipmap Filter
    • Loading Images
    • Generating mipmaps on the GPU
    • Loading Canvas
    • Loading Video
    • Texture Atlases
    • Using Video
    • Using Camera
    • Cubemaps
    • Storage Textures
    • Multisampling
  • Shader Constants
  • Transparency and Blending
  • Blend Settings
  • Bind Group Layouts
  • Timing Performance
  • Compatibility Mode (TBI)
• 3D Math
  • Translation
  • Rotation
  • Scale
  • Matrix Math
  • Adding in Projection
  • Orthographic Projection
  • Perspective Projection
  • Cameras
  • Matrix Stacks
  • Recursive Tree
  • Scene Graphs
  • Making a Hand
• Lighting
  • Directional Lighting
  • Point Lighting
  • Spot Lighting

Acknowledgements

• Inspired by the philosophy of the fantastic ogl library.
• Born from the incredible lessons of WebGPU Fundamentals.
• Built upon the awesomeness of wgpu-matrix and wgsl_reflect.