WGPU高斯模糊实现遇Buffer越界、对齐及异步渲染异常问题

1. 非2^x尺寸图片的Buffer越界验证错误 #

问题原因 #

仅处理bytes_per_row的对齐还不够，WGPU要求缓冲区总字节数也必须是COPY_BYTES_PER_ROW_ALIGNMENT的整数倍。非2的幂次尺寸的图片，原始总字节数（width*height*bytes_per_pixel）往往无法满足对齐要求，导致实际分配的缓冲区大小小于拷贝所需的字节数，触发越界错误。

解决方案 #

计算缓冲区大小的时候，同时对齐每行字节数和总字节数，并且拷贝像素数据时按对齐后的行长度填充（每行末尾补0至对齐长度）：

use wgpu::COPY_BYTES_PER_ROW_ALIGNMENT;

// 计算对齐后的行字节数和总缓冲区大小
fn get_aligned_buffer_size(width: u32, height: u32, bytes_per_pixel: u32) -> (u32, u64) {
    // 对齐每行字节数
    let bytes_per_row = (width * bytes_per_pixel + COPY_BYTES_PER_ROW_ALIGNMENT - 1) 
        / COPY_BYTES_PER_ROW_ALIGNMENT * COPY_BYTES_PER_ROW_ALIGNMENT;
    // 总大小按行对齐后计算，确保是对齐值的整数倍
    let total_size = bytes_per_row as u64 * height as u64;
    (bytes_per_row, total_size)
}

// 示例：将原始像素数据转换为对齐后的缓冲区数据
fn align_pixels(raw_pixels: &[u8], width: u32, height: u32, bytes_per_pixel: u32) -> Vec<u8> {
    let (bytes_per_row, _) = get_aligned_buffer_size(width, height, bytes_per_pixel);
    let mut aligned_data = Vec::with_capacity(bytes_per_row as usize * height as usize);
    
    for y in 0..height {
        let start = (y * width * bytes_per_pixel) as usize;
        let end = start + (width * bytes_per_pixel) as usize;
        // 复制当前行原始数据
        aligned_data.extend_from_slice(&raw_pixels[start..end]);
        // 补0到对齐后的行长度
        let padding = bytes_per_row as usize - (width * bytes_per_pixel) as usize;
        aligned_data.extend(std::iter::repeat(0).take(padding));
    }
    
    aligned_data
}

创建缓冲区时，使用计算出的total_size作为缓冲区大小，而非原始像素总长度。

2. 高模糊半径值时图像显示异常 #

问题原因 #

两种常见可能：

• GPU命令执行未同步：WGPU命令队列异步执行，提交命令后立刻读取/使用结果时，GPU可能尚未完成模糊计算，导致读取到旧数据或未初始化数据，高半径计算耗时更长，问题更明显。
• 模糊采样边界处理不当：高半径时采样点会超出纹理原始范围，若未做边界 clamp 处理，会采样到无效数据，导致图像异常。

解决方案 #

方案1：强制同步GPU命令执行

提交命令后，等待队列完成所有已提交的工作，确保缓冲区写入完成：

use futures_intrusive::channel::shared::oneshot_channel;

// 提交命令缓冲区到队列
queue.submit(Some(&command_buffer));

// 创建通道等待工作完成
let (sender, receiver) = oneshot_channel();
queue.on_submitted_work_done(move || {
    sender.send(()).unwrap();
});

// 阻塞等待GPU完成（同步上下文下使用）
receiver.receive().unwrap();

如果是异步上下文，直接await queue.on_submitted_work_done()返回的future即可。

方案2：修复纹理采样边界问题

在片元着色器中使用textureSampleClamp进行采样，或者设置采样器的地址模式为ClampToEdge，避免超出纹理范围的采样：

// 片元着色器示例：使用textureSampleClamp
@fragment
fn fs_main(in: VertexOutput) -> @location(0) vec4<f32> {
    let mut color = vec4<f32>(0.0);
    let mut weight_sum = 0.0;
    
    // 遍历模糊核采样点
    for i in -BLUR_RADIUS..BLUR_RADIUS {
        let offset = vec2<f32>(f32(i) * 1.0 / TEXTURE_WIDTH, 0.0);
        // 使用clamp采样，避免超出纹理边界
        let sample_color = textureSampleClamp(input_texture, sampler, in.uv + offset);
        let weight = calculate_weight(i); // 自定义权重计算函数
        color += sample_color * weight;
        weight_sum += weight;
    }
    
    return color / weight_sum;
}

或者在创建采样器时设置地址模式：

let sampler = device.create_sampler(&wgpu::SamplerDescriptor {
    address_mode_u: wgpu::AddressMode::ClampToEdge,
    address_mode_v: wgpu::AddressMode::ClampToEdge,
    mag_filter: wgpu::FilterMode::Linear,
    min_filter: wgpu::FilterMode::Linear,
    ..Default::default()
});

补充：已解决的bytes_per_row对齐问题回顾 #

确认bytes_per_row的计算方式正确，即向上取整到COPY_BYTES_PER_ROW_ALIGNMENT的整数倍，这是WGPU缓冲区拷贝的基本要求，也是后续解决其他问题的基础。

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