Random cubes minecraft 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 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 function cube p s let v 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 let res for let i 0 i v length 6 i res push v i 6 0 s x p x res push v i 6 1 s y p y res push v i 6 2 s z p z res push v i 6 3 res push v i 6 4 res push v i 6 5 return res function randomRange min max return Math random max min min let vertices for let i 0 i 20 i vertices vertices concat cube x randomRange 1 1 y randomRange 1 1 z randomRange 1 1 x randomRange 0 1 0 5 y randomRange 0 1 0 5 z randomRange 0 1 0 5 let vertices cube x 0 y 0 z 0 x 1 y 1 z 1 const cubeVertexArray new Float32Array vertices const vertexBuffer device createBuffer size cubeVertexArray byteLength usage GPUBufferUsage VERTEX GPUBufferUsage COPY_DST device queue writeBuffer vertexBuffer 0 cubeVertexArray var vertWGSL struct Uniforms modelViewProjectionMatrix mat4x4 f32 modelMatrix mat4x4 f32 binding 0 group 0 var uniform uniforms Uniforms struct VSOut builtin position Position vec4 f32 location 0 normal vec3 f32 vertex fn main location 0 inPos vec3 f32 location 1 normal vec3 f32 VSOut var vsOut VSOut vsOut Position uniforms modelViewProjectionMatrix uniforms modelMatrix vec4 f32 inPos 1 0 vsOut normal uniforms modelMatrix vec4 f32 normal 0 0 xyz return vsOut var fragWGSL fragment fn main location 0 normal vec3 f32 location 0 vec4 f32 return vec4 rgba let texCol vec4 f32 1 0 1 0 0 0 1 0 hard code reference direction z direction let dir vec3 f32 0 0 0 0 1 0 scale brightness based on the normal vs ref drection let illum abs dot dir normal use texture for the color scale it by the illum value return vec4 f32 texCol xyz illum 1 0 dynamic world transforms animate rotate the shape const rotation 0 0 0 let rotateXMat mat4 create let rotateYMat mat4 create let rotateZMat mat4 create const projectionMatrix mat4 create const viewMatrix mat4 create const viewProjectionMatrix mat4 create const modelMatrix mat4 create mat4 perspective projectionMatrix Math PI 2 canvas width canvas height 0 1 10 0 mat4 lookAt viewMatrix 1 0 3 0 0 0 0 1 0 mat4 multiply viewProjectionMatrix projectionMatrix viewMatrix const vertexUniformBuffer device createBuffer size 128 usage GPUBufferUsage UNIFORM GPUBufferUsage COPY_DST device queue writeBuffer vertexUniformBuffer 0 viewProjectionMatrix device queue writeBuffer vertexUniformBuffer 64 modelMatrix 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 depthTexture device createTexture size presentationSize format depth24plus usage GPUTextureUsage RENDER_ATTACHMENT const pipeline device createRenderPipeline layout device createPipelineLayout bindGroupLayouts sceneUniformBindGroupLayout vertex module device createShaderModule code vertWGSL entryPoint main buffers arrayStride 12 2 attributes shaderLocation 0 format float32x3 offset 0 shaderLocation 1 format float32x3 offset 3 4 fragment module device createShaderModule code fragWGSL entryPoint main targets format presentationFormat primitive topology triangle list frontFace ccw cullMode back stripIndexFormat undefined depthStencil depthWriteEnabled true depthCompare less format depth24plus 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 0 depthStoreOp store stencilLoadValue 0 stencilStoreOp store function frame Update uniform buffer rotation 0 0 01 rotation 2 0 005 mat4 fromXRotation rotateXMat rotation 0 mat4 fromYRotation rotateYMat rotation 1 mat4 fromZRotation rotateZMat rotation 2 mat4 multiply modelMatrix rotateYMat rotateZMat mat4 multiply modelMatrix modelMatrix rotateXMat device queue writeBuffer vertexUniformBuffer 64 modelMatrix 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 vertexBuffer renderPass draw cubeVertexArray length 6 1 0 0 renderPass end device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame Fractal cubes 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 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 function cube p s let v 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 let res for let i 0 i v length 6 i res push v i 6 0 s x p x res push v i 6 1 s y p y res push v i 6 2 s z p z res push v i 6 3 res push v i 6 4 res push v i 6 5 return res function randomRange min max return Math random max min min let vertices function cubefractal p s count vertices vertices concat cube p s if count 0 vertices vertices concat cube p s return nextSize size 2 0 offset size 4 0 nextSize 2 0 count count 1 let o 1 1 let f 0 5 cubefractal x p x s x o y p y s y 0 0 z p z s z 0 0 x s x f y s y f z s z f count cubefractal x p x s x o y p y s y 0 0 z p z s z 0 0 x s x f y s y f z s z f count cubefractal x p x s x 0 0 y p y s y o z p z s z 0 0 x s x f y s y f z s z f count cubefractal x p x s x 0 0 y p y s y o z p z s z 0 0 x s x f y s y f z s z f count cubefractal x p x s x 0 0 y p y s y 0 0 z p z s z o x s x f y s y f z s z f count cubefractal x p x s x 0 0 y p y s y 0 0 z p z s z o x s x f y s y f z s z f count cubefractal x 0 y 0 z 0 x 0 5 y 0 5 z 0 5 3 for let i 0 i 20 i vertices vertices concat cube x randomRange 1 1 y randomRange 1 1 z randomRange 1 1 x randomRange 0 1 0 5 y randomRange 0 1 0 5 z randomRange 0 1 0 5 let vertices cube x 0 y 0 z 0 x 1 y 1 z 1 const cubeVertexArray new Float32Array vertices const vertexBuffer device createBuffer size cubeVertexArray byteLength usage GPUBufferUsage VERTEX GPUBufferUsage COPY_DST device queue writeBuffer vertexBuffer 0 cubeVertexArray var vertWGSL struct Uniforms modelViewProjectionMatrix mat4x4 f32 modelMatrix mat4x4 f32 binding 0 group 0 var uniform uniforms Uniforms struct VSOut builtin position Position vec4 f32 location 0 normal vec3 f32 vertex fn main location 0 inPos vec3 f32 location 1 normal vec3 f32 VSOut var vsOut VSOut vsOut Position uniforms modelViewProjectionMatrix uniforms modelMatrix vec4 f32 inPos 1 0 vsOut normal uniforms modelMatrix vec4 f32 normal 0 0 xyz return vsOut var fragWGSL fragment fn main location 0 normal vec3 f32 location 0 vec4 f32 return vec4 rgba let texCol vec4 f32 1 0 1 0 0 0 1 0 hard code reference direction z direction let dir vec3 f32 0 0 0 0 1 0 scale brightness based on the normal vs ref drection let illum abs dot dir normal use texture for the color scale it by the illum value return vec4 f32 texCol xyz illum 1 0 dynamic world transforms animate rotate the shape const rotation 0 0 0 let rotateXMat mat4 create let rotateYMat mat4 create let rotateZMat mat4 create const projectionMatrix mat4 create const viewMatrix mat4 create const viewProjectionMatrix mat4 create const modelMatrix mat4 create mat4 perspective projectionMatrix Math PI 2 canvas width canvas height 0 1 10 0 mat4 lookAt viewMatrix 1 0 2 0 0 0 0 1 0 mat4 multiply viewProjectionMatrix projectionMatrix viewMatrix const vertexUniformBuffer device createBuffer size 128 usage GPUBufferUsage UNIFORM GPUBufferUsage COPY_DST device queue writeBuffer vertexUniformBuffer 0 viewProjectionMatrix device queue writeBuffer vertexUniformBuffer 64 modelMatrix 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 depthTexture device createTexture size presentationSize format depth24plus usage GPUTextureUsage RENDER_ATTACHMENT const pipeline device createRenderPipeline layout device createPipelineLayout bindGroupLayouts sceneUniformBindGroupLayout vertex module device createShaderModule code vertWGSL entryPoint main buffers arrayStride 12 2 attributes shaderLocation 0 format float32x3 offset 0 shaderLocation 1 format float32x3 offset 3 4 fragment module device createShaderModule code fragWGSL entryPoint main targets format presentationFormat primitive topology triangle list frontFace ccw cullMode back stripIndexFormat undefined depthStencil depthWriteEnabled true depthCompare less format depth24plus 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 0 depthStoreOp store stencilLoadValue 0 stencilStoreOp store function frame Update uniform buffer rotation 0 0 01 rotation 2 0 005 mat4 fromXRotation rotateXMat rotation 0 mat4 fromYRotation rotateYMat rotation 1 mat4 fromZRotation rotateZMat rotation 2 mat4 multiply modelMatrix rotateYMat rotateZMat mat4 multiply modelMatrix modelMatrix rotateXMat device queue writeBuffer vertexUniformBuffer 64 modelMatrix 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 vertexBuffer renderPass draw cubeVertexArray length 6 1 0 0 renderPass end device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame
e 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 function cube p s let v 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 1 0 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 let res for let i 0 i v length 6 i res push v i 6 0 s x p x res push v i 6 1 s y p y res push v i 6 2 s z p z res push v i 6 3 res push v i 6 4 res push v i 6 5 return res function randomRange min max return Math random max min min let vertices function cubefractal p s count vertices vertices concat cube p s if count 0 vertices vertices concat cube p s return nextSize size 2 0 offset size 4 0 nextSize 2 0 count count 1 let o 1 1 let f 0 5 cubefractal x p x s x o y p y s y 0 0 z p z s z 0 0 x s x f y s y f z s z f count cubefractal x p x s x o y p y s y 0 0 z p z s z 0 0 x s x f y s y f z s z f count cubefractal x p x s x 0 0 y p y s y o z p z s z 0 0 x s x f y s y f z s z f count cubefractal x p x s x 0 0 y p y s y o z p z s z 0 0 x s x f y s y f z s z f count cubefractal x p x s x 0 0 y p y s y 0 0 z p z s z o x s x f y s y f z s z f count cubefractal x p x s x 0 0 y p y s y 0 0 z p z s z o x s x f y s y f z s z f count cubefractal x 0 y 0 z 0 x 0 5 y 0 5 z 0 5 3 for let i 0 i 20 i vertices vertices concat cube x randomRange 1 1 y randomRange 1 1 z randomRange 1 1 x randomRange 0 1 0 5 y randomRange 0 1 0 5 z randomRange 0 1 0 5 let vertices cube x 0 y 0 z 0 x 1 y 1 z 1 const cubeVertexArray new Float32Array vertices const vertexBuffer device createBuffer size cubeVertexArray byteLength usage GPUBufferUsage VERTEX GPUBufferUsage COPY_DST device queue writeBuffer vertexBuffer 0 cubeVertexArray var vertWGSL struct Uniforms modelViewProjectionMatrix mat4x4 f32 modelMatrix mat4x4 f32 binding 0 group 0 var uniform uniforms Uniforms struct VSOut builtin position Position vec4 f32 location 0 normal vec3 f32 vertex fn main location 0 inPos vec3 f32 location 1 normal vec3 f32 VSOut var vsOut VSOut vsOut Position uniforms modelViewProjectionMatrix uniforms modelMatrix vec4 f32 inPos 1 0 vsOut normal uniforms modelMatrix vec4 f32 normal 0 0 xyz return vsOut var fragWGSL fragment fn main location 0 normal vec3 f32 location 0 vec4 f32 return vec4 rgba let texCol vec4 f32 1 0 1 0 0 0 1 0 hard code reference direction z direction let dir vec3 f32 0 0 0 0 1 0 scale brightness based on the normal vs ref drection let illum abs dot dir normal use texture for the color scale it by the illum value return vec4 f32 texCol xyz illum 1 0 dynamic world transforms animate rotate the shape const rotation 0 0 0 let rotateXMat mat4 create let rotateYMat mat4 create let rotateZMat mat4 create const projectionMatrix mat4 create const viewMatrix mat4 create const viewProjectionMatrix mat4 create const modelMatrix mat4 create mat4 perspective projectionMatrix Math PI 2 canvas width canvas height 0 1 10 0 mat4 lookAt viewMatrix 1 0 2 0 0 0 0 1 0 mat4 multiply viewProjectionMatrix projectionMatrix viewMatrix const vertexUniformBuffer device createBuffer size 128 usage GPUBufferUsage UNIFORM GPUBufferUsage COPY_DST device queue writeBuffer vertexUniformBuffer 0 viewProjectionMatrix device queue writeBuffer vertexUniformBuffer 64 modelMatrix 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 depthTexture device createTexture size presentationSize format depth24plus usage GPUTextureUsage RENDER_ATTACHMENT const pipeline device createRenderPipeline layout device createPipelineLayout bindGroupLayouts sceneUniformBindGroupLayout vertex module device createShaderModule code vertWGSL entryPoint main buffers arrayStride 12 2 attributes shaderLocation 0 format float32x3 offset 0 shaderLocation 1 format float32x3 offset 3 4 fragment module device createShaderModule code fragWGSL entryPoint main targets format presentationFormat primitive topology triangle list frontFace ccw cullMode back stripIndexFormat undefined depthStencil depthWriteEnabled true depthCompare less format depth24plus 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 0 depthStoreOp store stencilLoadValue 0 stencilStoreOp store function frame Update uniform buffer rotation 0 0 01 rotation 2 0 005 mat4 fromXRotation rotateXMat rotation 0 mat4 fromYRotation rotateYMat rotation 1 mat4 fromZRotation rotateZMat rotation 2 mat4 multiply modelMatrix rotateYMat rotateZMat mat4 multiply modelMatrix modelMatrix rotateXMat device queue writeBuffer vertexUniformBuffer 64 modelMatrix 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 vertexBuffer renderPass draw cubeVertexArray length 6 1 0 0 renderPass end device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame