From 0 to glTF with WebGPU: Rendering the First glTF Mesh

[Twinklebear]

Ask any questions or post comments here for about the "Rendering the First glTF Mesh" post

[cmhhelgeson]

Hi, quick question, I was wondering what the primitive.positions.length property represents in the GLTFPrimitiveClass's render function. As I understand it, the positions property in the GLTFPrimitive Class represent a GLTFAccessor instance for the positions information in the buffer. However, in the current iteration of the GLTFAccessor Class, it doesn't seem like GLTFAccessor has a .length property, even though it is referenced when we are setting the VertexBuffer in GLTFPrimitive.render. Is this a mistake or am I missing something?

[Twinklebear]

No worries, I just dug into the code a bit now and it looks like there are two issues:

• The main issue looks to be here: https://github.com/cmhhelgeson/webgpu-samples/blob/main/src/utils/glbUtils.ts#L441 , it looks like for TypeScript (or just the DataView object) it should be 28 + jsonHeader.getUint32(12, true). That fixed the main issue I was seeing where the vertex/index/etc binary data was not right, since the binary chunk was not created at the right offset.
• The default camera position is hiding the avocado, so in testing I also commented out applying the camera transform here: https://github.com/cmhhelgeson/webgpu-samples/blob/main/src/sample/gltfViewer/gltf.vert.wgsl#L19 , changing the code to:

  output.Position = vec4<f32>(input.position, 1.0);
  

with those changes I can get an image of the Avocado, though of course in a very small form since the camera is not positioned (fortunately, the avocado seems to render ok directly to normalized device coords).

[cmhhelgeson]

Weird, why would the projectionMatrix be hiding the model?

[Twinklebear]

It could be that the projection+view matrix is not being computed or passed properly (so maybe it 0's out all vertices or makes them NaN or etc.), or simply that the camera is looking away from the model by default, or is zoomed out far enough that it's not visible.

[cmhhelgeson]

Came back to it and got it working.

GLTF.Viewer.-.WGSL.Shader.Depot.-.Google.Chrome.2023-08-07.13-16-54.mp4

[Twinklebear]

Looking good!