WebGPU Example Simple uncluttered example no libraries just raw WebGPU Key details Loading model index buffer faces vertices normals depth buffer shaders Transforms uniforms document body style height 600px test models armadillo json beast json beetle alt json cow json fandisk json happy json horse json igea json lucy json max planck json ogre json spot json stanford bunny json teapot json xyzrgb_dragon json cheburashka json skull json get some model data use json as it s easy to load setup let response await fetch var scripts sphere 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 600 canvas height 600 const adapter await navigator gpu requestAdapter const device await adapter requestDevice const context canvas getContext webgpu const presentationSize canvas width window devicePixelRatio canvas height window devicePixelRatio context getPreferredFormat adapter no longer supported const presentationFormat navigator gpu getPreferredCanvasFormat 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 viewProjectionMatrix mat4 create const modelRotation 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 5 0 0 0 0 1 0 mat4 multiply viewProjectionMatrix projectionMatrix viewMatrix const uniformData new Float32Array ModelViewProjection Matrix Identity 1 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 1 0 Declare buffer handles let uniformBuffer createBuffer uniformData GPUBufferUsage UNIFORM GPUBufferUsage COPY_DST const uniformBuffer device createBuffer size 192 3 x mat4x4 3x64 192 usage GPUBufferUsage UNIFORM GPUBufferUsage COPY_DST device queue writeBuffer uniformBuffer 64 viewProjectionMatrix 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 context configure device device format presentationFormat size presentationSize const vertWGSL struct Uniforms modelMatrix mat4x4 f32 modelViewProjectionMatrix mat4x4 f32 modelRotation mat4x4 f32 binding 0 group 0 var uniform uniforms Uniforms struct VSOut builtin position Position vec4 f32 location 0 position vec3 f32 location 1 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 position uniforms modelMatrix vec4 f32 inPos 1 0 xyz let n normalize normal let tiM uniforms modelRotation 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 const fragWGSL fragment fn main location 0 position vec3 f32 location 1 normal vec3 f32 location 0 vec4 f32 color channels are clamped 0 1 0 0 0 is black and 1 1 1 is completely white normalized vector components are in the range 1 1 normal facing the camera 0 0 1 should be rgb values 0 5 0 5 1 0 let normalCol normalize normal 0 5 0 5 return vec4 f32 normalCol 1 0 1 0 let positionCol abs normalize position return vec4 f32 positionCol 1 0 1 0 let diffuse max 0 0 dot normal vec3 f32 0 0 0 0 1 0 return vec4 f32 diffuse diffuse diffuse 1 0 return vec4 f32 1 0 0 0 0 0 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 texture device createTexture size presentationSize sampleCount 4 format presentationFormat usage GPUTextureUsage RENDER_ATTACHMENT const view texture createView const depthTexture device createTexture size canvas width canvas height 1 format depth24plus usage GPUTextureUsage RENDER_ATTACHMENT const renderPassDescription colorAttachments view context getCurrentTexture createView loadValue 0 0 0 8 0 8 1 clear screen loadOp clear clearValue 0 0 0 8 0 8 1 clear screen storeOp store depthStencilAttachment view depthTexture createView depthLoadOp clear depthClearValue 1 depthStoreOp store depthLoadValue 1 depthStoreOp store stencilLoadValue 0 stencilStoreOp store function frame function xformMatrix xform translate rotate scale xrot 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 mat4 multiply xrot rotateXMat scaleMat mat4 multiply xrot rotateYMat xrot mat4 multiply xrot rotateZMat xrot rotation 0 0 01 rotation 2 0 005 let translate middle x middle y middle z xformMatrix modelMatrix translate rotation null modelRotation device queue writeBuffer uniformBuffer 0 modelMatrix device queue writeBuffer uniformBuffer 128 modelRotation renderPassDescription colorAttachments 0 view context getCurrentTexture createView const commandEncoder device createCommandEncoder const renderPass commandEncoder beginRenderPass renderPassDescription renderPass setPipeline pipeline renderPass setVertexBuffer 0 positionBuffer renderPass setVertexBuffer 1 normalBuffer renderPass setIndexBuffer indexBuffer uint16 renderPass setBindGroup 0 sceneUniformBindGroup renderPass drawIndexed json faces length 1 renderPass endPass no longer supported renderPass end device queue submit commandEncoder finish requestAnimationFrame frame frame more controlled updates onmousemove function frame console log ready
ized vector components are in the range 1 1 normal facing the camera 0 0 1 should be rgb values 0 5 0 5 1 0 let normalCol normalize normal 0 5 0 5 return vec4 f32 normalCol 1 0 1 0 let positionCol abs normalize position return vec4 f32 positionCol 1 0 1 0 let diffuse max 0 0 dot normal vec3 f32 0 0 0 0 1 0 return vec4 f32 diffuse diffuse diffuse 1 0 return vec4 f32 1 0 0 0 0 0 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 texture device createTexture size presentationSize sampleCount 4 format presentationFormat usage GPUTextureUsage RENDER_ATTACHMENT const view texture createView const depthTexture device createTexture size canvas width canvas height 1 format depth24plus usage GPUTextureUsage RENDER_ATTACHMENT const renderPassDescription colorAttachments view context getCurrentTexture createView loadValue 0 0 0 8 0 8 1 clear screen loadOp clear clearValue 0 0 0 8 0 8 1 clear screen storeOp store depthStencilAttachment view depthTexture createView depthLoadOp clear depthClearValue 1 depthStoreOp store depthLoadValue 1 depthStoreOp store stencilLoadValue 0 stencilStoreOp store function frame function xformMatrix xform translate rotate scale xrot 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 mat4 multiply xrot rotateXMat scaleMat mat4 multiply xrot rotateYMat xrot mat4 multiply xrot rotateZMat xrot rotation 0 0 01 rotation 2 0 005 let translate middle x middle y middle z xformMatrix modelMatrix translate rotation null modelRotation device queue writeBuffer uniformBuffer 0 modelMatrix device queue writeBuffer uniformBuffer 128 modelRotation renderPassDescription colorAttachments 0 view context getCurrentTexture createView const commandEncoder device createCommandEncoder const renderPass commandEncoder beginRenderPass renderPassDescription renderPass setPipeline pipeline renderPass setVertexBuffer 0 positionBuffer renderPass setVertexBuffer 1 normalBuffer renderPass setIndexBuffer indexBuffer uint16 renderPass setBindGroup 0 sceneUniformBindGroup renderPass drawIndexed json faces length 1 renderPass endPass no longer supported renderPass end device queue submit commandEncoder finish requestAnimationFrame frame frame more controlled updates onmousemove function frame console log ready