WebGPU : la plage de sommets nécessite une taille de tampon supérieure à la taille du tampon lié

Question

Je viens d'essayer d'envoyer un tableau de positions de sommets au vertex shader.

Voici mon extrait de code JS :

const vertices = new Float32Array([0, 0.5, 0, 1, -0.5, -0.5, 0, 2, 0.5, -0.5, 0, 1]);
const vertexBuffer = device.createBuffer({
    // equal to 48
    size: vertices.byteLength,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(vertexBuffer, 0, vertices);

const vertexBuffers = [
    {
        attributes: [
            {
                shaderLocation: 0,
                offset: 0,
                format: "float32x4",
            },
        ],
        arrayStride: 16,
        stepMode: "vertex",
    },
];

Float32Array a une longueur de 12, donc 48 octets. Cependant, je reçois ce message d'erreur indiquant que j'ai besoin de 192 octets :

La plage de sommets (premier : 0, nombre : 12) nécessite un tampon plus grand (192) que la taille du tampon lié (48) du tampon de sommets à l'emplacement 0, avec une foulée de 16. - Encodage [RenderPassEncoder].Draw(12, 1, 0, 0).

Cela n'est peut-être pas pertinent par rapport à la question, mais pour le contexte, voici mon programme de shader :

@vertex
fn vMain(@location(0) vertexPosition: vec4<f32>, @builtin(vertex_index) vertexIndex: u32) -> @builtin(position) vec4<f32>  {
    var positions = array<vec4<f32>, 3>(
        vec4<f32>(0, 0.5, 0, 1),
        vec4<f32>(-0.5, -0.5, 0, 2),
        vec4<f32>(0.5, -0.5, 0, 1),
    );

    return positions[vertexIndex];
}

@fragment
fn fMain() -> @location(0) vec4<f32> {
    return vec4<f32>(1, 1, 1, 1);
}

Il n'utilise pas de tableau de sommets, mais je l'utilise uniquement pour montrer si tout se déroule sans erreur. Lorsque je modifie la taille du tampon sur la ligne 3 de l'extrait de vertices.byteLength 更改为 368, cela fonctionne bien et affiche un triangle. Toute valeur inférieure à 368 entraînera un échec.

Après des tests plus approfondis, j'ai découvert que doubler la taille du Float32Array en ajoutant 4 flotteurs par sommet et en modifiant la foulée à 32 amènerait WebGPU à déclarer que j'avais besoin de 768 octets.

Answer 1

Vous définissez arrayStride sur 32, ce qui signifie que chaque sommet prendra 32 octets (https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API#define_and_create_the_render_pipeline).

D'après la disposition de vos sommets, cela devrait être 16, puisque vous n'avez défini qu'un seul format float32x4 = 16 octets.

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