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. As a guide, below are the module sizes split by common usage purposes. For example, a fragment shader animation or a path tracer may need only Device & Shaders modules, which will also include Render and Compute pipelines, while a particle animation can leverage the Shape class, that also provides instancing. On the other hand, a 3D application will most likely use the Mesh class, its primitives, and lights, while the MSDFText class can be included to print strings to a render target to apply further text manipulations.

Module	Minified	Gzipped
Device & Shaders	261.31kb	55.56kb
+ 2D Shapes	268.42kb	58.12kb
+ 3D Meshes	269.93kb	58.51kb
+ Lights	273.23kb	59.45kb
+ MSDF Text	281.66kb	62.19kb
+ TextureUtils	327.94kb	72.51kb
Total	355.90kb	79.70kb

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
  Color    --> APP
  MSDFText --> 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

  TextureUtils --> APP
  MathUtils    --> APP
  Shaders      --> APP
  Constants    --> 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.