Game Development 35 min read

Introducing Web High-Level Shading Language (WHLSL): Design, Safety, and Compatibility

The article presents WHLSL, a new Web‑compatible high‑level shading language inspired by HLSL, detailing its safety‑first design, language requirements, syntax features, standard‑library concepts, compilation stages, and how it maps to Metal, Direct3D 12, and SPIR‑V for modern WebGPU applications.

UC Tech Team
UC Tech Team
UC Tech Team
Introducing Web High-Level Shading Language (WHLSL): Design, Safety, and Compatibility

WHLSL (pronounced “whistle”) is a Web‑focused high‑level shading language created by the W3C WebGPU community group. It draws heavily from HLSL, extending it with safety guarantees, explicit language specifications, and a compact, readable syntax suitable for both GPU and CPU programmers.

Language requirements include safety (no arbitrary memory access), a well‑defined grammar, clear compilation targets (Metal Shading Language, HLSL/DXIL, SPIR‑V), efficiency, evolution with the WebGPU API, and human‑readability.

Key language features :

Primitive types: bool, int, uint, float, half, plus char/uchar/short/ushort.

No implicit C‑style conversions; literals adapt to the required type.

Vectors (e.g., float4 ) and matrices (e.g., float3x4 ) with simple standard library.

Enums, structs, and arrays with zero‑initialization and explicit length.

Safe pointers and array references tied to address spaces (device, constant, thread‑group, thread).

Two‑stage compilation: a heavy first pass followed by a specialization‑constant pass.

Operator overloading, getters, setters, and “anders” for efficient property access.

Example vertex shader (unchanged WHLSL) :

VSParticleDrawOut output;
output.pos = g_bufPosVelo[input.id].pos.xyz;
float mag = g_bufPosVelo[input.id].velo.w / 9;
output.color = lerp(float4(1.0f, 0.1f, 0.1f, 1.0f), input.color, mag);
return output;

Corresponding pixel shader :

float intensity = 0.5f - length(float2(0.5f, 0.5f) - input.tex);
intensity = clamp(intensity, 0.0f, 0.5f) * 2.0f;
return float4(input.color.xyz, intensity);

Other snippets illustrate enums, structs, arrays, safe pointers, and function definitions, e.g.:

enum Weekday { Monday, Tuesday, Wednesday, Thursday, PizzaDay };
struct Foo { int x; float y; };
int[3] x;
thread int* foo() { int a; return &a; }
float4 lit(float n_dot_l, float n_dot_h, float m) { float ambient = 1; float diffuse = max(0, n_dot_l); float specular = n_dot_l < 0 || n_dot_h < 0 ? 0 : n_dot_h * m; return float4(ambient, diffuse, specular, 1); }

WHLSL enforces bounds checking on arrays/pointers via trapping or clamping, with performance experiments showing no clear winner, so compilers may choose per‑device.

Shader inputs/outputs are expressed as function parameters and return values, with semantics (built‑in, specialization constants, stage I/O, resource bindings) mirroring HLSL but adapted for WebGPU’s two‑level bind‑group model.

The language is still early‑stage, and the community invites feedback, proposals, and contributions via the WebGPU GitHub repository.

GraphicsGPUWebGPUHLSLshading languageWHLSL
UC Tech Team
Written by

UC Tech Team

We provide high-quality technical articles on client, server, algorithms, testing, data, front-end, and more, including both original and translated content.

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.