WebGPU: Julat bucu memerlukan saiz penimbal yang lebih besar daripada saiz penimbal terikat

Question

Saya baru sahaja cuba menghantar pelbagai kedudukan bucu ke lorek bucu.

Ini ialah coretan kod JS saya:

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 mempunyai panjang 12, jadi 48 bait. Walau bagaimanapun, saya mendapat mesej ralat ini yang menyatakan bahawa saya memerlukan 192 bait:

Julat bucu (pertama: 0, kiraan: 12) memerlukan penimbal yang lebih besar (192) daripada saiz penimbal terikat (48) penimbal bucu pada slot 0, dengan langkah 16. - Pengekodan [RenderPassEncoder].Draw(12, 1, 0, 0).

Ini mungkin tidak berkaitan dengan soalan, tetapi untuk konteks, ini ialah program shader saya:

@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);
}

Ia tidak menggunakan tatasusunan puncak, tetapi saya hanya menggunakannya untuk menunjukkan sama ada semuanya berjalan tanpa ralat. Apabila saya menukar saiz penimbal pada baris 3 coretan daripada vertices.byteLength 更改为 368 ia berfungsi dengan baik dan menghasilkan segi tiga. Sebarang nilai di bawah 368 akan menyebabkan kegagalan.

Selepas ujian lanjut, saya mendapati bahawa menggandakan saiz Float32Array dengan menambahkan 4 apungan setiap bucu dan menukar langkah kepada 32 akan menyebabkan WebGPU menyatakan bahawa saya memerlukan 768 bait.

Answer 1

Anda tetapkan arrayStride kepada 32, yang bermaksud setiap bucu akan mengambil masa 32 bait (https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API#define_and_create_the_render_pipeline).

Daripada reka letak bucu anda, ini sepatutnya 16, kerana anda hanya menentukan satu format float32x4 = 16 bait.

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