WebGPU 实现 r32float 纹理双线性过滤：从硬件扩展到 WGSL 手动插值

在从 WebGL 迁移到 WebGPU 的过程中，许多开发者会遇到一个棘手的规范限制：默认情况下，WebGPU 不允许对 32 位浮点格式（如 r32float、rgba32float）的纹理进行双线性（Linear）过滤。

如果你强行将一个 minFilter 或 magFilter 设置为 'linear' 的采样器（Sampler）与 r32float 纹理配对使用，WebGPU 会在创建绑定组（BindGroup）或渲染管线时直接抛出验证错误（Validation Error）：

> The texture compatibility class of format 'r32float' does not support filtering.

本文将深入探讨这一限制背后的底层逻辑，并提供两种完备的解决方案：利用硬件扩展的“优雅方式”，以及基于 WGSL 手动插值的“高兼容性平替方式”。

为什么默认不支持？

在 WebGPU 规范中，r32float 等 32 位浮点纹理的默认 sampleType 被归类为 unfilterable-float（不可过滤浮点型）。与之相对的是 r16float 或 rgba8unorm，它们的默认类型是 float（可过滤浮点型）。

WebGPU 做出这一限制的主要原因是为了跨平台兼容性：

1. 硬件差异：许多移动端 GPU（以及部分较旧的桌面端集成显卡）在硬件层面不支持对 32 位浮点纹理进行单指令的双线性插值。
2. 性能考量：32 位浮点过滤需要极高的显存带宽。如果强行在所有设备上默认开启，可能会导致某些低端设备性能骤降甚至崩溃。

因此，WebGPU 采取了保守策略，默认禁用了该功能。

方案一：开启 "float32-filterable" 硬件特性（原生加速）

如果你的目标设备主要是现代桌面端 GPU（如 NVIDIA、AMD、Apple Silicon），最直接的解决办法是在初始化 WebGPU 设备时，显式请求 float32-filterable 这一可选特性（Feature）。

一旦成功启用该特性，r32float 等格式的 sampleType 将在底层自动提升为 float，从而允许与 'filtering' 类型的采样器搭配。

1. 设备初始化代码

在请求 GPUDevice 时，必须将 float32-filterable 加入到 requiredFeatures 数组中：

const adapter = await navigator.gpu.requestAdapter();

// 1. 检查当前硬件是否支持 32 位浮点过滤
if (!adapter.features.has('float32-filterable')) {
    console.warn("当前设备硬件不支持 r32float 双线性过滤，将启用 Shader 兼容方案。");
}

// 2. 请求设备时带上该 Feature
const device = await adapter.requestDevice({
    requiredFeatures: adapter.features.has('float32-filterable') 
        ? ['float32-filterable'] 
        : []
});

2. 绑定组布局（BindGroupLayout）的配置差异

在没有开启该特性时，你的纹理绑定布局必须写为 'unfilterable-float'。开启后，则可以（且必须）改为 'float'：

const bindGroupLayout = device.createBindGroupLayout({
    entries: [
        {
            binding: 0,
            visibility: GPUShaderStage.FRAGMENT,
            texture: {
                // 如果启用了 float32-filterable，这里可以设置为 'float'
                // 否则必须是 'unfilterable-float'
                sampleType: device.features.has('float32-filterable') ? 'float' : 'unfilterable-float',
                viewDimension: '2d'
            }
        },
        {
            binding: 1,
            visibility: GPUShaderStage.FRAGMENT,
            sampler: {
                // 如果 sampleType 是 'unfilterable-float'，这里只能是 'non-filtering'
                type: device.features.has('float32-filterable') ? 'filtering' : 'non-filtering'
            }
        }
    ]
});

优缺点分析

• 优点：由 GPU 硬件级单元完成插值，速度极快，不占用着色器算力。
• 缺点：兼容性较差。目前 iOS/iPadOS 上的 Safari，以及大量 Android 设备的 GPU 并不支持此扩展。如果你的项目需要兼顾移动端，此方案无法作为唯一手段。

方案二：使用 WGSL 在 Shader 中手动实现双线性插值（全平台兼容）

为了在不支持 float32-filterable 的设备（如移动端、轻薄本）上依旧能平滑采样 r32float 纹理（常见于高度图、物理模拟温度场、G-Buffer 深度还原），我们可以在 WGSL 着色器中手动读取相邻的 4 个像素，并进行双线性插值。

