WebGPU Example Shadow mapping don t underestimage the importance of shadows Minimum working example put the light source on the right so the left side should be in shadow i e it can t see the light source Includes extra information also store the depth information in an output texture shadow pass However you can grab the depth details directly from the depth buffer you just redirect the depth buffer to the next phase 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 dist 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 shadowMapTextureSize 2048 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 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 lightViewMatrix mat4 create const lightProjMatrix mat4 create const modelMatrix mat4 create const rotation 0 0 0 mat4 perspective projectionMatrix Math PI 2 canvas width canvas height 0 01 100 0 mat4 lookAt viewMatrix 0 0 30 0 0 0 0 1 0 mat4 lookAt lightViewMatrix 50 0 0 0 0 1 0 0 0 0 1 0 mat4 perspective lightProjMatrix Math PI 2 canvas width canvas height 0 01 100 0 const left 100 const right 100 const bottom 100 const top 100 const near 200 const far 300 mat4 ortho lightProjMatrix left right bottom top near far Declare buffer handles const uniformBuffer device createBuffer size 64 5 mat4x4 64 usage GPUBufferUsage UNIFORM GPUBufferUsage COPY_DST device queue writeBuffer uniformBuffer 0 modelMatrix device queue writeBuffer uniformBuffer 64 viewMatrix device queue writeBuffer uniformBuffer 128 projectionMatrix device queue writeBuffer uniformBuffer 192 lightViewMatrix device queue writeBuffer uniformBuffer 256 lightProjMatrix 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 modelProj mat4x4 f32 lightView mat4x4 f32 lightProj 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 vec4 f32 vertex fn main location 0 normal vec3 f32 location 1 inPos vec3 f32 VSOut var vsOut VSOut var lmvp uniforms lightProj uniforms lightView uniforms modelMatrix vsOut Position lmvp vec4 f32 inPos 1 0 vsOut pos lmvp vec4 f32 inPos 1 0 let n normalize normal vsOut normal uniforms modelMatrix vec4 f32 n 0 0 xyz return vsOut const fragWGSL struct GfxTextureOutput location 0 tex0 vec4 f32 fragment fn main location 0 normal vec3 f32 location 1 pos vec4 f32 GfxTextureOutput var depth pos z pos w depth depth 0 5 0 5 var out GfxTextureOutput out tex0 vec4 f32 depth depth depth 1 0 return out const positions new Float32Array json vertices let normals new Float32Array json normals const indices new Uint16Array json faces if you 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 gfxTexture0 primitive topology triangle list frontFace ccw cullMode back depthStencil format depth24plus format depth32float depthWriteEnabled true depthCompare less const depthTexture device createTexture size shadowMapTextureSize shadowMapTextureSize 1 format depth32float format depth24plus format depth24plus usage 0x10 0x04 GPUTextureUsage RENDER_ATTACHMENT GPUTextureUsage TEXTURE_BINDING var depthTextureView depthTexture createView Graphics buffer texture render targets const gfxTexture0 device createTexture size shadowMapTextureSize shadowMapTextureSize 1 usage 0x10 0x04 GPUTextureUsage RENDER_ATTACHMENT GPUTextureUsage TEXTURE_BINDING format presentationFormat const gfxTexureView0 gfxTexture0 createView const renderPassDescription set colorattachment views in the frame update colorAttachments view gfxTexureView0 loadOp clear clearValue 0 0 0 8 0 8 1 storeOp store depthStencilAttachment view depthTextureView depthLoadOp clear depthClearValue 1 depthStoreOp store stencilLoadValue 0 stencilStoreOp store pass 2 let textureSampler device createSampler minFilter linear magFilter linear let shadowSampler device createSampler compare less const sceneUniformBindGroupLayout2 device createBindGroupLayout entries binding 0 visibility GPUShaderStage VERTEX buffer type uniform binding 1 visibility GPUShaderStage FRAGMENT sampler type filtering binding 1 visibility GPUShaderStage FRAGMENT sampler type depth binding 2 visibility GPUShaderStage FRAGMENT texture sampleType float viewDimension 2d binding 3 visibility GPUShaderStage FRAGMENT texture sampleType depth viewDimension 2d const uniformBindGroup2 device createBindGroup layout sceneUniformBindGroupLayout2 entries binding 0 resource buffer uniformBuffer binding 1 resource textureSampler binding 2 resource gfxTexureView0 binding 3 resource depthTextureView var vertWGSL2 struct Uniforms modelMatrix mat4x4 f32 modelView mat4x4 f32 modelProj mat4x4 f32 lightView mat4x4 f32 lightProj 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 location 2 lpos vec4 f32 vertex fn main location 0 normal vec3 f32 location 1 inPos vec3 f32 VSOut var vsOut VSOut var mvp uniforms modelProj uniforms modelView uniforms modelMatrix var lmvp uniforms lightProj uniforms lightView uniforms modelMatrix var outCPosition mvp vec4 f32 inPos 1 0 var outLPosition lmvp vec4 f32 inPos 1 0 outLPosition z outLPosition z 2 4 outLPosition z outLPosition z 0 05 vsOut lpos outLPosition vsOut Position mvp vec4 f32 inPos 1 0 let n normalize normal vsOut normal uniforms modelMatrix vec4 f32 n 0 0 xyz return vsOut var fragWGSL2 group 0 binding 1 var mySampler sampler group 0 binding 2 var myTexture0 texture_2d f32 group 0 binding 3 var myTexture1 texture_depth_2d fragment fn main location 0 normal vec3 f32 location 1 pos vec3 f32 location 2 lpos vec4 f32 location 0 vec4 f32 var ProjectionCoords lpos xyz lpos w var UVCoords vec2 f32 0 0 0 0 UVCoords x 0 5 ProjectionCoords x 0 5 UVCoords y 0 5 ProjectionCoords y 0 5 UVCoords ProjectionCoords xy vec2 f32 0 5 0 5 vec2 f32 0 5 0 5 var depth textureSample myTexture0 mySampler UVCoords xy x depth stored as tex var depth textureSample myTexture1 mySampler UVCoords xy depth buffer var shadow 1 0 ProjectionCoords z ProjectionCoords z 0 00001 if lpos w 0 0 if depth ProjectionCoords z shadow 0 5 var outColour vec4 f32 0 0 1 0 0 0 1 0 shadow var diff dot normalize normal normalize vec3 f32 0 9 0 1 0 0 outColour outColour diff outColour a 1 0 return outColour const depthTexture2 device createTexture size canvas width canvas height 1 format depth32float format depth24plus format depth24plus usage GPUTextureUsage RENDER_ATTACHMENT GPUTextureUsage TEXTURE_BINDING const pipeline2 device createRenderPipeline layout device createPipelineLayout bindGroupLayouts sceneUniformBindGroupLayout2 vertex module device createShaderModule code vertWGSL2 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 fragWGSL2 entryPoint main targets format presentationFormat primitive topology triangle list frontFace ccw cullMode back depthStencil format depth24plus depthWriteEnabled true depthCompare less 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 depthStencilAttachment view depthTexture2 createView depthLoadOp clear depthClearValue 1 depthStoreOp store stencilLoadValue 0 stencilStoreOp 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 1 0 005 rotation 2 0 001 let translate middle x middle y middle z xformMatrix modelMatrix translate rotation null device queue writeBuffer uniformBuffer 0 modelMatrix 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 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 setVertexBuffer 0 normalBuffer passEncoder setVertexBuffer 1 positionBuffer passEncoder setIndexBuffer indexBuffer uint16 passEncoder setBindGroup 0 uniformBindGroup2 passEncoder drawIndexed json faces length 1 passEncoder end device queue submit commandEncoder finish requestAnimationFrame frame frame console log ready
rmat depth24plus usage 0x10 0x04 GPUTextureUsage RENDER_ATTACHMENT GPUTextureUsage TEXTURE_BINDING var depthTextureView depthTexture createView Graphics buffer texture render targets const gfxTexture0 device createTexture size shadowMapTextureSize shadowMapTextureSize 1 usage 0x10 0x04 GPUTextureUsage RENDER_ATTACHMENT GPUTextureUsage TEXTURE_BINDING format presentationFormat const gfxTexureView0 gfxTexture0 createView const renderPassDescription set colorattachment views in the frame update colorAttachments view gfxTexureView0 loadOp clear clearValue 0 0 0 8 0 8 1 storeOp store depthStencilAttachment view depthTextureView depthLoadOp clear depthClearValue 1 depthStoreOp store stencilLoadValue 0 stencilStoreOp store pass 2 let textureSampler device createSampler minFilter linear magFilter linear let shadowSampler device createSampler compare less const sceneUniformBindGroupLayout2 device createBindGroupLayout entries binding 0 visibility GPUShaderStage VERTEX buffer type uniform binding 1 visibility GPUShaderStage FRAGMENT sampler type filtering binding 1 visibility GPUShaderStage FRAGMENT sampler type depth binding 2 visibility GPUShaderStage FRAGMENT texture sampleType float viewDimension 2d binding 3 visibility GPUShaderStage FRAGMENT texture sampleType depth viewDimension 2d const uniformBindGroup2 device createBindGroup layout sceneUniformBindGroupLayout2 entries binding 0 resource buffer uniformBuffer binding 1 resource textureSampler binding 2 resource gfxTexureView0 binding 3 resource depthTextureView var vertWGSL2 struct Uniforms modelMatrix mat4x4 f32 modelView mat4x4 f32 modelProj mat4x4 f32 lightView mat4x4 f32 lightProj 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 location 2 lpos vec4 f32 vertex fn main location 0 normal vec3 f32 location 1 inPos vec3 f32 VSOut var vsOut VSOut var mvp uniforms modelProj uniforms modelView uniforms modelMatrix var lmvp uniforms lightProj uniforms lightView uniforms modelMatrix var outCPosition mvp vec4 f32 inPos 1 0 var outLPosition lmvp vec4 f32 inPos 1 0 outLPosition z outLPosition z 2 4 outLPosition z outLPosition z 0 05 vsOut lpos outLPosition vsOut Position mvp vec4 f32 inPos 1 0 let n normalize normal vsOut normal uniforms modelMatrix vec4 f32 n 0 0 xyz return vsOut var fragWGSL2 group 0 binding 1 var mySampler sampler group 0 binding 2 var myTexture0 texture_2d f32 group 0 binding 3 var myTexture1 texture_depth_2d fragment fn main location 0 normal vec3 f32 location 1 pos vec3 f32 location 2 lpos vec4 f32 location 0 vec4 f32 var ProjectionCoords lpos xyz lpos w var UVCoords vec2 f32 0 0 0 0 UVCoords x 0 5 ProjectionCoords x 0 5 UVCoords y 0 5 ProjectionCoords y 0 5 UVCoords ProjectionCoords xy vec2 f32 0 5 0 5 vec2 f32 0 5 0 5 var depth textureSample myTexture0 mySampler UVCoords xy x depth stored as tex var depth textureSample myTexture1 mySampler UVCoords xy depth buffer var shadow 1 0 ProjectionCoords z ProjectionCoords z 0 00001 if lpos w 0 0 if depth ProjectionCoords z shadow 0 5 var outColour vec4 f32 0 0 1 0 0 0 1 0 shadow var diff dot normalize normal normalize vec3 f32 0 9 0 1 0 0 outColour outColour diff outColour a 1 0 return outColour const depthTexture2 device createTexture size canvas width canvas height 1 format depth32float format depth24plus format depth24plus usage GPUTextureUsage RENDER_ATTACHMENT GPUTextureUsage TEXTURE_BINDING const pipeline2 device createRenderPipeline layout device createPipelineLayout bindGroupLayouts sceneUniformBindGroupLayout2 vertex module device createShaderModule code vertWGSL2 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 fragWGSL2 entryPoint main targets format presentationFormat primitive topology triangle list frontFace ccw cullMode back depthStencil format depth24plus depthWriteEnabled true depthCompare less 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 depthStencilAttachment view depthTexture2 createView depthLoadOp clear depthClearValue 1 depthStoreOp store stencilLoadValue 0 stencilStoreOp 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 1 0 005 rotation 2 0 001 let translate middle x middle y middle z xformMatrix modelMatrix translate rotation null device queue writeBuffer uniformBuffer 0 modelMatrix 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 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 setVertexBuffer 0 normalBuffer passEncoder setVertexBuffer 1 positionBuffer passEncoder setIndexBuffer indexBuffer uint16 passEncoder setBindGroup 0 uniformBindGroup2 passEncoder drawIndexed json faces length 1 passEncoder end device queue submit commandEncoder finish requestAnimationFrame frame frame console log ready