GPU.DECK · WebGPU 學院

GPU.DECK · PLAYGROUND ── shader.wgsl ── unsaved

● WebGPU live● autosave oncmd+enter run

▸ explorer

~/snippets

◆plasma.wgsl●

◆rings.wgsl

◆voronoi.wgsl

◆fbm.wgsl

◆sdf_circle.wgsl

◆kaleidoscope.wgsl

◆starfield.wgsl

~/examples

▸ch03_uniforms

▸ch04_buffers

▸ch07_compute

// 鍵盤捷徑
cmd+enter · run
cmd+s · save snippet
cmd+k · toggle ai 助手

◆ plasma.wgsl●×
◆ rings.wgsl×
+ 新分頁

shader.wgslcmd+s · live reload
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// Plasma — modify any line, output updates live.
struct U { time: f32, _p: f32, res: vec2f };
@group(0) @binding(0) var<uniform> u: U;

@vertex
fn vs(@builtin(vertex_index) i: u32)
    -> @builtin(position) vec4f {
  let p = array(vec2f(-1.,-1.), vec2f(3.,-1.), vec2f(-1.,3.));
  return vec4f(p[i], 0., 1.);
}

@fragment
fn fs(@builtin(position) f: vec4f) -> @location(0) vec4f {
  let uv = (f.xy / u.res - vec2f(0.5)) * vec2f(u.res.x/u.res.y, 1.);
  let t = u.time * 0.5;
  let v =
      sin(uv.x * 8. + t) +
      sin(uv.y * 8. + t * 1.3) +
      sin((uv.x + uv.y) * 6. + t * 0.7) +
      sin(length(uv) * 12. - t * 2.);
  let c = vec3f(
    0.5 + 0.5 * sin(v + 0.0),
    0.5 + 0.5 * sin(v + 2.1),
    0.5 + 0.5 * sin(v + 4.2),
  );
  return vec4f(c, 1.0);
}
✓ compiled · 0 errors · pipeline ready
⌬ output buffer
— fps
init…

⌬ inspector

GPU
discrete
BACKEND
metal
FORMAT
bgra8unorm-srgb
RES
1280×900
DRAW CALLS
1
VERTICES
3
GPU TIME
1.8ms
CPU TIME
0.4ms

▸ uniforms

time
4.218

res.x
1280

res.y
900

▸ console

0.0s✓ navigator.gpu OK · adapter acquired

0.1s✓ device requested · features: timestamp-query

0.1s✓ canvas context · format bgra8unorm-srgb

0.2s▸ compile shader.wgsl · 28 lines · 0 errors

0.2s▸ pipeline created · vertex(vs) frag(fs)

0.3s◌ uniform buffer · 16 bytes · time + res

0.3s▸ frame 1 · gpu 1.8ms · cpu 0.4ms

now ▸ rendering @ 60fps · 1280×900

$

✦ AI 助手 · cmd+k

解釋這段加上滑鼠座標優化效能加雜訊

● compiled · 0 errors · 0 warningsUTF-8 · LF · WGSLline 14, col 22
● 60 FPS↳ shareable: gpu.deck/p/3f8a2c