WebGPU: 정점 범위에는 바인딩된 버퍼 크기보다 큰 버퍼 크기가 필요합니다.

Question

방금 정점 셰이더에 정점 위치 배열을 보내려고 했습니다.

이것은 내 JS 코드 조각입니다:

으아악

Float32Array의 길이는 12이므로 48바이트입니다. 그러나 192바이트가 필요하다는 오류 메시지가 나타납니다.

정점 범위(첫 번째: 0, 개수: 12)에는 슬롯 0에 있는 정점 버퍼의 바운드 버퍼 크기(48)보다 더 큰 버퍼(192)가 필요하며 스트라이드는 16입니다. - [RenderPassEncoder].Draw(12, 1, 0, 0)를 인코딩합니다.

질문과 관련이 없을 수도 있지만 맥락상 이것은 내 셰이더 프로그램입니다.

으아악

정점 배열을 사용하지 않고, 모든 것이 오류 없이 실행되는지 보여주기 위해서만 사용합니다. vertices.byteLength 更改为 368 코드 조각의 3번째 줄에서 버퍼 크기를 변경하면 제대로 작동하고 삼각형이 렌더링됩니다. 368 미만의 값은 오류를 발생시킵니다.

추가 테스트 후에 정점당 4개의 부동소수점을 추가하고 스트라이드를 32로 변경하여 Float32Array의 크기를 두 배로 늘리면 WebGPU에서 768바이트가 필요하다고 명시하게 된다는 사실을 발견했습니다.

Answer 1

arrayStride를 32로 설정하면 각 정점이 32바이트를 차지한다는 뜻입니다(https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API#define_and_create_the_render_pipeline).

정점 레이아웃에서 하나의 형식(float32x4 = 16바이트)만 정의했으므로 이 값은 16이어야 합니다.

오류 메시지에서 (Draw(12, 1, 0, 0)) 来看，您似乎正在尝试绘制 12 个顶点。这意味着预期的总缓冲区大小为：12*32 = 368。根据您的格式，这可能应该是 Draw(3, 1, 0, 0) 。这样你的 vertexBuffer 就可以被分割成 3 个顶点，每个顶点的位置值为 vec4<f32>