WGSL vs GLSL

Coming from WebGL, most types map one to one:

GLSL ES 3.00 types and their WGSL counterparts
GLSL ES 3.00	WGSL	Note
float, int, uint, bool	f32, i32, u32, bool	Always 32-bit in WGSL
mediump float	f16	A real type, needs shader-f16
vec3, ivec2, uvec4, bvec2	vec3f, vec2i, vec4u, vec2<bool>
mat4, mat3x2	mat4x4f, mat3x2f	Both column-major, columns first
float a[4]	array<f32, 4>	Runtime-sized arrays in storage only
uniform block (std140)	var<uniform>	Layout per Arrays and Alignment
in / out variables	struct members with @location	Entry Points
sampler2D	texture_2d<f32> plus sampler	Separate objects, Textures and Samplers

GLSL ES was already strict about conversions (float x = 1; fails there too); Migrating GLSL Shaders to WGSL ports whole shaders.

GLSL ES 3.00 types and their WGSL counterparts, laid out as a WebGPU-drawn mapping tableHTMLLive

<!doctype html>
<style>
  body { margin: 0; background: #f7f4ee; font: 14px system-ui, sans-serif; }
  .stage { position: relative; width: 100%; max-width: 600px; }
  .stage canvas { display: block; width: 100%; }
  .stage canvas + canvas { position: absolute; inset: 0; pointer-events: none; }
</style>
<div class="stage">
  <canvas id="view" width="600" height="390"></canvas>
  <canvas id="labels" width="600" height="390"></canvas>
</div>
<script>
const canvas = document.getElementById('view');
const ink = document.getElementById('labels').getContext('2d');

function showMessage(text) {                     // 2D fallback when WebGPU is missing
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = '#fbeaea'; ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#8a2b2b'; ctx.font = '18px system-ui, sans-serif'; ctx.textAlign = 'center';
  ctx.fillText(text, canvas.width / 2, canvas.height / 2);
}
function label(text, x, y, size = 12, color = '#2b2b2b', font = 'ui-monospace, monospace', align = 'left') {
  ink.font = `${size}px ${font}`; ink.fillStyle = color; ink.textAlign = align; ink.fillText(text, x, y);
}

const rows = [['float, int, uint, bool', 'f32, i32, u32, bool', 'always 32-bit'],
  ['mediump float', 'f16', 'a real type: shader-f16'],
  ['vec3, ivec2, uvec4', 'vec3f, vec2i, vec4u', ''],
  ['bvec2', 'vec2<bool>', ''],
  ['mat4, mat3x2', 'mat4x4f, mat3x2f', 'both column-major'],
  ['float a[4]', 'array<f32, 4>', 'runtime-sized: storage only'],
  ['uniform block (std140)', 'var<uniform>', 'WGSL layout rules'],
  ['in / out variables', '@location struct members', ''],
  ['sampler2D', 'texture_2d<f32> + sampler', 'separate objects']];

async function main() {
  const adapter = await navigator.gpu?.requestAdapter();
  if (!adapter) return showMessage('WebGPU is not available in this browser');
  const device = await adapter.requestDevice();
  const context = canvas.getContext('webgpu');
  const format = navigator.gpu.getPreferredCanvasFormat();
  context.configure({ device, format });

  const boxes = [[10, 10, 190, 30, 0.35, 0.35, 0.60, 8], [230, 10, 200, 30, 0.08, 0.40, 0.75, 8]];
  label('GLSL ES 3.00', 105, 30, 13, '#fff', 'system-ui, sans-serif', 'center');
  label('WGSL', 330, 30, 13, '#fff', 'system-ui, sans-serif', 'center');
  label('note', 440, 30, 12, '#666', 'system-ui, sans-serif');
  rows.forEach(([glsl, wgsl, note], i) => {
    const y = 48 + i * 37;
    boxes.push([10, y, 190, 30, 0.90, 0.89, 0.95, 7], [230, y, 200, 30, 0.86, 0.92, 0.99, 7]);
    boxes.push([203, y + 14, 20, 2, 0.45, 0.45, 0.45, 1]);                    // arrow shaft
    for (let k = 0; k < 5; k++) boxes.push([220 + k, y + 10 + k, 2, 10 - 2 * k, 0.45, 0.45, 0.45, 0]);
    label(glsl, 18, y + 20, 12, '#2d2d55');
    label(wgsl, 238, y + 20, 12, '#123a7a');
    label(note, 440, y + 20, 11.5, '#555', 'system-ui, sans-serif');
  });
  label('GLSL ES was already strict: float x = 1; fails there too. WGSL converts nothing implicitly.', 12, 382, 11.5, '#444', 'system-ui, sans-serif');

  const module = device.createShaderModule({ code: `
    struct Box { rect: vec4f, style: vec4f }          // style: r, g, b, corner radius
    @group(0) @binding(0) var<storage> boxes: array<Box>;
    struct Out { @builtin(position) pos: vec4f, @location(0) local: vec2f,
                 @location(1) @interpolate(flat) i: u32 }
    @vertex fn vs(@builtin(vertex_index) v: u32, @builtin(instance_index) i: u32) -> Out {
      let corner = vec2f(f32(v & 1), f32(v >> 1));   // triangle-strip corners
      let r = boxes[i].rect;
      let px = r.xy + corner * r.zw;
      return Out(vec4f(px.x / 300 - 1, 1 - px.y / 195, 0, 1), corner * r.zw, i);
    }
    @fragment fn fs(in: Out) -> @location(0) vec4f {
      let b = boxes[in.i];
      let half = b.rect.zw / 2;
      let q = abs(in.local - half) - half + b.style.w; // signed distance to a rounded box
      let d = length(max(q, vec2f(0))) + min(max(q.x, q.y), 0) - b.style.w;
      let a = clamp(0.5 - d, 0, 1);
      return vec4f(b.style.rgb * a, a);               // premultiplied alpha
    }` });
  const blend = { srcFactor: 'one', dstFactor: 'one-minus-src-alpha' };
  const pipeline = device.createRenderPipeline({ layout: 'auto',
    vertex: { module }, primitive: { topology: 'triangle-strip' },
    fragment: { module, targets: [{ format, blend: { color: blend, alpha: blend } }] } });
  const data = new Float32Array(boxes.flat());
  const buffer = device.createBuffer({ size: data.byteLength, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
  device.queue.writeBuffer(buffer, 0, data);
  const group = device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: [{ binding: 0, resource: { buffer } }] });

  const encoder = device.createCommandEncoder();
  const pass = encoder.beginRenderPass({ colorAttachments: [{ view: context.getCurrentTexture().createView(),
    clearValue: [0.97, 0.96, 0.93, 1], loadOp: 'clear', storeOp: 'store' }] });
  pass.setPipeline(pipeline);
  pass.setBindGroup(0, group);
  pass.draw(4, boxes.length);
  pass.end();
  device.queue.submit([encoder.finish()]);
}
main();
</script>

MENU