WGSL-Plus

A lightweight WGSL compiler with support for file linking, preprocessing, and multiple output formats for WebGPU shaders.

Get Started View on GitHub
WGSL-Plus flow diagram showing connections between WGSL, TypeScript, JavaScript, and WebGPU

Features

📂

File Linking

Include other WGSL files in your shaders for better organization and reusability.

⚙️

Preprocessing

C-like preprocessor with macros and conditional compilation for flexible shader variants.

📤

Multi-Format Output

Build to WGSL, JavaScript, or TypeScript files from a single source.

🔧

Code Optimization

Built-in obfuscator, minifier, and prettifier to adapt your code for any environment.

📦

Export Options

Choose between ESM (export) or CommonJS (module.exports) for JS/TS outputs.

🛡️

Error Handling

File validation and format checking to catch issues early.

Installation

Install globally for easy access:

npm install -g wgsl-plus

Or use npx for one-off runs:

npx wgsl-plus [options] <input files>

Basic Usage

Command Syntax

wgsl-plus <inputFiles...> -o <outputFile> [--export-type <type>]

Examples

wgsl-plus input.wgsl -o output.wgsl
wgsl-plus a.wgsl b.wgsl -o output.js --export-type esm
wgsl-plus main.wgsl -o output.ts
wgsl-plus --help

Preprocessor Directives

WGSL-Plus supports both standard C-like preprocessor directives and custom WGSL-specific directives.

File Inclusion

// Include another WGSL file // relative to the current file #include "utils.wgsl"

Macro Definition

// Simple constant macro #define WIDTH 800 #define HEIGHT 600 // Function-like macro #define MAX(a, b) ((a) > (b) ? (a) : (b)) // Undefine a macro #undef WIDTH

Conditional Compilation

#ifdef ENABLE_SHADOWS // Code included when ENABLE_SHADOWS is defined #endif #ifndef MOBILE_DEVICE // Code included when MOBILE_DEVICE is not defined #endif #if VERSION == 2 // Code for version 2 #elif VERSION == 1 // Code for version 1 #else // Code for other versions #endif

Shader Configuration

// Specify binding names // (mappings given after obfuscation) #binding "data" #binding "canvas_size" // Specify entry points // (preserved during obfuscation) #entrypoint "vertex_main" #entrypoint "fragment_main"