Home - wgsl-tooling-wg/wesl-spec GitHub Wiki

WESL: Community Extended WGSL

WESL is an extended version of WebGPU's WGSL shading language.


WESL is fully compatible. Everything you know from WGSL just works.

WESL adds features:

  • imports to split shaders into modular, reusable files
  • conditional compiliation to configure shader variations at compile time or run time
  • shader libraries on npm and cargo, for community sharing of shader code modules

Linkers combine WESL and WGSL modules together for WebGPU.

WESL linkers are available now in both Rust and TypeScript. Use them at runtime or at build time.

WESL Example

import package::colors::chartreuse;    // 1. modularize shaders in separate files
import random_wgsl::pcg_2u_3f;         // 2. use shader libraries from npm/cargo

fn random_color(uv: vec2u) -> vec3f {
  var color = pcg_2u_3f(uv);

  @if(DEBUG) color = chartreuse;       // 3. set conditions at runtime or build time

  return color;
}

Who Can Use WESL?

WESL is designed for anyone writing shaders in WebGPU. It's simple to use in even tiny projects, language and framework agnostic.

WESL is also flexible enough support the needs of more complex frameworks as well including Bevy, TypeGPU, and @timefold/webgpu.

Tooling

A suite of convenience tools is on the way, including:

  • Bundler Plugins for use with vite, rollup, webpack and other JavaScript/TypeScript bundlers.
  • ✓ npm/cargo Library Packaging Tools for npm (wesl-packager) and crates.io (wesl-cli).
  • a Language Server for editor integration (wgsl-analyzer).
  • a Syntax Highlighter for display of code on the web (tree-sitter-wesl).
  • a Documentation Generator for making web documentation from shader code (wesl_docs).

Getting Started

Check out the Getting Started page for installation instructions. It's very easy! Rust projects can use the wesl crate. JavaScript/TypeScript projects can use the wesl package and bundler plugins.

Visit the Code Examples for demos of WESL usage.

Try compiling WESL online in the WESL Playground.

For a more detailed explanation of the various extensions, visit the Specification.

See also recent Presentations.

What's Next for WESL?

You tell us! reflection, generics, swizzles, something else?

Future features are nominated by the community. Use [github issues to describe 'use case' challenges in current WGSL/WESL that we might fix. Or if you see an 'enhancement' idea that you could use, please comment on that issue.

The current tools also support some experimental features that we haven't yet tried to firm up for specification, including: virtual modules for custom code generation, constant injection for defining shader constants in rust or typescript, @else conditions, WESL plugin extensions, and more. See the documentation on individual tools in Rust and JavaScript/TypeScript for details.

Questions, Remarks, Complaints

WESL is still in the early stages of specification and development, so expect frequent updates. We welcome any feedback! The best way to reach us is by opening a GitHub Issue.

Join our Discord Server to get involved or stay up to date with WESL's development. We are always open to new contributors.

⚠️ **GitHub.com Fallback** ⚠️