sierpinski 3d let baseColors 1 0 0 0 0 36 0 61 1 0 0 3 1 0 0 52 0 14 1 0 0 0 1 0 creating a simple series of points let vertices 0 0000 0 1500 1 0000 0 0000 0 8428 0 3333 0 8165 0 5714 0 3333 0 8165 0 5714 0 3333 let points let colors function flatten array let f new Float32Array array length 3 array forEach function point index f index 3 point 0 f index 3 1 point 1 f index 3 2 point 2 return f utility to scale a vector function scale point scale return point 0 scale point 1 scale point 2 scale function triangle a b c color colors push scale baseColors color 1 points push a colors push scale baseColors color 1 points push b colors push baseColors color points push c function tetra a b c d triangle a c b 0 triangle a c d 1 triangle a b d 2 triangle b c d 3 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 d count if count 0 tetra a b c d return let ab getMiddlePoint a b let ac getMiddlePoint a c let ad getMiddlePoint a d let bc getMiddlePoint b c let bd getMiddlePoint b d let cd getMiddlePoint c d count divideTetra a ab ac ad count divideTetra ab b bc bd count divideTetra ac bc c cd count divideTetra ad bd cd d count divideTetra vertices 0 vertices 1 vertices 2 vertices 3 3 let vcolors flatten colors let vpositions flatten points console log num points 3 points per triangle points length var script document createElement script script type text javascript script async false script src https cdnjs cloudflare com ajax libs gl matrix 2 6 0 gl matrix min js document head appendChild script const canvas document createElement canvas document body appendChild canvas canvas width canvas height 256 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 Uniforms modelViewProjectionMatrix mat4x4 f32 binding 0 group 0 var uniform uniforms Uniforms 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 uniforms modelViewProjectionMatrix vec4 f32 inPos 1 0 vsOut color vec4 f32 color 1 0 return vsOut var fragWGSL fragment fn main location 0 inColor vec4 f32 location 0 vec4 f32 return vec4 f32 inColor const projectionMatrix mat4 create const viewMatrix mat4 create const viewProjectionMatrix mat4 create mat4 perspective projectionMatrix Math PI 2 canvas width canvas height 0 1 10 0 mat4 lookAt viewMatrix 0 0 1 5 0 0 0 0 1 0 mat4 multiply viewProjectionMatrix projectionMatrix viewMatrix const vertexUniformBuffer device createBuffer size 64 usage GPUBufferUsage UNIFORM GPUBufferUsage COPY_DST device queue writeBuffer vertexUniformBuffer 0 viewProjectionMatrix const sceneUniformBindGroupLayout device createBindGroupLayout entries binding 0 visibility GPUShaderStage VERTEX buffer type uniform const uniformBindGroup device createBindGroup layout sceneUniformBindGroupLayout entries binding 0 resource buffer vertexUniformBuffer const pipeline device createRenderPipeline layout device createPipelineLayout bindGroupLayouts sceneUniformBindGroupLayout 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 frontFace ccw cullMode none stripIndexFormat undefined depthStencil format depth24plus depthWriteEnabled true depthCompare less const depthTexture device createTexture size canvas width canvas height 1 format depth24plus usage GPUTextureUsage RENDER_ATTACHMENT 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 depthStencilAttachment view depthTexture createView depthLoadOp clear depthClearValue 1 depthStoreOp store stencilLoadValue 0 stencilStoreOp store const rotate 0 0 0 function frame few extra lines to rotate the model rotate 0 0 001 rotate 2 0 005 let rotateXMat mat4 create let rotateYMat mat4 create let rotateZMat mat4 create mat4 fromXRotation rotateXMat rotate 0 mat4 fromYRotation rotateYMat rotate 1 mat4 fromZRotation rotateZMat rotate 2 const viewProjectionMatrix mat4 create mat4 multiply viewProjectionMatrix projectionMatrix viewMatrix mat4 multiply viewProjectionMatrix viewProjectionMatrix rotateZMat mat4 multiply viewProjectionMatrix viewProjectionMatrix rotateYMat mat4 multiply viewProjectionMatrix viewProjectionMatrix rotateXMat device queue writeBuffer vertexUniformBuffer 0 viewProjectionMatrix renderPassDescriptor colorAttachments 0 view context getCurrentTexture createView const commandEncoder device createCommandEncoder const renderPass commandEncoder beginRenderPass renderPassDescriptor renderPass setPipeline pipeline renderPass setBindGroup 0 uniformBindGroup renderPass setVertexBuffer 0 positionBuffer renderPass setVertexBuffer 1 colorBuffer renderPass draw points length 1 0 0 renderPass end device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame
0 mat4 lookAt viewMatrix 0 0 1 5 0 0 0 0 1 0 mat4 multiply viewProjectionMatrix projectionMatrix viewMatrix const vertexUniformBuffer device createBuffer size 64 usage GPUBufferUsage UNIFORM GPUBufferUsage COPY_DST device queue writeBuffer vertexUniformBuffer 0 viewProjectionMatrix const sceneUniformBindGroupLayout device createBindGroupLayout entries binding 0 visibility GPUShaderStage VERTEX buffer type uniform const uniformBindGroup device createBindGroup layout sceneUniformBindGroupLayout entries binding 0 resource buffer vertexUniformBuffer const pipeline device createRenderPipeline layout device createPipelineLayout bindGroupLayouts sceneUniformBindGroupLayout 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 frontFace ccw cullMode none stripIndexFormat undefined depthStencil format depth24plus depthWriteEnabled true depthCompare less const depthTexture device createTexture size canvas width canvas height 1 format depth24plus usage GPUTextureUsage RENDER_ATTACHMENT 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 depthStencilAttachment view depthTexture createView depthLoadOp clear depthClearValue 1 depthStoreOp store stencilLoadValue 0 stencilStoreOp store const rotate 0 0 0 function frame few extra lines to rotate the model rotate 0 0 001 rotate 2 0 005 let rotateXMat mat4 create let rotateYMat mat4 create let rotateZMat mat4 create mat4 fromXRotation rotateXMat rotate 0 mat4 fromYRotation rotateYMat rotate 1 mat4 fromZRotation rotateZMat rotate 2 const viewProjectionMatrix mat4 create mat4 multiply viewProjectionMatrix projectionMatrix viewMatrix mat4 multiply viewProjectionMatrix viewProjectionMatrix rotateZMat mat4 multiply viewProjectionMatrix viewProjectionMatrix rotateYMat mat4 multiply viewProjectionMatrix viewProjectionMatrix rotateXMat device queue writeBuffer vertexUniformBuffer 0 viewProjectionMatrix renderPassDescriptor colorAttachments 0 view context getCurrentTexture createView const commandEncoder device createCommandEncoder const renderPass commandEncoder beginRenderPass renderPassDescriptor renderPass setPipeline pipeline renderPass setBindGroup 0 uniformBindGroup renderPass setVertexBuffer 0 positionBuffer renderPass setVertexBuffer 1 colorBuffer renderPass draw points length 1 0 0 renderPass end device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame