A WebGPU Triangle in under a hundred lines of JS Light is beautiful The simple example tries to show a minium working example of a WebGPU implementation without any libraries or external resources The example draws a single color triangle To space out but not overly make the code unreadable The example lets you see on a single page all of the key components and how they fit together Technically there is only a few method calls to the API but there is a lot of initialization structures for defining the configuration WebGPU Example triangle 77 lines 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 presentationSize canvas clientWidth window devicePixelRatio canvas clientHeight window devicePixelRatio context getPreferredFormat adapter no longer supported const presentationFormat navigator gpu getPreferredCanvasFormat context configure device device format presentationFormat size presentationSize const vertWGSL vertex fn main builtin vertex_index VertexIndex u32 builtin position vec4 f32 var pos array vec2 f32 3 vec2 f32 0 0 0 5 vec2 f32 0 5 0 5 vec2 f32 0 5 0 5 return vec4 f32 pos VertexIndex 0 0 1 0 const fragWGSL fragment fn main location 0 vec4 f32 return vec4 f32 0 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 multisample count 4 const texture device createTexture size presentationSize sampleCount 4 format presentationFormat usage GPUTextureUsage RENDER_ATTACHMENT const view texture createView function frame const commandEncoder device createCommandEncoder const renderPassDescriptor colorAttachments view view resolveTarget context getCurrentTexture createView loadValue r 1 0 g 0 5 b 0 5 a 1 0 loadOp clear clearValue r 1 0 g 0 5 b 0 5 a 1 0 storeOp discard const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 3 1 0 0 passEncoder endPass no longer supported passEncoder end device queue submit commandEncoder finish requestAnimationFrame frame frame console log ready
location 0 vec4 f32 return vec4 f32 0 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 multisample count 4 const texture device createTexture size presentationSize sampleCount 4 format presentationFormat usage GPUTextureUsage RENDER_ATTACHMENT const view texture createView function frame const commandEncoder device createCommandEncoder const renderPassDescriptor colorAttachments view view resolveTarget context getCurrentTexture createView loadValue r 1 0 g 0 5 b 0 5 a 1 0 loadOp clear clearValue r 1 0 g 0 5 b 0 5 a 1 0 storeOp discard const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 3 1 0 0 passEncoder endPass no longer supported passEncoder end device queue submit commandEncoder finish requestAnimationFrame frame frame console log ready