WGSL language preview

1. Vertex shader

entry points, attributes, and builtin types

horizon-dark

struct VertexOutput {
  @builtin(position) position: vec4<f32>,
  @location(0) color: vec3<f32>,
}

@vertex
fn vs_main(@location(0) pos: vec2<f32>) -> VertexOutput {
  var out: VertexOutput;
  out.position = vec4<f32>(pos, 0.0, 1.0);
  out.color = vec3<f32>(1.0, 0.5, 0.25);
  return out;
}

atom-one-dark

struct VertexOutput {
  @builtin(position) position: vec4<f32>,
  @location(0) color: vec3<f32>,
}

@vertex
fn vs_main(@location(0) pos: vec2<f32>) -> VertexOutput {
  var out: VertexOutput;
  out.position = vec4<f32>(pos, 0.0, 1.0);
  out.color = vec3<f32>(1.0, 0.5, 0.25);
  return out;
}

github-dark

struct VertexOutput {
  @builtin(position) position: vec4<f32>,
  @location(0) color: vec3<f32>,
}

@vertex
fn vs_main(@location(0) pos: vec2<f32>) -> VertexOutput {
  var out: VertexOutput;
  out.position = vec4<f32>(pos, 0.0, 1.0);
  out.color = vec3<f32>(1.0, 0.5, 0.25);
  return out;
}

dracula

struct VertexOutput {
  @builtin(position) position: vec4<f32>,
  @location(0) color: vec3<f32>,
}

@vertex
fn vs_main(@location(0) pos: vec2<f32>) -> VertexOutput {
  var out: VertexOutput;
  out.position = vec4<f32>(pos, 0.0, 1.0);
  out.color = vec3<f32>(1.0, 0.5, 0.25);
  return out;
}

nord

struct VertexOutput {
  @builtin(position) position: vec4<f32>,
  @location(0) color: vec3<f32>,
}

@vertex
fn vs_main(@location(0) pos: vec2<f32>) -> VertexOutput {
  var out: VertexOutput;
  out.position = vec4<f32>(pos, 0.0, 1.0);
  out.color = vec3<f32>(1.0, 0.5, 0.25);
  return out;
}

github

struct VertexOutput {
  @builtin(position) position: vec4<f32>,
  @location(0) color: vec3<f32>,
}

@vertex
fn vs_main(@location(0) pos: vec2<f32>) -> VertexOutput {
  var out: VertexOutput;
  out.position = vec4<f32>(pos, 0.0, 1.0);
  out.color = vec3<f32>(1.0, 0.5, 0.25);
  return out;
}

2. Compute shader

bindings and workgroups

horizon-dark

@group(0) @binding(0) var<storage, read_write> data: array<f32>;

const stride: u32 = 1u;

@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) id: vec3<u32>) {
  let i = id.x * stride;
  data[i] = data[i] * 2.0;
}

atom-one-dark

@group(0) @binding(0) var<storage, read_write> data: array<f32>;

const stride: u32 = 1u;

@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) id: vec3<u32>) {
  let i = id.x * stride;
  data[i] = data[i] * 2.0;
}

github-dark

@group(0) @binding(0) var<storage, read_write> data: array<f32>;

const stride: u32 = 1u;

@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) id: vec3<u32>) {
  let i = id.x * stride;
  data[i] = data[i] * 2.0;
}

dracula

@group(0) @binding(0) var<storage, read_write> data: array<f32>;

const stride: u32 = 1u;

@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) id: vec3<u32>) {
  let i = id.x * stride;
  data[i] = data[i] * 2.0;
}

nord

@group(0) @binding(0) var<storage, read_write> data: array<f32>;

const stride: u32 = 1u;

@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) id: vec3<u32>) {
  let i = id.x * stride;
  data[i] = data[i] * 2.0;
}

github

@group(0) @binding(0) var<storage, read_write> data: array<f32>;

const stride: u32 = 1u;

@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) id: vec3<u32>) {
  let i = id.x * stride;
  data[i] = data[i] * 2.0;
}

3. Fragment shader

short vector aliases and texture builtins

horizon-dark

@group(0) @binding(0) var t: texture_2d<f32>;
@group(0) @binding(1) var samp: sampler;

@fragment
fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {
  let color = textureSample(t, samp, uv);
  return color * vec4f(1.0, 1.0, 1.0, 1.0);
}

atom-one-dark

@group(0) @binding(0) var t: texture_2d<f32>;
@group(0) @binding(1) var samp: sampler;

@fragment
fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {
  let color = textureSample(t, samp, uv);
  return color * vec4f(1.0, 1.0, 1.0, 1.0);
}

github-dark

@group(0) @binding(0) var t: texture_2d<f32>;
@group(0) @binding(1) var samp: sampler;

@fragment
fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {
  let color = textureSample(t, samp, uv);
  return color * vec4f(1.0, 1.0, 1.0, 1.0);
}

dracula

@group(0) @binding(0) var t: texture_2d<f32>;
@group(0) @binding(1) var samp: sampler;

@fragment
fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {
  let color = textureSample(t, samp, uv);
  return color * vec4f(1.0, 1.0, 1.0, 1.0);
}

nord

@group(0) @binding(0) var t: texture_2d<f32>;
@group(0) @binding(1) var samp: sampler;

@fragment
fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {
  let color = textureSample(t, samp, uv);
  return color * vec4f(1.0, 1.0, 1.0, 1.0);
}

github

@group(0) @binding(0) var t: texture_2d<f32>;
@group(0) @binding(1) var samp: sampler;

@fragment
fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {
  let color = textureSample(t, samp, uv);
  return color * vec4f(1.0, 1.0, 1.0, 1.0);
}