WebGPU Example Simple Screen Space Ambient Occlusion SSAO Renders the normals to a texture which are used for a second pass through the shader document body style height 600px get some model data use json as it s easy to load setup let response await fetch var scripts skull json let json await response json console log vertices json vertices length console log faces json faces length console log normals json normals length get some bounds for the model doesn t go off screen let min x 10000 y 10000 z 10000 let max x 10000 y 10000 z 10000 for let i 0 i json vertices length 3 i min x Math min min x json vertices i 3 0 min y Math min min y json vertices i 3 1 min z Math min min z json vertices i 3 2 max x Math max max x json vertices i 3 0 max y Math max max y json vertices i 3 1 max z Math max max z json vertices i 3 2 let delta x max x min x y max y min y z max z min z let middle x min x delta x 0 5 y min y delta y 0 5 z min z delta z 0 5 let dist Math sqrt delta x delta x delta y delta y delta z delta z console log model size dist console log min min x min y min z console log max max x max y max z console log middle middle x middle y middle z 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 let canvas document createElement canvas document body appendChild canvas canvas width canvas height 512 const adapter await navigator gpu requestAdapter const device await adapter requestDevice const context canvas getContext webgpu const presentationSize canvas width 1 canvas height 1 let presentationFormat navigator gpu getPreferredCanvasFormat context getPreferredFormat adapter no longer supported console log presentationFormat presentationFormat presentationFormat rgba8snorm context configure device device compositingAlphaMode opaque Specify we want both RENDER_ATTACHMENT and COPY_SRC since we will copy out of the swap chain texture usage GPUTextureUsage RENDER_ATTACHMENT GPUTextureUsage COPY_SRC format presentationFormat size presentationSize let translateMat mat4 create let rotateXMat mat4 create let rotateYMat mat4 create let rotateZMat mat4 create let scaleMat mat4 create const projectionMatrix mat4 create const viewMatrix mat4 create const modelMatrix mat4 create const rotation 0 0 0 mat4 perspective projectionMatrix Math PI 2 canvas width canvas height 0 001 1500 0 mat4 lookAt viewMatrix 0 0 dist 0 6 0 0 0 0 1 0 mat4 multiply viewProjectionMatrix projectionMatrix viewMatrix Declare buffer handles const uniformBuffer device createBuffer size 192 3x mat4x4 3x64 192 usage GPUBufferUsage UNIFORM GPUBufferUsage COPY_DST device queue writeBuffer uniformBuffer 0 modelMatrix device queue writeBuffer uniformBuffer 64 viewMatrix device queue writeBuffer uniformBuffer 128 projectionMatrix const sceneUniformBindGroupLayout device createBindGroupLayout entries binding 0 visibility GPUShaderStage VERTEX buffer type uniform const sceneUniformBindGroup device createBindGroup layout sceneUniformBindGroupLayout entries binding 0 resource buffer uniformBuffer const vertWGSL struct Uniforms modelMatrix mat4x4 f32 modelView mat4x4 f32 modelProjection mat4x4 f32 binding 0 group 0 var uniform uniforms Uniforms struct VSOut builtin position Position vec4 f32 location 0 normal vec3 f32 location 1 pos vec3 f32 vertex fn main location 0 normal vec3 f32 location 1 inPos vec3 f32 VSOut var vsOut VSOut vsOut Position uniforms modelProjection uniforms modelView uniforms modelMatrix vec4 f32 inPos 1 0 vsOut normal vec3 f32 uniforms modelMatrix vec4 f32 normal 1 0 xyz vsOut pos vec3 f32 uniforms modelView uniforms modelMatrix vec4 f32 inPos 1 0 xyz let n normalize normal let tiM uniforms modelMatrix transpose uniforms modelRotation let fN tiM vec4 f32 n 0 0 xyz vsOut normal fN uniforms modelMatrix vec4 f32 n 0 0 xyz return vsOut return vsOut const fragWGSL fragment fn main location 0 normal vec3 f32 location 1 pos vec3 f32 location 0 vec4 f32 return vec4 f32 pos 1 0 return vec4 f32 pos x 1 0 return vec4 f32 normal 1 0 return vec4 f32 1 0 0 0 0 0 1 0 let normalCol normalize normal 0 5 0 5 outNormal vec4 normalize inNormal 0 5 0 5 1 0 return vec4 f32 normalCol 1 0 const positions new Float32Array json vertices let normals new Float32Array json normals const indices new Uint16Array json faces if we don t have normals let s use the position data if json normals length 0 normals new Float32Array json vertices const createBuffer arrData usage const buffer device createBuffer size arrData byteLength 3 3 usage usage mappedAtCreation true if arrData instanceof Float32Array new Float32Array buffer getMappedRange set arrData else new Uint16Array buffer getMappedRange set arrData buffer unmap return buffer Declare buffer handles GPUBuffer var positionBuffer createBuffer positions GPUBufferUsage VERTEX var normalBuffer createBuffer normals GPUBufferUsage VERTEX var indexBuffer createBuffer indices GPUBufferUsage INDEX 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 cw cullMode back depthStencil format depth24plus depthWriteEnabled true depthCompare less const depthTexture device createTexture size canvas width canvas height 1 format depth24plus usage GPUTextureUsage RENDER_ATTACHMENT const renderPassDescription colorAttachments view undefined set late in the render loop loadOp clear clearValue 0 0 0 8 0 8 1 clear screen storeOp store depthStencilAttachment view depthTexture createView depthLoadOp clear depthClearValue 1 depthStoreOp store stencilLoadValue 0 stencilStoreOp store Copy the frame s rendering results into this texture and sample it on the next frame const storedTexture device createTexture size presentationSize format presentationFormat usage 0x2 0x4 0x10 GPUTextureUsage TEXTURE_BINDING GPUTextureUsage COPY_DST let textureSampler device createSampler minFilter linear magFilter linear const sceneUniformBindGroupLayout2 device createBindGroupLayout entries binding 0 visibility GPUShaderStage FRAGMENT sampler type filtering binding 1 visibility GPUShaderStage FRAGMENT texture sampleType float viewDimension 2d const uniformBindGroup2 device createBindGroup layout sceneUniformBindGroupLayout2 entries binding 0 resource textureSampler binding 1 resource storedTexture createView var vertWGSL2 struct VSOut builtin position Position vec4 f32 location 0 uvs vec2 f32 vertex fn main builtin vertex_index VertexIndex u32 VSOut var pos array vec2 f32 4 vec2 f32 1 0 1 0 vec2 f32 1 0 1 0 vec2 f32 1 0 1 0 vec2 f32 1 0 1 0 var vsOut VSOut vsOut Position vec4 f32 pos VertexIndex 0 9 0 0 1 0 vsOut uvs pos VertexIndex 1 0 0 5 return vsOut var fragWGSL2 fn rand n f32 f32 return fract sin n 43758 5453123 group 0 binding 0 var mySampler sampler group 0 binding 1 var myTexture texture_2d f32 fragment fn main location 0 uvs vec2 f32 location 0 vec4 f32 return textureSample myTexture mySampler uvs return vec4 f32 1 0 0 0 1 0 1 0 let n0 textureSample myTexture mySampler uvs xyz return vec4 f32 n0 1 0 let normal normalize n0 2 0 1 0 return vec4 f32 normal 1 0 let n0 normalize textureSample myTexture mySampler uvs xyz 2 0 1 0 return vec4 f32 n0 1 0 var sss 0 0 var n0 normalize textureSample myTexture mySampler uvs xyz 2 0 1 0 let num 65 for var i i32 0 i num i i 1 var off f32 i var dd 0 0001 if i 5 0 dd 0 001 if i 10 0 dd 0 002 let sx 1 0 rand off dd let sy 1 0 rand off 2000 0 dd var n1 normalize textureSample myTexture mySampler uvs vec2 f32 sx sy xyz 2 0 1 0 sss sss dot n0 n1 let fr 1 0 f32 num let cc 1 0 clamp 1 0 sss fr 520 2 0 0 1 0 return vec4 f32 cc cc cc 1 0 let s 0 002 let n0 normalize textureSample myTexture mySampler uvs xyz 2 0 1 0 let n1 normalize textureSample myTexture mySampler uvs vec2 f32 s s xyz 2 0 1 0 let n2 normalize textureSample myTexture mySampler uvs vec2 f32 s s xyz 2 0 1 0 let n3 normalize textureSample myTexture mySampler uvs vec2 f32 0 0 s xyz 2 0 1 0 let n4 normalize textureSample myTexture mySampler uvs vec2 f32 s 0 0 xyz 2 0 1 0 let r dot n0 n1 dot n0 n2 dot n0 n3 dot n0 n4 let cc 1 0 clamp 1 0 r 0 25 30 8 0 0 1 0 return vec4 f32 cc cc cc 1 0 const pipeline2 device createRenderPipeline layout device createPipelineLayout bindGroupLayouts sceneUniformBindGroupLayout2 vertex module device createShaderModule code vertWGSL2 entryPoint main fragment module device createShaderModule code fragWGSL2 entryPoint main targets format presentationFormat primitive topology triangle strip stripIndexFormat uint32 GPURenderPassDescriptor const renderPassDescription2 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 function xformMatrix xform translate rotate scale translate translate 0 0 0 rotate rotate 0 0 0 scale scale 1 1 1 mat4 fromTranslation translateMat translate mat4 fromXRotation rotateXMat rotate 0 mat4 fromYRotation rotateYMat rotate 1 mat4 fromZRotation rotateZMat rotate 2 mat4 fromScaling scaleMat scale mat4 multiply xform translateMat scaleMat mat4 multiply xform rotateXMat xform mat4 multiply xform rotateYMat xform mat4 multiply xform rotateZMat xform rotation 0 0 01 rotation 2 0 005 let translate middle x middle y middle z xformMatrix modelMatrix translate rotation null device queue writeBuffer uniformBuffer 0 modelMatrix const outputTexture context getCurrentTexture renderPassDescription colorAttachments 0 view context getCurrentTexture createView const commandEncoder device createCommandEncoder const renderPass commandEncoder beginRenderPass renderPassDescription renderPass setPipeline pipeline renderPass setVertexBuffer 0 normalBuffer renderPass setVertexBuffer 1 positionBuffer renderPass setIndexBuffer indexBuffer uint16 renderPass setBindGroup 0 sceneUniformBindGroup renderPass drawIndexed json faces length 1 renderPass end Copy the rendering results from the swapchain into cubeTexture commandEncoder copyTextureToTexture texture outputTexture texture storedTexture width presentationSize 0 height presentationSize 1 depthOrArrayLayers 1 device queue submit commandEncoder finish renderPassDescription2 colorAttachments 0 view context getCurrentTexture createView const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescription2 passEncoder setPipeline pipeline2 passEncoder setBindGroup 0 uniformBindGroup2 passEncoder draw 4 1 0 0 passEncoder end device queue submit commandEncoder finish requestAnimationFrame frame frame more controlled updates onmousemove function frame console log ready
ode back depthStencil format depth24plus depthWriteEnabled true depthCompare less const depthTexture device createTexture size canvas width canvas height 1 format depth24plus usage GPUTextureUsage RENDER_ATTACHMENT const renderPassDescription colorAttachments view undefined set late in the render loop loadOp clear clearValue 0 0 0 8 0 8 1 clear screen storeOp store depthStencilAttachment view depthTexture createView depthLoadOp clear depthClearValue 1 depthStoreOp store stencilLoadValue 0 stencilStoreOp store Copy the frame s rendering results into this texture and sample it on the next frame const storedTexture device createTexture size presentationSize format presentationFormat usage 0x2 0x4 0x10 GPUTextureUsage TEXTURE_BINDING GPUTextureUsage COPY_DST let textureSampler device createSampler minFilter linear magFilter linear const sceneUniformBindGroupLayout2 device createBindGroupLayout entries binding 0 visibility GPUShaderStage FRAGMENT sampler type filtering binding 1 visibility GPUShaderStage FRAGMENT texture sampleType float viewDimension 2d const uniformBindGroup2 device createBindGroup layout sceneUniformBindGroupLayout2 entries binding 0 resource textureSampler binding 1 resource storedTexture createView var vertWGSL2 struct VSOut builtin position Position vec4 f32 location 0 uvs vec2 f32 vertex fn main builtin vertex_index VertexIndex u32 VSOut var pos array vec2 f32 4 vec2 f32 1 0 1 0 vec2 f32 1 0 1 0 vec2 f32 1 0 1 0 vec2 f32 1 0 1 0 var vsOut VSOut vsOut Position vec4 f32 pos VertexIndex 0 9 0 0 1 0 vsOut uvs pos VertexIndex 1 0 0 5 return vsOut var fragWGSL2 fn rand n f32 f32 return fract sin n 43758 5453123 group 0 binding 0 var mySampler sampler group 0 binding 1 var myTexture texture_2d f32 fragment fn main location 0 uvs vec2 f32 location 0 vec4 f32 return textureSample myTexture mySampler uvs return vec4 f32 1 0 0 0 1 0 1 0 let n0 textureSample myTexture mySampler uvs xyz return vec4 f32 n0 1 0 let normal normalize n0 2 0 1 0 return vec4 f32 normal 1 0 let n0 normalize textureSample myTexture mySampler uvs xyz 2 0 1 0 return vec4 f32 n0 1 0 var sss 0 0 var n0 normalize textureSample myTexture mySampler uvs xyz 2 0 1 0 let num 65 for var i i32 0 i num i i 1 var off f32 i var dd 0 0001 if i 5 0 dd 0 001 if i 10 0 dd 0 002 let sx 1 0 rand off dd let sy 1 0 rand off 2000 0 dd var n1 normalize textureSample myTexture mySampler uvs vec2 f32 sx sy xyz 2 0 1 0 sss sss dot n0 n1 let fr 1 0 f32 num let cc 1 0 clamp 1 0 sss fr 520 2 0 0 1 0 return vec4 f32 cc cc cc 1 0 let s 0 002 let n0 normalize textureSample myTexture mySampler uvs xyz 2 0 1 0 let n1 normalize textureSample myTexture mySampler uvs vec2 f32 s s xyz 2 0 1 0 let n2 normalize textureSample myTexture mySampler uvs vec2 f32 s s xyz 2 0 1 0 let n3 normalize textureSample myTexture mySampler uvs vec2 f32 0 0 s xyz 2 0 1 0 let n4 normalize textureSample myTexture mySampler uvs vec2 f32 s 0 0 xyz 2 0 1 0 let r dot n0 n1 dot n0 n2 dot n0 n3 dot n0 n4 let cc 1 0 clamp 1 0 r 0 25 30 8 0 0 1 0 return vec4 f32 cc cc cc 1 0 const pipeline2 device createRenderPipeline layout device createPipelineLayout bindGroupLayouts sceneUniformBindGroupLayout2 vertex module device createShaderModule code vertWGSL2 entryPoint main fragment module device createShaderModule code fragWGSL2 entryPoint main targets format presentationFormat primitive topology triangle strip stripIndexFormat uint32 GPURenderPassDescriptor const renderPassDescription2 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 function xformMatrix xform translate rotate scale translate translate 0 0 0 rotate rotate 0 0 0 scale scale 1 1 1 mat4 fromTranslation translateMat translate mat4 fromXRotation rotateXMat rotate 0 mat4 fromYRotation rotateYMat rotate 1 mat4 fromZRotation rotateZMat rotate 2 mat4 fromScaling scaleMat scale mat4 multiply xform translateMat scaleMat mat4 multiply xform rotateXMat xform mat4 multiply xform rotateYMat xform mat4 multiply xform rotateZMat xform rotation 0 0 01 rotation 2 0 005 let translate middle x middle y middle z xformMatrix modelMatrix translate rotation null device queue writeBuffer uniformBuffer 0 modelMatrix const outputTexture context getCurrentTexture renderPassDescription colorAttachments 0 view context getCurrentTexture createView const commandEncoder device createCommandEncoder const renderPass commandEncoder beginRenderPass renderPassDescription renderPass setPipeline pipeline renderPass setVertexBuffer 0 normalBuffer renderPass setVertexBuffer 1 positionBuffer renderPass setIndexBuffer indexBuffer uint16 renderPass setBindGroup 0 sceneUniformBindGroup renderPass drawIndexed json faces length 1 renderPass end Copy the rendering results from the swapchain into cubeTexture commandEncoder copyTextureToTexture texture outputTexture texture storedTexture width presentationSize 0 height presentationSize 1 depthOrArrayLayers 1 device queue submit commandEncoder finish renderPassDescription2 colorAttachments 0 view context getCurrentTexture createView const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescription2 passEncoder setPipeline pipeline2 passEncoder setBindGroup 0 uniformBindGroup2 passEncoder draw 4 1 0 0 passEncoder end device queue submit commandEncoder finish requestAnimationFrame frame frame more controlled updates onmousemove function frame console log ready