一、引言：纹理在现代图形渲染中的核心地位

纹理作为图形渲染的基础要素，承担着存储图像数据、实现材质表现、增强视觉真实感的关键作用。从简单的2D贴图到复杂的3D体积纹理，从静态的环境映射到动态的流式纹理加载，纹理处理能力直接影响图形应用的性能与视觉效果。WebGL作为浏览器端的传统图形API，与新一代的WebGPU在纹理处理上呈现出显著差异，这种差异不仅体现在API设计层面，更深刻影响了开发者在纹理格式选择、内存管理、渲染效率等方面的决策。本文将从纹理的创建、管理、采样、压缩等多个维度，系统对比WebGL与WebGPU的纹理处理机制，为开发者提供技术选型的参考依据。

二、纹理格式支持对比：从基础到高级的扩展能力

1. WebGL的纹理格式支持：兼容性与局限性并存

WebGL 1.0基于OpenGL ES 2.0，主要支持8位无符号整数格式（如RGBA8、RGB8）和浮点格式（如RGBA32F），但对高动态范围（HDR）纹理和特殊压缩格式的支持有限。例如，RGBA16F浮点纹理在WebGL 1.0中需通过扩展（OES_texture_float）启用，且部分移动设备可能不支持。WebGL 2.0引入了更多格式，如R16F、RG16F和RGBA16F，并支持sRGB纹理（通过EXT_sRGB扩展），但整体仍受限于OpenGL ES 3.0的规范。

2. WebGPU的纹理格式支持：灵活性与高性能并重

WebGPU的纹理格式支持更接近桌面级GPU的能力，不仅覆盖了WebGL的所有常见格式，还新增了对BCn（Block Compression）压缩纹理、ASTC（Adaptive Scalable Texture Compression）和ETC2（Ericson Texture Compression）的支持。例如，WebGPU允许直接创建bc3-rgba-unorm格式的纹理，无需额外扩展，显著减少了内存占用和带宽消耗。此外，WebGPU支持float16和float32的混合格式（如rg16f），为HDR渲染和物理模拟提供了更高精度的数据存储。

三、纹理创建与管理：从显式到隐式的优化

1. WebGL的纹理创建流程：显式控制与手动管理

在WebGL中，纹理创建需通过gl.createTexture()生成纹理对象，再通过gl.bindTexture()绑定到目标（如gl.TEXTURE_2D），最后通过gl.texImage2D()上传数据。这一过程需要开发者显式管理纹理的生命周期，包括内存分配、格式转换和 mipmap 生成。例如，上传一个RGBA8纹理的代码如下：

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
gl.generateMipmap(gl.TEXTURE_2D);

这种显式管理虽然提供了精细控制，但也增加了代码复杂度和出错概率。

2. WebGPU的纹理创建流程：隐式优化与自动化管理

WebGPU通过GPUDevice.createTexture()方法创建纹理，支持更灵活的配置选项（如维度、格式、大小和用途）。例如，创建一个可渲染的RGBA8纹理的代码如下：

const texture = device.createTexture({
  size: { width: 512, height: 512, depthOrArrayLayers: 1 },
  format: 'rgba8unorm',
  usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
});

WebGPU的纹理管理系统更接近现代GPU驱动的设计，通过usage标志自动优化内存布局和访问模式，减少了手动管理的负担。此外，WebGPU支持纹理视图（GPUTextureView），允许对同一纹理的不同区域或格式进行独立访问，进一步提升了灵活性。

四、纹理采样与过滤：从固定到可编程的进化

1. WebGL的纹理采样：固定函数与扩展支持

WebGL的纹理采样通过gl.texParameteri()设置过滤模式（如gl.LINEAR、gl.NEAREST）和环绕模式（如gl.REPEAT、gl.CLAMP_TO_EDGE）。这些参数在纹理绑定后固定，无法在着色器中动态修改。WebGL 2.0通过OES_texture_float_linear扩展支持浮点纹理的线性过滤，但部分设备可能不兼容。

2. WebGPU的纹理采样：可编程性与高级过滤

WebGPU的纹理采样通过GPUSampler对象实现，支持更复杂的过滤模式（如anisotropic各向异性过滤）和比较函数（如depth比较）。例如，创建一个各向异性过滤的采样器如下：

const sampler = device.createSampler({
  magFilter: 'linear',
  minFilter: 'linear',
  mipmapFilter: 'linear',
  addressModeU: 'repeat',
  addressModeV: 'repeat',
  maxAnisotropy: 16,
});

WebGPU的采样器可以独立于纹理创建，并在着色器中通过textureSample()函数动态使用，为PBR（基于物理的渲染）和动态光照提供了更灵活的控制。

五、多阶段纹理操作：从单次到批量的效率提升

1. WebGL的多纹理操作：手动切换与状态管理

在WebGL中，多纹理操作需通过gl.activeTexture()切换活动纹理单元，再通过gl.uniform1i()将单元索引传递给着色器。例如，同时使用两个纹理的代码如下：

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture1);
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, texture2);
// 在着色器中通过uniform获取单元索引

这种手动切换方式在纹理数量较多时会导致性能下降，因为每次切换都可能触发状态验证。

2. WebGPU的多纹理操作：绑定组与批量处理

WebGPU通过GPUBindGroup将纹理和采样器组织为逻辑组，减少了状态切换的开销。例如，创建一个包含两个纹理的绑定组如下：

const bindGroup = device.createBindGroup({
  layout: pipeline.getBindGroupLayout(0),
  entries: [
    { binding: 0, resource: sampler },
    { binding: 1, resource: texture1.createView() },
    { binding: 2, resource: texture2.createView() },
  ],
});

在着色器中，纹理通过绑定索引直接访问，无需手动切换单元，显著提升了多纹理渲染的效率。

六、异步纹理加载与压缩纹理：从同步到异步的优化

1. WebGL的异步纹理加载：回调与扩展支持

WebGL的纹理加载通常通过Image对象同步完成，但在大型纹理或跨域资源场景下，需使用XMLHttpRequest或fetch异步加载数据，再通过gl.texImage2D()上传。WebGL 2.0通过KHR_texture_compression_astc扩展支持ASTC压缩纹理，但需检测设备兼容性。

2. WebGPU的异步纹理加载：流式处理与原生支持

WebGPU通过GPUQueue.copyExternalImageToTexture()方法支持异步纹理上传，允许在加载过程中逐步更新纹理数据。例如，从视频元素加载纹理的代码如下：

const video = document.querySelector('video');
const texture = device.createTexture({ /* ... */ });
function updateTexture() {
  device.queue.copyExternalImageToTexture(
    { source: video },
    { texture },
    [video.videoWidth, video.videoHeight]
  );
  requestAnimationFrame(updateTexture);
}

WebGPU原生支持BCn和ASTC压缩纹理，无需额外扩展，且压缩纹理的解压由GPU硬件加速，进一步提升了加载速度和内存效率。

七、结论与建议：根据场景选择合适的技术

WebGL与WebGPU在纹理处理上的差异反映了图形API从固定功能到可编程、从手动管理到自动优化的演进趋势。对于需要兼容旧设备或简单2D渲染的场景，WebGL仍是可靠的选择；而对于追求高性能、HDR渲染和复杂材质的系统，WebGPU提供了更强大的纹理处理能力。开发者在选择时应综合考虑目标平台的硬件支持、性能需求和开发效率，合理利用两种技术的优势。