如何在GLSL中无需添加填充成员实现Uniform Buffer的16字节对齐？

你遇到的BUFFER_BINDINGS_NOT_16_BYTE_ALIGNED错误，本质是WebGPU要求Uniform Buffer遵循std140布局的强制对齐规则——每个Uniform块的总大小必须是16字节的倍数。不用在GLSL里加冗余padding成员的话，有两种更优雅的处理方式：

1. CPU端手动控制缓冲区大小与数据填充 #

保持GLSL的原定义不变：

layout(set=0, binding=2, std140)
uniform TexSize {
    ivec2 dimensions;
};

在创建wgpu Buffer时，不要只分配ivec2的8字节大小，而是将缓冲区大小向上对齐到16字节。以Rust代码为例：

use wgpu::BufferDescriptor;
use glam::IVec2;

let tex_size = IVec2::new(1920, 1080);
// 计算对齐后的缓冲区大小：向上取整到16字节的倍数
let buffer_size = std::mem::size_of::<IVec2>().next_multiple_of(16);

let buffer = device.create_buffer(&BufferDescriptor {
    label: Some("TexSize Uniform Buffer"),
    size: buffer_size as u64,
    usage: wgpu::BufferUsages::UNIFORM | wgpu::BufferUsages::COPY_DST,
    mapped_at_creation: false,
});

// 将数据写入缓冲区的前8字节，剩余8字节无需处理（或填0）
queue.write_buffer(&buffer, 0, bytemuck::cast_slice(&[tex_size]));

这种方式把对齐逻辑放到CPU端，GLSL代码保持简洁，完全符合std140的规则。

2. 使用WGSL替代GLSL（如果项目允许） #

如果可以改用WGSL编写着色器，直接用@align(16)修饰结构体，无需额外填充：

@group(0) @binding(2)
struct TexSize {
    @align(16) dimensions: vec2<i32>,
};
@group(0) @binding(2) var<uniform> texSize: TexSize;

WGSL的对齐修饰符可以更灵活地控制结构体的对齐要求，避免冗余成员。

需要注意的是：无论哪种方式，都必须保证CPU端传入的Uniform Buffer大小是16字节的倍数，这是WebGL/WebGPU底层的硬件限制，无法绕过。

内容的提问来源于stack exchange，提问作者sak