Simple quad use strict let canvas document createElement canvas document body appendChild canvas canvas width canvas height 200 console log canvas width canvas height const adapter await navigator gpu requestAdapter const device await adapter requestDevice const context canvas getContext webgpu const devicePixelRatio window devicePixelRatio 1 const presentationSize canvas clientWidth devicePixelRatio canvas clientHeight devicePixelRatio const presentationFormat context getPreferredFormat adapter console log presentationFormat context configure device device format presentationFormat size presentationSize var vertWGSL stage vertex fn main builtin vertex index VertexIndex u32 builtin position vec4 f32 var pos array vec2 f32 4 vec2 f32 0 9 0 9 vec2 f32 0 9 0 9 vec2 f32 0 9 0 9 vec2 f32 0 9 0 9 return vec4 f32 pos VertexIndex 0 0 1 0 var fragWGSL stage fragment fn main location 0 vec4 f32 return vec4 f32 1 0 0 0 1 0 1 0 const pipeline device createRenderPipeline vertex module device createShaderModule code vertWGSL entryPoint main fragment module device createShaderModule code fragWGSL entryPoint main targets format presentationFormat primitive topology triangle strip stripIndexFormat uint32 GPURenderPassDescriptor const renderPassDescriptor colorAttachments view undefined asign later in frame loadValue r 0 0 g 1 0 b 0 0 a 1 0 storeOp store function frame renderPassDescriptor colorAttachments 0 view context getCurrentTexture createView renderPassDescriptor colorAttachments 0 loadValue r 1 0 const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 4 1 0 0 passEncoder endPass device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame Point list topology point list use strict let canvas document createElement canvas document body appendChild canvas canvas width canvas height 200 console log canvas width canvas height const adapter await navigator gpu requestAdapter const device await adapter requestDevice const context canvas getContext webgpu const devicePixelRatio window devicePixelRatio 1 const presentationSize canvas clientWidth devicePixelRatio canvas clientHeight devicePixelRatio const presentationFormat context getPreferredFormat adapter console log presentationFormat context configure device device format presentationFormat size presentationSize var vertWGSL stage vertex fn main builtin vertex index VertexIndex u32 builtin position vec4 f32 var pos array vec2 f32 4 vec2 f32 0 9 0 9 vec2 f32 0 9 0 9 vec2 f32 0 9 0 9 vec2 f32 0 9 0 9 return vec4 f32 pos VertexIndex 0 0 1 0 var fragWGSL stage fragment fn main location 0 vec4 f32 return vec4 f32 1 0 0 0 1 0 1 0 const pipeline device createRenderPipeline vertex module device createShaderModule code vertWGSL entryPoint main fragment module device createShaderModule code fragWGSL entryPoint main targets format presentationFormat primitive topology point list stripIndexFormat undefined for point list this must be set to none GPURenderPassDescriptor const renderPassDescriptor colorAttachments view undefined asign later in frame loadValue r 0 0 g 1 0 b 0 0 a 1 0 storeOp store function frame renderPassDescriptor colorAttachments 0 view context getCurrentTexture createView renderPassDescriptor colorAttachments 0 loadValue r 1 0 const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 4 1 0 0 passEncoder endPass device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame Line list topology line list use strict let canvas document createElement canvas document body appendChild canvas canvas width canvas height 200 console log canvas width canvas height const adapter await navigator gpu requestAdapter const device await adapter requestDevice const context canvas getContext webgpu const devicePixelRatio window devicePixelRatio 1 const presentationSize canvas clientWidth devicePixelRatio canvas clientHeight devicePixelRatio const presentationFormat context getPreferredFormat adapter console log presentationFormat context configure device device format presentationFormat size presentationSize var vertWGSL stage vertex fn main builtin vertex index VertexIndex u32 builtin position vec4 f32 var pos array vec2 f32 4 vec2 f32 0 9 0 9 vec2 f32 0 9 0 9 vec2 f32 0 9 0 9 vec2 f32 0 9 0 9 return vec4 f32 pos VertexIndex 0 0 1 0 var fragWGSL stage fragment fn main location 0 vec4 f32 return vec4 f32 1 0 0 0 1 0 1 0 const pipeline device createRenderPipeline vertex module device createShaderModule code vertWGSL entryPoint main fragment module device createShaderModule code fragWGSL entryPoint main targets format presentationFormat primitive topology line list stripIndexFormat undefined GPURenderPassDescriptor const renderPassDescriptor colorAttachments view undefined asign later in frame loadValue r 0 0 g 1 0 b 0 0 a 1 0 storeOp store function frame renderPassDescriptor colorAttachments 0 view context getCurrentTexture createView renderPassDescriptor colorAttachments 0 loadValue r 1 0 const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 4 1 0 0 passEncoder endPass device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame Line strip topology line strip use strict let canvas document createElement canvas document body appendChild canvas canvas width canvas height 200 console log canvas width canvas height const adapter await navigator gpu requestAdapter const device await adapter requestDevice const context canvas getContext webgpu const devicePixelRatio window devicePixelRatio 1 const presentationSize canvas clientWidth devicePixelRatio canvas clientHeight devicePixelRatio const presentationFormat context getPreferredFormat adapter console log presentationFormat context configure device device format presentationFormat size presentationSize var vertWGSL stage vertex fn main builtin vertex index VertexIndex u32 builtin position vec4 f32 var pos array vec2 f32 4 vec2 f32 0 9 0 9 vec2 f32 0 9 0 9 vec2 f32 0 9 0 9 vec2 f32 0 9 0 9 return vec4 f32 pos VertexIndex 0 0 1 0 var fragWGSL stage fragment fn main location 0 vec4 f32 return vec4 f32 1 0 0 0 1 0 1 0 const pipeline device createRenderPipeline vertex module device createShaderModule code vertWGSL entryPoint main fragment module device createShaderModule code fragWGSL entryPoint main targets format presentationFormat primitive topology line strip stripIndexFormat undefined GPURenderPassDescriptor const renderPassDescriptor colorAttachments view undefined asign later in frame loadValue r 0 0 g 1 0 b 0 0 a 1 0 storeOp store function frame renderPassDescriptor colorAttachments 0 view context getCurrentTexture createView renderPassDescriptor colorAttachments 0 loadValue r 1 0 const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 4 1 0 0 passEncoder endPass device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame Triangle list topology triangle list triangle list use strict let canvas document createElement canvas document body appendChild canvas canvas width canvas height 200 console log canvas width canvas height const adapter await navigator gpu requestAdapter const device await adapter requestDevice const context canvas getContext webgpu const devicePixelRatio window devicePixelRatio 1 const presentationSize canvas clientWidth devicePixelRatio canvas clientHeight devicePixelRatio const presentationFormat context getPreferredFormat adapter console log presentationFormat context configure device device format presentationFormat size presentationSize var vertWGSL stage vertex fn main builtin vertex index VertexIndex u32 builtin position vec4 f32 var pos array vec2 f32 3 vec2 f32 0 0 1 0 vec2 f32 1 0 1 0 vec2 f32 1 0 1 0 return vec4 f32 pos VertexIndex 0 0 1 0 var fragWGSL stage fragment fn main location 0 vec4 f32 return vec4 f32 1 0 0 0 1 0 1 0 const pipeline device createRenderPipeline vertex module device createShaderModule code vertWGSL entryPoint main fragment module device createShaderModule code fragWGSL entryPoint main targets format presentationFormat primitive topology triangle list stripIndexFormat undefined GPURenderPassDescriptor const renderPassDescriptor colorAttachments view undefined asign later in frame loadValue r 0 0 g 1 0 b 0 0 a 1 0 storeOp store function frame renderPassDescriptor colorAttachments 0 view context getCurrentTexture createView renderPassDescriptor colorAttachments 0 loadValue r 1 0 const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 3 1 0 0 passEncoder endPass device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame Triangle list topology triangle list triangle list colors use strict let canvas document createElement canvas document body appendChild canvas canvas width canvas height 200 console log canvas width canvas height const adapter await navigator gpu requestAdapter const device await adapter requestDevice const context canvas getContext webgpu const devicePixelRatio window devicePixelRatio 1 const presentationSize canvas clientWidth devicePixelRatio canvas clientHeight devicePixelRatio const presentationFormat context getPreferredFormat adapter console log presentationFormat context configure device device format presentationFormat size presentationSize var vertWGSL struct VSOut builtin position Position vec4 f32 location 0 color vec3 f32 stage vertex fn main builtin vertex index VertexIndex u32 VSOut var pos array vec2 f32 3 vec2 f32 0 0 1 0 vec2 f32 1 0 1 0 vec2 f32 1 0 1 0 var col array vec3 f32 3 vec3 f32 1 0 0 0 0 0 vec3 f32 0 0 1 0 0 0 vec3 f32 0 0 0 0 1 0 var vsOut VSOut vsOut Position vec4 f32 pos VertexIndex 0 0 1 0 vsOut color vec3 f32 col VertexIndex return vsOut var fragWGSL stage fragment fn main location 0 inColor vec3 f32 location 0 vec4 f32 return vec4 f32 inColor 1 0 const pipeline device createRenderPipeline vertex module device createShaderModule code vertWGSL entryPoint main fragment module device createShaderModule code fragWGSL entryPoint main targets format presentationFormat primitive topology triangle list stripIndexFormat undefined GPURenderPassDescriptor const renderPassDescriptor colorAttachments view undefined asign later in frame loadValue r 0 0 g 1 0 b 0 0 a 1 0 storeOp store function frame renderPassDescriptor colorAttachments 0 view context getCurrentTexture createView renderPassDescriptor colorAttachments 0 loadValue r 1 0 const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 3 1 0 0 passEncoder endPass device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame Cube topology triangle list lots of triangle data use strict let canvas document createElement canvas document body appendChild canvas canvas width canvas height 200 console log canvas width canvas height const adapter await navigator gpu requestAdapter const device await adapter requestDevice const context canvas getContext webgpu const devicePixelRatio window devicePixelRatio 1 const presentationSize canvas clientWidth devicePixelRatio canvas clientHeight devicePixelRatio const presentationFormat context getPreferredFormat adapter console log presentationFormat context configure device device format presentationFormat size presentationSize var vertWGSL struct VSOut builtin position Position vec4 f32 location 0 color vec3 f32 stage vertex fn main builtin vertex index VertexIndex u32 VSOut let s 0 5 var vertices array f32 72 s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s var indices array i32 36 0 1 2 0 2 3 4 5 6 4 6 7 8 9 10 8 10 11 12 13 14 12 14 15 16 17 18 16 18 19 20 21 22 20 22 23 let p 1 0 let n 0 1 var colors array f32 72 n p n n p n n p n n p n p p n p p n p p n p p n n n p n n p n n p n n p p n n p n n p n n p n n p p n p p n p p n p p n n p n n p n n p n n p n let indx indices VertexIndex let pos vec3 f32 vertices indx 3 vertices indx 3 1 vertices indx 3 2 let col vec3 f32 colors indx 3 colors indx 3 1 colors indx 3 2 let z pos z 1 0 var vsOut VSOut vsOut Position vec4 f32 pos x z pos y z pos z 1 0 vsOut color vec3 f32 col return vsOut var fragWGSL stage fragment fn main location 0 inColor vec3 f32 location 0 vec4 f32 return vec4 f32 inColor 1 0 const pipeline device createRenderPipeline vertex module device createShaderModule code vertWGSL entryPoint main fragment module device createShaderModule code fragWGSL entryPoint main targets format presentationFormat primitive topology triangle list stripIndexFormat undefined GPURenderPassDescriptor const renderPassDescriptor colorAttachments view undefined asign later in frame loadValue r 0 0 g 0 5 b 0 5 a 1 0 storeOp store function frame renderPassDescriptor colorAttachments 0 view context getCurrentTexture createView renderPassDescriptor colorAttachments 0 loadValue r 1 0 const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 36 1 0 0 passEncoder endPass device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame
oadValue r 0 0 g 1 0 b 0 0 a 1 0 storeOp store function frame renderPassDescriptor colorAttachments 0 view context getCurrentTexture createView renderPassDescriptor colorAttachments 0 loadValue r 1 0 const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 4 1 0 0 passEncoder endPass device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame Triangle list topology triangle list triangle list use strict let canvas document createElement canvas document body appendChild canvas canvas width canvas height 200 console log canvas width canvas height const adapter await navigator gpu requestAdapter const device await adapter requestDevice const context canvas getContext webgpu const devicePixelRatio window devicePixelRatio 1 const presentationSize canvas clientWidth devicePixelRatio canvas clientHeight devicePixelRatio const presentationFormat context getPreferredFormat adapter console log presentationFormat context configure device device format presentationFormat size presentationSize var vertWGSL stage vertex fn main builtin vertex index VertexIndex u32 builtin position vec4 f32 var pos array vec2 f32 3 vec2 f32 0 0 1 0 vec2 f32 1 0 1 0 vec2 f32 1 0 1 0 return vec4 f32 pos VertexIndex 0 0 1 0 var fragWGSL stage fragment fn main location 0 vec4 f32 return vec4 f32 1 0 0 0 1 0 1 0 const pipeline device createRenderPipeline vertex module device createShaderModule code vertWGSL entryPoint main fragment module device createShaderModule code fragWGSL entryPoint main targets format presentationFormat primitive topology triangle list stripIndexFormat undefined GPURenderPassDescriptor const renderPassDescriptor colorAttachments view undefined asign later in frame loadValue r 0 0 g 1 0 b 0 0 a 1 0 storeOp store function frame renderPassDescriptor colorAttachments 0 view context getCurrentTexture createView renderPassDescriptor colorAttachments 0 loadValue r 1 0 const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 3 1 0 0 passEncoder endPass device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame Triangle list topology triangle list triangle list colors use strict let canvas document createElement canvas document body appendChild canvas canvas width canvas height 200 console log canvas width canvas height const adapter await navigator gpu requestAdapter const device await adapter requestDevice const context canvas getContext webgpu const devicePixelRatio window devicePixelRatio 1 const presentationSize canvas clientWidth devicePixelRatio canvas clientHeight devicePixelRatio const presentationFormat context getPreferredFormat adapter console log presentationFormat context configure device device format presentationFormat size presentationSize var vertWGSL struct VSOut builtin position Position vec4 f32 location 0 color vec3 f32 stage vertex fn main builtin vertex index VertexIndex u32 VSOut var pos array vec2 f32 3 vec2 f32 0 0 1 0 vec2 f32 1 0 1 0 vec2 f32 1 0 1 0 var col array vec3 f32 3 vec3 f32 1 0 0 0 0 0 vec3 f32 0 0 1 0 0 0 vec3 f32 0 0 0 0 1 0 var vsOut VSOut vsOut Position vec4 f32 pos VertexIndex 0 0 1 0 vsOut color vec3 f32 col VertexIndex return vsOut var fragWGSL stage fragment fn main location 0 inColor vec3 f32 location 0 vec4 f32 return vec4 f32 inColor 1 0 const pipeline device createRenderPipeline vertex module device createShaderModule code vertWGSL entryPoint main fragment module device createShaderModule code fragWGSL entryPoint main targets format presentationFormat primitive topology triangle list stripIndexFormat undefined GPURenderPassDescriptor const renderPassDescriptor colorAttachments view undefined asign later in frame loadValue r 0 0 g 1 0 b 0 0 a 1 0 storeOp store function frame renderPassDescriptor colorAttachments 0 view context getCurrentTexture createView renderPassDescriptor colorAttachments 0 loadValue r 1 0 const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 3 1 0 0 passEncoder endPass device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame Cube topology triangle list lots of triangle data use strict let canvas document createElement canvas document body appendChild canvas canvas width canvas height 200 console log canvas width canvas height const adapter await navigator gpu requestAdapter const device await adapter requestDevice const context canvas getContext webgpu const devicePixelRatio window devicePixelRatio 1 const presentationSize canvas clientWidth devicePixelRatio canvas clientHeight devicePixelRatio const presentationFormat context getPreferredFormat adapter console log presentationFormat context configure device device format presentationFormat size presentationSize var vertWGSL struct VSOut builtin position Position vec4 f32 location 0 color vec3 f32 stage vertex fn main builtin vertex index VertexIndex u32 VSOut let s 0 5 var vertices array f32 72 s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s var indices array i32 36 0 1 2 0 2 3 4 5 6 4 6 7 8 9 10 8 10 11 12 13 14 12 14 15 16 17 18 16 18 19 20 21 22 20 22 23 let p 1 0 let n 0 1 var colors array f32 72 n p n n p n n p n n p n p p n p p n p p n p p n n n p n n p n n p n n p p n n p n n p n n p n n p p n p p n p p n p p n n p n n p n n p n n p n let indx indices VertexIndex let pos vec3 f32 vertices indx 3 vertices indx 3 1 vertices indx 3 2 let col vec3 f32 colors indx 3 colors indx 3 1 colors indx 3 2 let z pos z 1 0 var vsOut VSOut vsOut Position vec4 f32 pos x z pos y z pos z 1 0 vsOut color vec3 f32 col return vsOut var fragWGSL stage fragment fn main location 0 inColor vec3 f32 location 0 vec4 f32 return vec4 f32 inColor 1 0 const pipeline device createRenderPipeline vertex module device createShaderModule code vertWGSL entryPoint main fragment module device createShaderModule code fragWGSL entryPoint main targets format presentationFormat primitive topology triangle list stripIndexFormat undefined GPURenderPassDescriptor const renderPassDescriptor colorAttachments view undefined asign later in frame loadValue r 0 0 g 0 5 b 0 5 a 1 0 storeOp store function frame renderPassDescriptor colorAttachments 0 view context getCurrentTexture createView renderPassDescriptor colorAttachments 0 loadValue r 1 0 const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 36 1 0 0 passEncoder endPass device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame