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 most use cases.

Examples   Docs   Wiki   NPM

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, feel free to check out the Wiki page for some simple examples using the latest versions.

Installation

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

Weight

Given that WebGPU APIs are quite verbose and the UWAL library is fairly modular, with tree shaking applied in a build step, the bundle size may vary considerably. For example, a fragment shader animation or a path tracer may require only a render and a compute pipeline from the uwal/core module, starting at about 52 kb gzipped. When color, texture, and math utilities are added on top of that, the initial bundle size grows to around 68 kb gzipped. As a guide, below are the modules provided by the library and their sizes, but, just like with the example above, only some parts of them might actually be required.

Module	Minified	Gzipped
uwal/core	244.86 kb	58.75 kb
uwal/utils	57.01 kb	15.82 kb
uwal/materials	58.73 kb	12.99 kb
uwal/shaders	36.25 kb	4.08 kb
uwal/lights	40.50 kb	10.31 kb
uwal/text	55.40 kb	15.53 kb
uwal	311.70 kb	70.02 kb

Diagram

flowchart TD
  GPU[WebGPU APIs]
  P[Pipeline]
  CP[Compute Pipeline]
  RP[Render Pipeline]
  S[Stage]
  C[Computation]
  R[Renderer]
  MAT[Materials]
  APP[Your Appliation]
  DEV[Device]

  GPU  --> DEV
  DEV  --> APP
  GPU  --> P
  GPU  --> S
  P    --> CP
  P    --> RP
  CP   --> C
  S    --> C
  S    --> R
  RP   --> R
  RP   --> MAT
  CP   --> APP
  C    --> APP
  R    --> APP
  MAT  --> APP
  RP   --> APP

  Lights    --> APP
  Skybox    --> APP
  Shaders   --> APP
  Constants --> APP

  ND2[Node2D]
  GEO[Geometries]
  ND[Node]
  CAM[Cameras]
  SHP[Shape]
  MESH[Mesh]
  SCN[Scene]

  ND2  --> APP
  ND2  --> SHP
  ND2  --> CAM
  GEO  --> SHP
  GEO  --> MESH
  ND   --> CAM
  ND   --> MESH
  SHP  --> APP
  SHP  --> SCN
  CAM  --> APP
  CAM  --> SCN
  MESH --> SCN
  SCN  --> APP
  MESH --> APP
  ND   --> APP

  Color     --> APP
  Texture   --> APP
  MathUtils --> APP
  MSDFText  --> APP

Loading

Examples

Basic Program	Ripple Effect
WebGPU Smallpt	Pong Game

Fundamentals

• 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
  • Immediates
  • Constants
  • Miscellaneous Shader Input
  • Transparency and Blending
  • Blend Settings
  • Bind Group Layouts
  • Timing Performance
  • Compatibility Mode
• 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
• Techniques
  • 3D
    • Environment maps
    • SkyBox
  • Post Processing
    • Basic CRT Effect

Acknowledgements

• Inspired by the philosophy of the great ogl library.
• Born from the incredible lessons of WebGPU Fundamentals.
• Built upon the awesomeness of wgpu-matrix and wgsl_reflect.
• Leveraging a fantastic primitive-geometry NPM package.