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 window devicePixelRatio 1 const presentationSize canvas clientWidth devicePixelRatio canvas clientHeight devicePixelRatio const presentationFormat context getPreferredFormat adapter context configure device format presentationFormat size presentationSize let vertWGSL block struct Uniforms mousex f32 mousey f32 var1 f32 var2 f32 binding 0 group 0 var uniform uniforms Uniforms struct VSOut builtin position Position vec4 f32 location 0 bar vec3 f32 stage 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 block struct Uniforms mousex f32 mousey f32 var1 f32 0 1 0 var2 f32 binding 1 group 0 var uniform uniforms Uniforms stage fragment fn main location 0 vbc vec3 f32 location 0 vec4 f32 if uniforms var2 0 0 return vec4 f32 vbc 1 0 if uniforms var2 1 0 if vbc x uniforms var1 vbc y uniforms var1 vbc z uniforms var1 return vec4 f32 0 0 0 0 0 0 1 0 discard if vbc x uniforms var1 if sin vbc y 100 0 1 0 0 5 return vec4 f32 sin vbc y 100 0 0 0 0 0 1 0 if vbc y uniforms var1 if sin vbc z 100 0 0 5 return vec4 f32 0 0 sin vbc z 100 0 0 0 1 0 if vbc z uniforms var1 if sin vbc x 100 0 0 5 return vec4 f32 0 0 0 0 sin vbc x 100 0 1 0 discard return vec4 f32 0 5 0 5 0 5 1 0 const uniformData mousex 0 0 mousey 0 0 var1 0 1 var2 2 0 const vertexUniformBuffer device createBuffer size Object values uniformData length 4 usage GPUBufferUsage UNIFORM GPUBufferUsage COPY DST var uniformDataFloats new Float32Array Object values uniformData device queue writeBuffer vertexUniformBuffer 0 uniformDataFloats const sceneUniformBindGroupLayout device createBindGroupLayout entries binding 0 visibility GPUShaderStage VERTEX buffer type uniform binding 1 visibility GPUShaderStage FRAGMENT buffer type uniform const uniformBindGroup device createBindGroup layout sceneUniformBindGroupLayout entries binding 0 resource buffer vertexUniformBuffer binding 1 resource buffer vertexUniformBuffer const sampleCount 4 const pipeline device createRenderPipeline layout device createPipelineLayout bindGroupLayouts sceneUniformBindGroupLayout vertex module device createShaderModule code vertWGSL replace g entryPoint main fragment module device createShaderModule code fragWGSL replace g 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 uniformDataFloats new Float32Array Object values uniformData device queue writeBuffer vertexUniformBuffer 0 uniformDataFloats const commandEncoder device createCommandEncoder const renderPassDescriptor GPURenderPassDescriptor colorAttachments view resolveTarget context getCurrentTexture createView loadValue r 1 0 g 1 0 b 1 0 a 1 0 storeOp discard const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setBindGroup 0 uniformBindGroup passEncoder setPipeline pipeline passEncoder draw 3 1 0 0 passEncoder endPass device queue submit commandEncoder finish requestAnimationFrame frame frame canvas onmousemove function event uniformData mousex event clientX canvas width uniformData mousey event clientY canvas height let var2 document createElement div document body appendChild var2 var2 style position absolute var2 style left 30px var2 style top 10px var2 style width 300px var2 innerHTML fieldset id var2 legend Select type legend label for radio1 None label input type radio value 0 name myval2 id radio1 checked checked label for radio2 Line label input type radio value 1 name myval2 id radio2 label for radio 3 Pattern label input type radio value 2 name myval2 id radio3 fieldset let var1 document createElement div document body appendChild var1 var1 id var1 var1 style position absolute var1 style left 35px var1 style top 75px var1 style width 200px var1 style border 1px solid blue let link document createElement link link href https code jquery com ui 1 10 4 themes ui lightness jquery ui css link rel stylesheet link async false document body appendChild link let script1 document createElement script script1 src https code jquery com jquery 1 10 2 js script1 type text javascript script1 async false document body appendChild script1 let script2 document createElement script script2 src https code jquery com ui 1 10 4 jquery ui js script2 type text javascript script2 async false document body appendChild script2 script2 onload function var1 slider values 0 1 min 0 005 max 1 0 step 0 01 values 75 300 slide function event ui ui handle text ui value uniformData var1 parseFloat ui value ui slider handle each function this text this parent slider values 0 var2 change function let selectedValue input name myval2 checked val uniformData var2 parseFloat selectedValue end onload console log done
const uniformBindGroup device createBindGroup layout sceneUniformBindGroupLayout entries binding 0 resource buffer vertexUniformBuffer binding 1 resource buffer vertexUniformBuffer const sampleCount 4 const pipeline device createRenderPipeline layout device createPipelineLayout bindGroupLayouts sceneUniformBindGroupLayout vertex module device createShaderModule code vertWGSL replace g entryPoint main fragment module device createShaderModule code fragWGSL replace g 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 uniformDataFloats new Float32Array Object values uniformData device queue writeBuffer vertexUniformBuffer 0 uniformDataFloats const commandEncoder device createCommandEncoder const renderPassDescriptor GPURenderPassDescriptor colorAttachments view resolveTarget context getCurrentTexture createView loadValue r 1 0 g 1 0 b 1 0 a 1 0 storeOp discard const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setBindGroup 0 uniformBindGroup passEncoder setPipeline pipeline passEncoder draw 3 1 0 0 passEncoder endPass device queue submit commandEncoder finish requestAnimationFrame frame frame canvas onmousemove function event uniformData mousex event clientX canvas width uniformData mousey event clientY canvas height let var2 document createElement div document body appendChild var2 var2 style position absolute var2 style left 30px var2 style top 10px var2 style width 300px var2 innerHTML fieldset id var2 legend Select type legend label for radio1 None label input type radio value 0 name myval2 id radio1 checked checked label for radio2 Line label input type radio value 1 name myval2 id radio2 label for radio 3 Pattern label input type radio value 2 name myval2 id radio3 fieldset let var1 document createElement div document body appendChild var1 var1 id var1 var1 style position absolute var1 style left 35px var1 style top 75px var1 style width 200px var1 style border 1px solid blue let link document createElement link link href https code jquery com ui 1 10 4 themes ui lightness jquery ui css link rel stylesheet link async false document body appendChild link let script1 document createElement script script1 src https code jquery com jquery 1 10 2 js script1 type text javascript script1 async false document body appendChild script1 let script2 document createElement script script2 src https code jquery com ui 1 10 4 jquery ui js script2 type text javascript script2 async false document body appendChild script2 script2 onload function var1 slider values 0 1 min 0 005 max 1 0 step 0 01 values 75 300 slide function event ui ui handle text ui value uniformData var1 parseFloat ui value ui slider handle each function this text this parent slider values 0 var2 change function let selectedValue input name myval2 checked val uniformData var2 parseFloat selectedValue end onload console log done