2d sierpinski var sbaseColors 1 0 0 0 0 0 0 0 1 0 0 0 1 0 0 0 0 0 1 0 0 0 1 0 creating a simple series of points const svertices 0 1 0 1 1 0 1 1 0 let spoints let scolors function bflatten aarray let ff new Float32Array aarray length 3 aarray forEach function fpoint findex ff findex 3 0 fpoint 0 ff findex 3 1 fpoint 1 ff findex 3 2 fpoint 2 return ff function triangle aa bb cc let icolor Math floor Math random 4 scolors push sbaseColors icolor spoints push aa scolors push sbaseColors icolor spoints push bb scolors push sbaseColors icolor spoints push cc function tetra a b c triangle a b c function getMiddlePoint u v return 0 5 u 0 v 0 0 5 u 1 v 1 0 5 u 2 v 2 function divideTetra a b c ccount if ccount 0 tetra a b c return let d getMiddlePoint a b let e getMiddlePoint a c let f getMiddlePoint b c ccount ccount 1 divideTetra a d e ccount divideTetra d b f ccount divideTetra c e f ccount divideTetra d f e ccount divideTetra svertices 0 svertices 1 svertices 2 4 let vcolors bflatten scolors let vpositions bflatten spoints if you want random colors instead of fixed colors for let i 0 i vcolors length i vcolors i Math random console log num colors scolors length console log num triangles spoints length console log vcolors const canvas document createElement canvas document body appendChild canvas canvas width canvas height 512 console log canvas width canvas height const context canvas getContext webgpu const gpu navigator gpu console log gpu gpu const adapter await gpu requestAdapter const device await adapter requestDevice 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 const positionBuffer device createBuffer size vpositions byteLength usage GPUBufferUsage VERTEX GPUBufferUsage COPY_DST const colorBuffer device createBuffer size vcolors byteLength usage GPUBufferUsage VERTEX GPUBufferUsage COPY_DST device queue writeBuffer positionBuffer 0 vpositions device queue writeBuffer colorBuffer 0 vcolors var vertWGSL struct VSOut builtin position Position vec4 f32 location 0 color vec4 f32 vertex fn main location 0 inPos vec3 f32 location 1 color vec3 f32 VSOut var vsOut VSOut vsOut Position vec4 f32 inPos xyz 1 0 vsOut color vec4 f32 color xyz 1 0 return vsOut var fragWGSL fragment fn main location 0 inColor vec4 f32 location 0 vec4 f32 return vec4 f32 inColor const pipeline device createRenderPipeline layout auto vertex module device createShaderModule code vertWGSL entryPoint main buffers arrayStride 12 attributes shaderLocation 0 format float32x3 offset 0 arrayStride 12 attributes shaderLocation 1 format float32x3 offset 0 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 const commandEncoder device createCommandEncoder const renderPass commandEncoder beginRenderPass renderPassDescriptor renderPass setPipeline pipeline renderPass setVertexBuffer 0 positionBuffer renderPass setVertexBuffer 1 colorBuffer renderPass draw spoints length 1 0 0 renderPass end device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame console log ready
size vcolors byteLength usage GPUBufferUsage VERTEX GPUBufferUsage COPY_DST device queue writeBuffer positionBuffer 0 vpositions device queue writeBuffer colorBuffer 0 vcolors var vertWGSL struct VSOut builtin position Position vec4 f32 location 0 color vec4 f32 vertex fn main location 0 inPos vec3 f32 location 1 color vec3 f32 VSOut var vsOut VSOut vsOut Position vec4 f32 inPos xyz 1 0 vsOut color vec4 f32 color xyz 1 0 return vsOut var fragWGSL fragment fn main location 0 inColor vec4 f32 location 0 vec4 f32 return vec4 f32 inColor const pipeline device createRenderPipeline layout auto vertex module device createShaderModule code vertWGSL entryPoint main buffers arrayStride 12 attributes shaderLocation 0 format float32x3 offset 0 arrayStride 12 attributes shaderLocation 1 format float32x3 offset 0 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 const commandEncoder device createCommandEncoder const renderPass commandEncoder beginRenderPass renderPassDescriptor renderPass setPipeline pipeline renderPass setVertexBuffer 0 positionBuffer renderPass setVertexBuffer 1 colorBuffer renderPass draw spoints length 1 0 0 renderPass end device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame console log ready