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 1 1 const presentationSize canvas clientWidth devicePixelRatio canvas clientHeight devicePixelRatio const presentationFormat navigator gpu getPreferredCanvasFormat old way navigator gpu getPreferredCanvasFormat context getPreferredFormat adapter no longer supported console log presentationFormat context configure device device format presentationFormat size presentationSize var vertWGSL 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 fragment fn main location 0 vec4 f32 return vec4 f32 1 0 0 0 1 0 1 0 const pipeline device createRenderPipeline layout auto 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 loadOp clear clearValue r 0 0 g 1 0 b 0 0 a 1 0 loadOp clear storeOp store function frame renderPassDescriptor colorAttachments 0 view context getCurrentTexture createView renderPassDescriptor colorAttachments 0 loadOp clear clearValue r 1 0 const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 4 1 0 0 passEncoder end 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 1 const presentationSize canvas clientWidth devicePixelRatio canvas clientHeight devicePixelRatio const presentationFormat navigator gpu getPreferredCanvasFormat console log presentationFormat context configure device device format presentationFormat size presentationSize var vertWGSL 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 fragment fn main location 0 vec4 f32 return vec4 f32 1 0 0 0 1 0 1 0 const pipeline device createRenderPipeline layout auto 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 loadOp clear clearValue r 0 0 g 1 0 b 0 0 a 1 0 loadOp clear storeOp store function frame renderPassDescriptor colorAttachments 0 view context getCurrentTexture createView renderPassDescriptor colorAttachments 0 loadOp clear clearValue r 1 0 const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 4 1 0 0 passEncoder end 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 1 const presentationSize canvas clientWidth devicePixelRatio canvas clientHeight devicePixelRatio const presentationFormat navigator gpu getPreferredCanvasFormat console log presentationFormat context configure device device format presentationFormat size presentationSize var vertWGSL 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 fragment fn main location 0 vec4 f32 return vec4 f32 1 0 0 0 1 0 1 0 const pipeline device createRenderPipeline layout auto 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 loadOp clear clearValue r 0 0 g 1 0 b 0 0 a 1 0 loadOp clear storeOp store function frame renderPassDescriptor colorAttachments 0 view context getCurrentTexture createView renderPassDescriptor colorAttachments 0 loadOp clear clearValue r 1 0 const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 4 1 0 0 passEncoder end 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 1 1 const presentationSize canvas clientWidth devicePixelRatio canvas clientHeight devicePixelRatio const presentationFormat navigator gpu getPreferredCanvasFormat console log presentationFormat context configure device device format presentationFormat size presentationSize var vertWGSL 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 fragment fn main location 0 vec4 f32 return vec4 f32 1 0 0 0 1 0 1 0 const pipeline device createRenderPipeline layout auto 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 loadOp clear clearValue r 0 0 g 1 0 b 0 0 a 1 0 loadOp clear storeOp store function frame renderPassDescriptor colorAttachments 0 view context getCurrentTexture createView renderPassDescriptor colorAttachments 0 loadOp clear clearValue r 1 0 const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 4 1 0 0 passEncoder end 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 1 1 const presentationSize canvas clientWidth devicePixelRatio canvas clientHeight devicePixelRatio const presentationFormat navigator gpu getPreferredCanvasFormat console log presentationFormat context configure device device format presentationFormat size presentationSize var vertWGSL 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 fragment fn main location 0 vec4 f32 return vec4 f32 1 0 0 0 1 0 1 0 const pipeline device createRenderPipeline layout auto 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 loadOp clear clearValue r 0 0 g 1 0 b 0 0 a 1 0 loadOp clear storeOp store function frame renderPassDescriptor colorAttachments 0 view context getCurrentTexture createView renderPassDescriptor colorAttachments 0 loadOp clear clearValue r 1 0 const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 3 1 0 0 passEncoder end 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 1 1 const presentationSize canvas clientWidth devicePixelRatio canvas clientHeight devicePixelRatio const presentationFormat navigator gpu getPreferredCanvasFormat context getPreferredFormat adapter no longer supported 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 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 fragment fn main location 0 inColor vec3 f32 location 0 vec4 f32 return vec4 f32 inColor 1 0 const pipeline device createRenderPipeline layout auto 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 loadOp clear clearValue 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 clearValue r 1 0 const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 3 1 0 0 passEncoder end 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 1 1 const presentationSize canvas clientWidth devicePixelRatio canvas clientHeight devicePixelRatio const presentationFormat navigator gpu getPreferredCanvasFormat context getPreferredFormat adapter no longer supported 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 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 fragment fn main location 0 inColor vec3 f32 location 0 vec4 f32 return vec4 f32 inColor 1 0 const pipeline device createRenderPipeline layout auto 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 loadOp clear clearValue 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 clearValue r 1 0 const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 36 1 0 0 passEncoder end device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame
loadOp clear clearValue r 0 0 g 1 0 b 0 0 a 1 0 loadOp clear storeOp store function frame renderPassDescriptor colorAttachments 0 view context getCurrentTexture createView renderPassDescriptor colorAttachments 0 loadOp clear clearValue r 1 0 const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 4 1 0 0 passEncoder end 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 1 1 const presentationSize canvas clientWidth devicePixelRatio canvas clientHeight devicePixelRatio const presentationFormat navigator gpu getPreferredCanvasFormat console log presentationFormat context configure device device format presentationFormat size presentationSize var vertWGSL 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 fragment fn main location 0 vec4 f32 return vec4 f32 1 0 0 0 1 0 1 0 const pipeline device createRenderPipeline layout auto 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 loadOp clear clearValue r 0 0 g 1 0 b 0 0 a 1 0 loadOp clear storeOp store function frame renderPassDescriptor colorAttachments 0 view context getCurrentTexture createView renderPassDescriptor colorAttachments 0 loadOp clear clearValue r 1 0 const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 3 1 0 0 passEncoder end 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 1 1 const presentationSize canvas clientWidth devicePixelRatio canvas clientHeight devicePixelRatio const presentationFormat navigator gpu getPreferredCanvasFormat context getPreferredFormat adapter no longer supported 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 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 fragment fn main location 0 inColor vec3 f32 location 0 vec4 f32 return vec4 f32 inColor 1 0 const pipeline device createRenderPipeline layout auto 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 loadOp clear clearValue 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 clearValue r 1 0 const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 3 1 0 0 passEncoder end 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 1 1 const presentationSize canvas clientWidth devicePixelRatio canvas clientHeight devicePixelRatio const presentationFormat navigator gpu getPreferredCanvasFormat context getPreferredFormat adapter no longer supported 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 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 fragment fn main location 0 inColor vec3 f32 location 0 vec4 f32 return vec4 f32 inColor 1 0 const pipeline device createRenderPipeline layout auto 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 loadOp clear clearValue 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 clearValue r 1 0 const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 36 1 0 0 passEncoder end device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame