WebGPU Example Pipeline 1 and Pipeline 2 Minimum working example Uses instancing to offet size and color let canvas document createElement canvas document body appendChild canvas canvas width canvas height 400 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 context getPreferredFormat adapter no longer supported const presentationFormat navigator gpu getPreferredCanvasFormat console log presentationFormat context configure device device format presentationFormat size presentationSize pipeline 1 var triangleVertWGSL 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 redFragWGSL fragment fn main location 0 vec4 f32 return vec4 f32 1 0 0 0 1 0 1 0 const pipeline1 device createRenderPipeline layout auto vertex module device createShaderModule code triangleVertWGSL entryPoint main fragment module device createShaderModule code redFragWGSL entryPoint main targets format presentationFormat primitive topology triangle strip stripIndexFormat uint32 pipeline 2 var triangleVertWGSL2 struct vout builtin position pos vec4 f32 location 0 col vec4 f32 vertex fn main builtin vertex_index VertexIndex u32 builtin instance_index instanceIdx u32 vout var ot vout var d 0 7 let i f32 f32 instanceIdx if i 0 5 d d 1 0 i 0 2 var vpos array vec2 f32 4 vec2 f32 d d vec2 f32 d d vec2 f32 d d vec2 f32 d d ot col vec4 f32 0 0 sin i 0 2 0 0 1 0 ot pos vec4 f32 vpos VertexIndex 0 0 1 0 return ot var redFragWGSL2 fragment fn main location 0 col vec4 f32 location 0 vec4 f32 return col const pipeline2 device createRenderPipeline layout auto vertex module device createShaderModule code triangleVertWGSL2 entryPoint main fragment module device createShaderModule code redFragWGSL2 entryPoint main targets format presentationFormat primitive topology triangle strip stripIndexFormat uint32 const renderPassDescriptor colorAttachments GPURenderPassDescriptor view undefined set later loadValue r 0 0 g 1 0 b 0 0 a 1 0 loadOp clear clearValue 0 1 1 1 clear screen storeOp store let r 0 0 function frame renderPassDescriptor colorAttachments 0 view context getCurrentTexture createView renderPassDescriptor colorAttachments 0 loadValue r r r r 1 0 0 0 r 0 01 renderPassDescriptor colorAttachments 0 clearValue r r r r 1 0 0 0 r 0 01 const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline1 passEncoder draw 4 1 0 0 passEncoder setPipeline pipeline2 passEncoder draw 4 12 0 0 vertexCount instanceCount firstVertex firstInstance passEncoder endPass no longer supported passEncoder end device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame onmousemove function frame console log done
f i 0 5 d d 1 0 i 0 2 var vpos array vec2 f32 4 vec2 f32 d d vec2 f32 d d vec2 f32 d d vec2 f32 d d ot col vec4 f32 0 0 sin i 0 2 0 0 1 0 ot pos vec4 f32 vpos VertexIndex 0 0 1 0 return ot var redFragWGSL2 fragment fn main location 0 col vec4 f32 location 0 vec4 f32 return col const pipeline2 device createRenderPipeline layout auto vertex module device createShaderModule code triangleVertWGSL2 entryPoint main fragment module device createShaderModule code redFragWGSL2 entryPoint main targets format presentationFormat primitive topology triangle strip stripIndexFormat uint32 const renderPassDescriptor colorAttachments GPURenderPassDescriptor view undefined set later loadValue r 0 0 g 1 0 b 0 0 a 1 0 loadOp clear clearValue 0 1 1 1 clear screen storeOp store let r 0 0 function frame renderPassDescriptor colorAttachments 0 view context getCurrentTexture createView renderPassDescriptor colorAttachments 0 loadValue r r r r 1 0 0 0 r 0 01 renderPassDescriptor colorAttachments 0 clearValue r r r r 1 0 0 0 r 0 01 const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline1 passEncoder draw 4 1 0 0 passEncoder setPipeline pipeline2 passEncoder draw 4 12 0 0 vertexCount instanceCount firstVertex firstInstance passEncoder endPass no longer supported passEncoder end device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame onmousemove function frame console log done