这种方法只需要一个 'non-filtering'（最近邻）采样器，或者直接使用 textureLoad 函数，因此具有 100% 的兼容性。

WGSL 双线性采样函数实现

下面是一个开箱即用的 WGSL 辅助函数。它接受归一化的 UV 坐标（0 到 1 之间），在 Shader 内部计算像素边界并进行混合：

// 绑定不需要过滤的原始纹理
@group(0) @binding(0) var myTexture: texture_2d<f32>;

// 手动双线性采样函数
fn textureSampleBilinearR32(tex: texture_2d<f32>, uv: vec2<f32>) -> f32 {
    // 1. 获取纹理的宽高分辨率
    let texSize = vec2<f32>(textureDimensions(tex, 0));
    
    // 2. 将 [0, 1] 的 UV 坐标转换到像素坐标空间 (Texel Space)
    // 减去 0.5 是因为纹理采样的像素中心位于整数坐标的 (x + 0.5, y + 0.5) 处
    let texelCoords = uv * texSize - vec2<f32>(0.5);
    
    // 3. 计算左上角像素的整数坐标
    let gridCoords = vec2<i32>(floor(texelCoords));
    
    // 4. 计算当前采样点在四个邻近像素之间的权重因子 (0.0 到 1.0 之间)
    let f = fract(texelCoords);
    
    // 5. 边界处理：防止超出纹理索引范围
    let maxCoord = vec2<i32>(textureDimensions(tex, 0)) - vec2<i32>(1);
    let x0 = clamp(gridCoords.x,     0, maxCoord.x);
    let x1 = clamp(gridCoords.x + 1, 0, maxCoord.x);
    let y0 = clamp(gridCoords.y,     0, maxCoord.y);
    let y1 = clamp(gridCoords.y + 1, 0, maxCoord.y);
    
    // 6. 载入邻近的四个像素值 (r32float 只有 r 通道有值)
    let t00 = textureLoad(tex, vec2<i32>(x0, y0), 0).r; // 左上
    let t10 = textureLoad(tex, vec2<i32>(x1, y0), 0).r; // 右上
    let t01 = textureLoad(tex, vec2<i32>(x0, y1), 0).r; // 左下
    let t11 = textureLoad(tex, vec2<i32>(x1, y1), 0).r; // 右下
    
    // 7. 进行双线性插值
    // 先在水平方向 (X 轴) 进行两次线性插值
    let r0 = mix(t00, t10, f.x);
    let r1 = mix(t01, t11, f.x);
    // 再在垂直方向 (Y 轴) 进行最终的插值
    return mix(r0, r1, f.y);
}

@fragment
fn main(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
    // 调用手动过滤函数获取高精度 r32 浮点值
    let value = textureSampleBilinearR32(myTexture, uv);
    
    return vec4<f32>(value, value, value, 1.0);
}

优缺点分析

• 优点：不需要申请任何特殊的设备 Feature，可在任何支持 WebGPU 的浏览器和硬件上完美运行。
• 缺点：原本一次 textureSample 硬件调用变为了 4 次 textureLoad 内存读取和多次算术运算。在带宽极度受限或大面积高负载渲染的场景下，会对着色器性能产生一定影响。

避坑替代方案：降级为 r16float

在着手编写手动插值前，不妨先审视一下你的业务场景：你真的需要 32 位浮点（Single Precision）的绝对精度吗？

在图形学中，除了非常精细的物理模拟、高精度的世界坐标重建或特殊数学计算外，16 位半精度浮点数（r16float）往往已经能提供足够高的精度表现（支持正负 65504，精度达 $10^{-3}$ 级别）。

最关键的是，在 WebGPU 中：

• r16float、rg16float、rgba16float 在绝大多数主流硬件上是原生支持过滤的。
• 它们占用更少的显存空间和带宽。

如果可以接受轻微的精度损失，将生成纹理的格式更改为 r16float，可以直接避开所有的兼容性矛盾和复杂的 WGSL 逻辑，直接享受硬件级的双线性过滤。

决策树：我该用哪种方案？

结合具体项目的兼容性指标，合理使用上述技术路线，可以极大提升 WebGPU 渲染管线的健壮性与稳定性。