WebGPU Example Wireframe taking advantage of barycentric coordinates Wireframes come in as a handy tool for debugging Seeing all the triangles is valuable And the least disturbing the simplest to use method is the one we want The example here draws wireframes for triangles by taking advantage of the trick using barycentric coordinates For every triangle consisting of 6 vertices 3 points of two coordinates Three points of three coordinates respectively p_1 1 0 0 p_2 0 1 0 p_3 0 0 1 Each triangle vertex has a corresponding barycentric coordinate assigned v1 p1 v2 p2 v3 p3 The trick behind the barycentric approach is in the fragment shader Assuming you only know that the barycentric coordinates if any of the coordinates is lower than some constant e g 0 01 render it black as these are the edges let canvas document createElement canvas document body appendChild canvas canvas width 400 canvas height 400 console log canvas width console log 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 context configure device format presentationFormat size presentationSize let vertWGSL struct VSOut builtin position Position vec4 f32 location 0 bar vec3 f32 vertex fn main builtin vertex_index VertexIndex u32 VSOut index is passed to the vertex shader which looks up the triangle vertex data given below var pos array vec2 f32 3 vec2 f32 0 0 0 5 vec2 f32 0 5 0 5 vec2 f32 0 5 0 5 var bar 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 bar bar VertexIndex return vsOut let fragWGSL fragment fn main location 0 vbc vec3 f32 location 0 vec4 f32 return vec4 f32 vbc 1 0 if vbc x 0 01 vbc y 0 01 vbc z 0 01 return vec4 f32 0 0 0 0 0 0 1 0 return vec4 f32 0 5 0 5 0 5 1 0 const sampleCount 4 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 GPUPrimitiveTopology point list line list line strip triangle list triangle strip multisample count 4 const texture device createTexture size presentationSize sampleCount format presentationFormat usage GPUTextureUsage RENDER_ATTACHMENT const view texture createView function frame const commandEncoder device createCommandEncoder const renderPassDescriptor GPURenderPassDescriptor colorAttachments view resolveTarget context getCurrentTexture createView loadOp clear clearValue r 1 0 g 1 0 b 0 0 a 1 0 storeOp discard const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 3 1 0 0 passEncoder end device queue submit commandEncoder finish requestAnimationFrame frame frame console log done
var bar 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 bar bar VertexIndex return vsOut let fragWGSL fragment fn main location 0 vbc vec3 f32 location 0 vec4 f32 return vec4 f32 vbc 1 0 if vbc x 0 01 vbc y 0 01 vbc z 0 01 return vec4 f32 0 0 0 0 0 0 1 0 return vec4 f32 0 5 0 5 0 5 1 0 const sampleCount 4 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 GPUPrimitiveTopology point list line list line strip triangle list triangle strip multisample count 4 const texture device createTexture size presentationSize sampleCount format presentationFormat usage GPUTextureUsage RENDER_ATTACHMENT const view texture createView function frame const commandEncoder device createCommandEncoder const renderPassDescriptor GPURenderPassDescriptor colorAttachments view resolveTarget context getCurrentTexture createView loadOp clear clearValue r 1 0 g 1 0 b 0 0 a 1 0 storeOp discard const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder draw 3 1 0 0 passEncoder end device queue submit commandEncoder finish requestAnimationFrame frame frame console log done