WebGPU Example rendering to a texture then using that texture on the shape 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 400 canvas height 400 console log canvas width console log canvas height const adapter await navigator gpu requestAdapter const device await adapter requestDevice const context canvas getContext webgpu const devicePixelRatio window devicePixelRatio 1 const presentationSize canvas clientWidth devicePixelRatio canvas clientHeight devicePixelRatio context getPreferredFormat adapter no longer supported const presentationFormat navigator gpu getPreferredCanvasFormat context configure device format presentationFormat size presentationSize let vertWGSL struct Uniforms modelViewProjectionMatrix mat4x4 f32 binding 0 group 0 var uniform uniforms Uniforms struct VertexOutput builtin position Position vec4 f32 location 0 fragUV vec2 f32 location 1 fragPosition vec4 f32 vertex fn main location 0 position vec4 f32 location 1 uv vec2 f32 VertexOutput var output VertexOutput output Position uniforms modelViewProjectionMatrix position output fragUV uv output fragPosition 0 5 position vec4 f32 1 0 1 0 1 0 1 0 return output let fragWGSL binding 1 group 0 var mySampler sampler binding 2 group 0 var myTexture texture_2d f32 fragment fn main location 0 fragUV vec2 f32 location 1 fragPosition vec4 f32 location 0 vec4 f32 var texColor textureSample myTexture mySampler fragUV 0 8 vec2 f32 0 1 0 1 texColor r 1 0 texColor a 1 0 var f f32 if length texColor rgb vec3 f32 0 5 0 5 0 5 0 01 f 1 0 else f 0 0 return 1 0 f texColor f fragPosition context configure device format presentationFormat Specify we want both RENDER_ATTACHMENT and COPY_SRC since we will copy out of the swapchain texture usage GPUTextureUsage RENDER_ATTACHMENT GPUTextureUsage COPY_SRC size presentationSize const cubeVertexSize 4 10 Byte size of one cube vertex const cubePositionOffset 0 const cubeColorOffset 4 4 Byte offset of cube vertex color attribute const cubeUVOffset 4 8 const cubeVertexCount 36 const cubeVertexArray new Float32Array float4 position float4 color float2 uv 1 1 1 1 1 0 1 1 1 1 1 1 1 1 0 0 1 1 0 1 1 1 1 1 0 0 0 1 0 0 1 1 1 1 1 0 0 1 1 0 1 1 1 1 1 0 1 1 1 1 1 1 1 1 0 0 0 1 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 1 1 0 1 1 1 1 1 1 0 0 1 0 0 1 1 1 1 1 1 0 1 1 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 1 0 0 1 1 1 1 0 1 1 1 1 1 1 1 1 1 1 1 1 1 0 1 1 1 1 1 1 1 0 1 0 0 1 1 1 1 0 1 0 1 1 0 1 1 1 1 0 1 1 1 1 1 1 1 1 1 1 1 0 1 0 0 1 1 1 1 0 0 1 1 1 1 1 1 1 1 0 1 1 1 0 1 1 1 1 1 0 1 0 1 0 0 1 1 1 1 0 0 0 1 1 0 1 1 1 1 0 0 1 1 1 1 1 1 1 1 0 1 0 1 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 1 1 1 0 1 1 1 1 1 0 0 1 1 0 0 1 1 1 1 0 0 1 1 0 0 1 1 1 1 1 0 1 1 1 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 1 1 1 1 1 1 1 0 0 0 1 0 1 1 1 1 1 0 1 0 1 0 0 1 1 1 1 1 1 0 1 1 0 1 1 1 1 1 0 0 1 1 1 1 1 1 1 0 1 0 1 0 0 Create a vertex buffer from the cube data const verticesBuffer device createBuffer size cubeVertexArray byteLength usage GPUBufferUsage VERTEX mappedAtCreation true new Float32Array verticesBuffer getMappedRange set cubeVertexArray verticesBuffer unmap const sceneUniformBindGroupLayout device createBindGroupLayout entries binding 0 visibility GPUShaderStage VERTEX buffer type uniform binding 1 visibility GPUShaderStage FRAGMENT sampler type filtering binding 2 visibility GPUShaderStage FRAGMENT texture sampleType float sampleType float viewDimension 2d cube 3d cube const pipeline device createRenderPipeline layout device createPipelineLayout bindGroupLayouts sceneUniformBindGroupLayout vertex module device createShaderModule code vertWGSL entryPoint main buffers arrayStride cubeVertexSize attributes position shaderLocation 0 offset cubePositionOffset format float32x4 uv shaderLocation 1 offset cubeUVOffset format float32x2 fragment module device createShaderModule code fragWGSL entryPoint main targets format presentationFormat primitive topology triangle list Backface culling since the cube is solid piece of geometry Faces pointing away from the camera will be occluded by faces pointing toward the camera cullMode back Enable depth testing so that the fragment closest to the camera is rendered in front depthStencil depthWriteEnabled true depthCompare less format depth24plus const depthTexture device createTexture size presentationSize format depth24plus usage GPUTextureUsage RENDER_ATTACHMENT const uniformBufferSize 4 16 4x4 matrix const uniformBuffer device createBuffer size uniformBufferSize usage GPUBufferUsage UNIFORM GPUBufferUsage COPY_DST Copy the frame s rendering results into this texture and sample it on the next frame const cubeTexture device createTexture size presentationSize format presentationFormat usage 0x2 0x4 0x10 GPUTextureUsage TEXTURE_BINDING GPUTextureUsage COPY_DST Create a sampler with linear filtering for smooth interpolation const sampler device createSampler magFilter linear minFilter linear const uniformBindGroup device createBindGroup layout pipeline getBindGroupLayout 0 layout sceneUniformBindGroupLayout pipeline getBindGroupLayout 0 entries binding 0 resource buffer uniformBuffer binding 1 resource sampler binding 2 resource cubeTexture createView const renderPassDescriptor GPURenderPassDescriptor colorAttachments view undefined Assigned later loadValue r 0 5 g 0 5 b 0 5 a 1 0 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 depthLoadValue 1 0 depthStoreOp store stencilLoadValue 0 stencilStoreOp store const aspect presentationSize 0 presentationSize 1 const projectionMatrix mat4 create mat4 perspective projectionMatrix 2 Math PI 5 aspect 1 100 0 function getTransformationMatrix const viewMatrix mat4 create mat4 translate viewMatrix viewMatrix vec3 fromValues 0 0 4 const now Date now 1000 mat4 rotate viewMatrix viewMatrix 1 vec3 fromValues Math sin now Math cos now 0 const modelViewProjectionMatrix mat4 create mat4 multiply modelViewProjectionMatrix projectionMatrix viewMatrix return modelViewProjectionMatrix as Float32Array function frame const transformationMatrix getTransformationMatrix device queue writeBuffer uniformBuffer 0 transformationMatrix buffer transformationMatrix byteOffset transformationMatrix byteLength const swapChainTexture context getCurrentTexture renderPassDescriptor colorAttachments 0 view swapChainTexture createView const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder setBindGroup 0 uniformBindGroup passEncoder setVertexBuffer 0 verticesBuffer passEncoder draw cubeVertexCount 1 0 0 passEncoder endPass no longer supported passEncoder end Copy the rendering results from the swapchain into cubeTexture commandEncoder copyTextureToTexture texture swapChainTexture texture cubeTexture width presentationSize 0 height presentationSize 1 depthOrArrayLayers 1 device queue submit commandEncoder finish requestAnimationFrame frame frame console log move mouse over the image to update graphics onmousemove function frame console log done
ine device createRenderPipeline layout device createPipelineLayout bindGroupLayouts sceneUniformBindGroupLayout vertex module device createShaderModule code vertWGSL entryPoint main buffers arrayStride cubeVertexSize attributes position shaderLocation 0 offset cubePositionOffset format float32x4 uv shaderLocation 1 offset cubeUVOffset format float32x2 fragment module device createShaderModule code fragWGSL entryPoint main targets format presentationFormat primitive topology triangle list Backface culling since the cube is solid piece of geometry Faces pointing away from the camera will be occluded by faces pointing toward the camera cullMode back Enable depth testing so that the fragment closest to the camera is rendered in front depthStencil depthWriteEnabled true depthCompare less format depth24plus const depthTexture device createTexture size presentationSize format depth24plus usage GPUTextureUsage RENDER_ATTACHMENT const uniformBufferSize 4 16 4x4 matrix const uniformBuffer device createBuffer size uniformBufferSize usage GPUBufferUsage UNIFORM GPUBufferUsage COPY_DST Copy the frame s rendering results into this texture and sample it on the next frame const cubeTexture device createTexture size presentationSize format presentationFormat usage 0x2 0x4 0x10 GPUTextureUsage TEXTURE_BINDING GPUTextureUsage COPY_DST Create a sampler with linear filtering for smooth interpolation const sampler device createSampler magFilter linear minFilter linear const uniformBindGroup device createBindGroup layout pipeline getBindGroupLayout 0 layout sceneUniformBindGroupLayout pipeline getBindGroupLayout 0 entries binding 0 resource buffer uniformBuffer binding 1 resource sampler binding 2 resource cubeTexture createView const renderPassDescriptor GPURenderPassDescriptor colorAttachments view undefined Assigned later loadValue r 0 5 g 0 5 b 0 5 a 1 0 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 depthLoadValue 1 0 depthStoreOp store stencilLoadValue 0 stencilStoreOp store const aspect presentationSize 0 presentationSize 1 const projectionMatrix mat4 create mat4 perspective projectionMatrix 2 Math PI 5 aspect 1 100 0 function getTransformationMatrix const viewMatrix mat4 create mat4 translate viewMatrix viewMatrix vec3 fromValues 0 0 4 const now Date now 1000 mat4 rotate viewMatrix viewMatrix 1 vec3 fromValues Math sin now Math cos now 0 const modelViewProjectionMatrix mat4 create mat4 multiply modelViewProjectionMatrix projectionMatrix viewMatrix return modelViewProjectionMatrix as Float32Array function frame const transformationMatrix getTransformationMatrix device queue writeBuffer uniformBuffer 0 transformationMatrix buffer transformationMatrix byteOffset transformationMatrix byteLength const swapChainTexture context getCurrentTexture renderPassDescriptor colorAttachments 0 view swapChainTexture createView const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginRenderPass renderPassDescriptor passEncoder setPipeline pipeline passEncoder setBindGroup 0 uniformBindGroup passEncoder setVertexBuffer 0 verticesBuffer passEncoder draw cubeVertexCount 1 0 0 passEncoder endPass no longer supported passEncoder end Copy the rendering results from the swapchain into cubeTexture commandEncoder copyTextureToTexture texture swapChainTexture texture cubeTexture width presentationSize 0 height presentationSize 1 depthOrArrayLayers 1 device queue submit commandEncoder finish requestAnimationFrame frame frame console log move mouse over the image to update graphics onmousemove function frame console log done