s",1] 9:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"WGSL101"}],["$","meta","3",{"name":"description","content":"WebGPU Shading Language 101"}],["$","link","4",{"rel":"icon","href":"/favicon.ico","type":"image/x-icon","sizes":"16x16"}],["$","meta","5",{"name":"next-size-adjust"}]] 4:null 14:T6a3,// WebGPU Shader Language (WGSL) 404 example @binding(0) @group(0) var frame : u32; struct VertexOutput { @builtin(position) position: vec4, @location(0) uv: vec2, }; @vertex fn vtx_main(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput { // return the whole screen as two triangles var pos = array,6 >( // triangle bottom vec2(-1.0, -1.0), vec2(1.0, -1.0), vec2(1.0, 1.0), // triangle top vec2(1.0, 1.0), vec2(-1.0, 1.0), vec2(-1.0, -1.0) ); let position = vec4f(pos[vertexIndex], 0.0, 1.0); let uv = vec2(position.x * 1.0, position.y * -1.0); return VertexOutput( position, uv ); } @group(1) @binding(0) var texSampler: sampler; @group(1) @binding(1) var tex: texture_2d; @fragment fn frag_main(fsInput: VertexOutput) -> @location(0) vec4f { var col: vec3 = vec3(1.0); // the dvd moving logo example but with a basic circle instead moving around the screen and bouncing off the edges let xsize = 0.15; let ysize = 0.15; let xtime = 9.; let ytime = 16.; let globaltime = 0.00004; var uv = fsInput.uv; let t = f32(frame); uv.x += (-1. + xsize * 2.) + (abs(fract(t * xtime * globaltime) * 2. - 1.) - 0.) * (1. - (-1. + xsize * 2.)) / (1. - 0.); uv.y += (-1. + ysize * 2.) + (abs(fract(t * ytime * globaltime) * 2. - 1.) - 0.) * (1. - (-1. + ysize * 2.)) / (1. - 0.); let textureColor = textureSample(tex, texSampler, uv * vec2f(3.3)); let x1: f32 = step(abs(uv.x+-0.15),0.15); let y1: f32 = step(abs(uv.y+-0.15),0.15); let xy1 = x1 * y1; let xy2 = xy

WGSL 101