uwal

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, 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	315.55kb	68.97kb
+ 2D Shapes	322.79kb	71.17kb
+ 3D Meshes	324.19kb	71.56kb
+ Lights	326.06kb	71.99kb
+ MSDF Text	326.75kb	72.66kb
Total	339.98kb	75.35kb

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

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

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

  TXT[MSDFText]    --> APP
  LGHT[Lights]     --> APP
  COL[Color]       --> APP
  SHDS[Shaders]    --> APP
  MATH[MathUtils]  --> APP
  CONST[Constants] --> 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
• Techniques
  • 3D
    • Environment maps
    • SkyBox

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.

This site is open source. Improve this page.