WebGPU Floor Grid Mouse Keyboards and Cameras Add a simple floor grid wire then some camera movement drag around using the left mouse button for rotation and the right mouse button for forward along the look direction from the camera 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 topology line list x z floor grid e g 10x10 grid of lines each 1 unit appart buildFloorGrid 1 0 10 function buildFloorGrid spacing numlines let vp for let x 0 x numlines x lines in the x direction vp push numlines spacing 0 5 x spacing vp push 0 0 vp push numlines spacing 0 5 vp push numlines spacing 0 5 x spacing vp push 0 0 vp push numlines spacing 0 5 for let z 0 z numlines z lines in the z direction vp push numlines spacing 0 5 vp push 0 0 vp push numlines spacing 0 5 z spacing vp push numlines spacing 0 5 vp push 0 0 vp push numlines spacing 0 5 z spacing var positions new Float32Array vp const vpositionBuffer device createBuffer size positions byteLength usage GPUBufferUsage VERTEX GPUBufferUsage COPY_DST device queue writeBuffer vpositionBuffer 0 positions return gbuffer vpositionBuffer size vp length 3 const vbuffer buildFloorGrid 1 0 100 var vertWGSL struct Uniforms modelViewProjectionMatrix mat4x4 f32 binding 0 group 0 var uniform uniforms Uniforms struct VSOut builtin position Position vec4 f32 vertex fn main location 0 inPos vec3 f32 VSOut var vsOut VSOut vsOut Position uniforms modelViewProjectionMatrix vec4 f32 inPos 1 0 return vsOut var fragWGSL fragment fn main location 0 vec4 f32 return vec4 f32 1 0 0 0 0 0 1 0 const projectionMatrix mat4 create let viewMatrix mat4 create const viewProjectionMatrix mat4 create mat4 perspective projectionMatrix Math PI 2 canvas width canvas height 0 01 1000 0 mat4 lookAt viewMatrix 0 4 4 0 0 0 0 1 0 mat4 multiply viewProjectionMatrix projectionMatrix viewMatrix const vertexUniformBuffer device createBuffer size 64 usage GPUBufferUsage UNIFORM GPUBufferUsage COPY_DST device queue writeBuffer vertexUniformBuffer 0 viewProjectionMatrix 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 pipelineLINELISTccw_POS_COL_NOR 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 fragment module device createShaderModule code fragWGSL entryPoint main targets format presentationFormat primitive topology line list frontFace ccw cullMode back stripIndexFormat undefined 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 function frame 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 vbuffer gbuffer renderPass draw vbuffer size 1 0 0 renderPass end device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame WebGPU Mouse Keyboards and Cameras MKC 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 let divp document createElement div document body appendChild divp let divm document createElement div document body appendChild divm document body style height 600px 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 topology line list x z floor grid e g 10x10 grid of lines each 1 unit appart buildFloorGrid 1 0 10 function buildFloorGrid spacing numlines let vp for let x 0 x numlines x lines in the x direction vp push numlines spacing 0 5 x spacing vp push 0 0 vp push numlines spacing 0 5 vp push numlines spacing 0 5 x spacing vp push 0 0 vp push numlines spacing 0 5 for let z 0 z numlines z lines in the z direction vp push numlines spacing 0 5 vp push 0 0 vp push numlines spacing 0 5 z spacing vp push numlines spacing 0 5 vp push 0 0 vp push numlines spacing 0 5 z spacing var positions new Float32Array vp const vpositionBuffer device createBuffer size positions byteLength usage GPUBufferUsage VERTEX GPUBufferUsage COPY_DST device queue writeBuffer vpositionBuffer 0 positions return gbuffer vpositionBuffer size vp length 3 const vbuffer buildFloorGrid 1 0 100 var vertWGSL struct Uniforms modelMatrix mat4x4 f32 viewMatrix mat4x4 f32 projMatrix mat4x4 f32 binding 0 group 0 var uniform uniforms Uniforms struct VSOut builtin position Position vec4 f32 vertex fn main location 0 inPos vec3 f32 VSOut var mvp uniforms projMatrix uniforms viewMatrix uniforms modelMatrix var vsOut VSOut vsOut Position mvp vec4 f32 inPos 1 0 return vsOut var fragWGSL fragment fn main location 0 vec4 f32 return vec4 f32 1 0 0 0 0 0 1 0 const projMatrix mat4 create let viewMatrix mat4 create const modelMatrix mat4 create mat4 perspective projMatrix Math PI 2 canvas width canvas height 0 01 1000 0 mat4 lookAt viewMatrix 0 4 4 0 0 0 0 1 0 mat4 identity modelMatrix const vertexUniformBuffer device createBuffer size 3 64 usage GPUBufferUsage UNIFORM GPUBufferUsage COPY_DST device queue writeBuffer vertexUniformBuffer 0 64 modelMatrix device queue writeBuffer vertexUniformBuffer 1 64 viewMatrix device queue writeBuffer vertexUniformBuffer 2 64 projMatrix 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 pipelineLINELISTccw_POS_COL_NOR 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 fragment module device createShaderModule code fragWGSL entryPoint main targets format presentationFormat primitive topology line list frontFace ccw cullMode back stripIndexFormat undefined 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 let viewangle x 0 y 0 z 0 let viewpos x 0 y 1 z 0 function frame viewMatrix mat4 create let xdir x viewMatrix 0 y viewMatrix 4 z viewMatrix 8 let ydir x viewMatrix 1 y viewMatrix 5 z viewMatrix 9 only use the x and y as we don t want to twist the camera gets too confusing stick to up down and left right mat4 rotate viewMatrix viewMatrix viewangle z vec3 fromValues 0 0 1 mat4 rotate viewMatrix viewMatrix viewangle x vec3 fromValues xdir x xdir y xdir z mat4 rotate viewMatrix viewMatrix viewangle y vec3 fromValues ydir x ydir y ydir z mat4 translate viewMatrix viewMatrix vec3 fromValues viewpos x viewpos y viewpos z device queue writeBuffer vertexUniformBuffer 1 64 viewMatrix 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 vbuffer gbuffer renderPass draw vbuffer size 1 0 0 renderPass end device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame Mouse input camera move around user input canvas addEventListener contextmenu e e preventDefault var startViewAngle x viewangle x y viewangle y z viewangle z var startViewPos x viewpos x y viewpos y z viewpos z var startMouseLocation x 0 y 0 var trackingMouseRot false var trackingMousePos false document onmousedown function event startMouseLocation x event clientX y event clientY startViewAngle x viewangle x y viewangle y z viewangle z startViewPos x viewpos x y viewpos y z viewpos z if event button 2 event button 1 right or middle button trackingMousePos true forward event return trackingMouseRot true document onmouseup function event trackingMouseRot false trackingMousePos false document onmousemove function event var x event clientX var y event clientY if trackingMousePos right or middle button forward event return if trackingMouseRot return viewangle y startViewAngle y startMouseLocation x x 0 005 viewangle x startViewAngle x startMouseLocation y y 0 005 function forward event var delta startMouseLocation y event clientY 0 02 var zdir x viewMatrix 2 y viewMatrix 6 z viewMatrix 10 console log zdir zdir divp innerText zdir zdir x toFixed 2 zdir y toFixed 2 zdir z toFixed 2 console log view viewMatrix viewpos x startViewPos x zdir x delta viewpos y startViewPos y zdir y delta viewpos z startViewPos z zdir z delta
topology line list x z floor grid e g 10x10 grid of lines each 1 unit appart buildFloorGrid 1 0 10 function buildFloorGrid spacing numlines let vp for let x 0 x numlines x lines in the x direction vp push numlines spacing 0 5 x spacing vp push 0 0 vp push numlines spacing 0 5 vp push numlines spacing 0 5 x spacing vp push 0 0 vp push numlines spacing 0 5 for let z 0 z numlines z lines in the z direction vp push numlines spacing 0 5 vp push 0 0 vp push numlines spacing 0 5 z spacing vp push numlines spacing 0 5 vp push 0 0 vp push numlines spacing 0 5 z spacing var positions new Float32Array vp const vpositionBuffer device createBuffer size positions byteLength usage GPUBufferUsage VERTEX GPUBufferUsage COPY_DST device queue writeBuffer vpositionBuffer 0 positions return gbuffer vpositionBuffer size vp length 3 const vbuffer buildFloorGrid 1 0 100 var vertWGSL struct Uniforms modelMatrix mat4x4 f32 viewMatrix mat4x4 f32 projMatrix mat4x4 f32 binding 0 group 0 var uniform uniforms Uniforms struct VSOut builtin position Position vec4 f32 vertex fn main location 0 inPos vec3 f32 VSOut var mvp uniforms projMatrix uniforms viewMatrix uniforms modelMatrix var vsOut VSOut vsOut Position mvp vec4 f32 inPos 1 0 return vsOut var fragWGSL fragment fn main location 0 vec4 f32 return vec4 f32 1 0 0 0 0 0 1 0 const projMatrix mat4 create let viewMatrix mat4 create const modelMatrix mat4 create mat4 perspective projMatrix Math PI 2 canvas width canvas height 0 01 1000 0 mat4 lookAt viewMatrix 0 4 4 0 0 0 0 1 0 mat4 identity modelMatrix const vertexUniformBuffer device createBuffer size 3 64 usage GPUBufferUsage UNIFORM GPUBufferUsage COPY_DST device queue writeBuffer vertexUniformBuffer 0 64 modelMatrix device queue writeBuffer vertexUniformBuffer 1 64 viewMatrix device queue writeBuffer vertexUniformBuffer 2 64 projMatrix 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 pipelineLINELISTccw_POS_COL_NOR 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 fragment module device createShaderModule code fragWGSL entryPoint main targets format presentationFormat primitive topology line list frontFace ccw cullMode back stripIndexFormat undefined 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 let viewangle x 0 y 0 z 0 let viewpos x 0 y 1 z 0 function frame viewMatrix mat4 create let xdir x viewMatrix 0 y viewMatrix 4 z viewMatrix 8 let ydir x viewMatrix 1 y viewMatrix 5 z viewMatrix 9 only use the x and y as we don t want to twist the camera gets too confusing stick to up down and left right mat4 rotate viewMatrix viewMatrix viewangle z vec3 fromValues 0 0 1 mat4 rotate viewMatrix viewMatrix viewangle x vec3 fromValues xdir x xdir y xdir z mat4 rotate viewMatrix viewMatrix viewangle y vec3 fromValues ydir x ydir y ydir z mat4 translate viewMatrix viewMatrix vec3 fromValues viewpos x viewpos y viewpos z device queue writeBuffer vertexUniformBuffer 1 64 viewMatrix 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 vbuffer gbuffer renderPass draw vbuffer size 1 0 0 renderPass end device queue submit commandEncoder finish if you want constant updates animated keep refreshing requestAnimationFrame frame frame Mouse input camera move around user input canvas addEventListener contextmenu e e preventDefault var startViewAngle x viewangle x y viewangle y z viewangle z var startViewPos x viewpos x y viewpos y z viewpos z var startMouseLocation x 0 y 0 var trackingMouseRot false var trackingMousePos false document onmousedown function event startMouseLocation x event clientX y event clientY startViewAngle x viewangle x y viewangle y z viewangle z startViewPos x viewpos x y viewpos y z viewpos z if event button 2 event button 1 right or middle button trackingMousePos true forward event return trackingMouseRot true document onmouseup function event trackingMouseRot false trackingMousePos false document onmousemove function event var x event clientX var y event clientY if trackingMousePos right or middle button forward event return if trackingMouseRot return viewangle y startViewAngle y startMouseLocation x x 0 005 viewangle x startViewAngle x startMouseLocation y y 0 005 function forward event var delta startMouseLocation y event clientY 0 02 var zdir x viewMatrix 2 y viewMatrix 6 z viewMatrix 10 console log zdir zdir divp innerText zdir zdir x toFixed 2 zdir y toFixed 2 zdir z toFixed 2 console log view viewMatrix viewpos x startViewPos x zdir x delta viewpos y startViewPos y zdir y delta viewpos z startViewPos z zdir z delta