WebGL 和 WebGPU 比对[6] - 纹理：新标准与旧标准之间的比较

前端

2024-01-26 18:01:04

纹理在 WebGL 和 WebGPU 中的作用

纹理：图形的基石

在图形编程中，纹理是打造逼真且引人入胜的视觉效果的关键。纹理就像是一幅幅图片，赋予了 3D 模型以细节和深度。无论是游戏中的逼真环境还是可视化中的复杂数据集，纹理都将这些视觉元素栩栩如生。

WebGL 与 WebGPU：纹理处理大比拼

WebGL 和 WebGPU 都是用于 Web 开发的图形 API，提供对纹理处理的强大支持。然而，它们在实现纹理的方式上存在一些细微差别。让我们深入探讨这些差异，看看哪种 API 最适合您的纹理处理需求。

纹理类型

WebGL 支持基本的纹理类型，包括 2D、3D 和立方体贴图。WebGPU 则扩展了这一范围，增加了 1D 纹理、2D 纹理阵列和 3D 纹理阵列。

纹理格式

纹理格式决定了纹理中数据的排列方式。WebGL 支持常用的格式，如 RGBA 和 RGB，而 WebGPU 则提供了更广泛的选择，包括 BGRA、RGBE 和 ASTC。

纹理过滤

纹理过滤平滑了纹理缩放或透视变化时的像素化效应。WebGL 和 WebGPU 都支持最近邻、双线性和其他过滤方法。

纹理映射

纹理映射将纹理应用于 3D 模型，赋予它们逼真的外观。WebGL 和 WebGPU 都支持纹理映射，但 WebGPU 提供了更高级的功能。

性能与延迟

WebGPU 在纹理处理方面胜出，它使用现代 API 和异步命令缓冲区，显着提升了性能和降低了延迟。

代码示例：纹理在 WebGL 和 WebGPU 中的使用

WebGL

// 创建 2D 纹理
const texture = gl.createTexture();

// 绑定图像数据到纹理
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imageData);

// 设置纹理参数
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

// 应用纹理到 3D 模型
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.drawArrays(gl.TRIANGLES, 0, 3);

WebGPU

// 创建 2D 纹理
const texture = device.createTexture({
  size: [width, height],
  format: 'rgba8unorm',
  usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
});

// 绑定图像数据到纹理
device.queue.writeTexture(
  texture,
  { offset: 0 },
  imageData,
  { bytesPerRow: width * 4 },
  { width, height }
);

// 设置纹理参数
texture.setFilter('linear', 'linear');

// 应用纹理到 3D 模型
const bindGroup = {
  bindings: [
    {
      binding: 0,
      resource: texture.createView(),
    },
  ],
};

renderPass.setBindGroup(0, bindGroup);
renderPass.draw(0, 3);