TypeScript中如何定义WebGPU纹理视图的Mip层级、数组切片与深度范围类型？

创建WebGPU纹理资源时，一个常见的做法是先关注尺寸、格式和用途，但真正影响着色器采样结果的是纹理视图的描述结构。GPUTextureViewDescriptor在TypeScript类型定义中并不复杂，却因为可选字段之间的组合关系而经常引发困惑。本文将聚焦三个基础范围类型：Mip层级范围、数组切片范围以及深度模板面范围，说明它们如何与GPUTextureViewDimension、GPUTextureAspect配合工作。

一、Mip层级字段的理解与类型约束

GPUTextureViewDescriptor中控制Mip范围的字段是baseMipLevel和mipLevelCount。baseMipLevel表示视图起始的Mip层级，索引从0开始；mipLevelCount表示从起始层级连续包含的层级数量。在TypeScript类型定义中，这两个字段都是可选的number类型。如果不传mipLevelCount，WebGPU会自动沿用源纹理从baseMipLevel到最高层的所有层级。比如源纹理有5层Mip，设置baseMipLevel为2且不设置mipLevelCount，视图将包含第2、3、4层。

这里的类型约束并不是在TypeScript层面强制范围检查，而是由GPU实现或WebGPU API在创建视图时进行验证。TypeScript类型定义只保证字段必须为number或undefined，并不会阻止传入负数或超过纹理层数的值。因此需要在代码中做运行时校验。一个常见做法是读取源纹理的mipLevelCount，然后计算传入范围是否满足baseMipLevel + mipLevelCount <= texture.mipLevelCount。下面示例创建一个只绑定第1到第3层Mip的视图。

const texture = device.createTexture({
  size: [512, 512],
  format: "rgba8unorm",
  mipLevelCount: 6,
  usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT
});

const view = texture.createView({
  baseMipLevel: 1,
  mipLevelCount: 3
});

上面的代码将view限定在第1、2、3层Mip。需要说明的是，如果源纹理的维度是立方体贴图，每个Mip层实际包含6个面，但Mip范围字段仍按层级来算，不会单独拆分面。后续可以配合数组切片字段选择某个或某几个面。另一个容易忽略的地方是，如果纹理格式为压缩格式，某些WebGPU实现要求Mip层尺寸至少为块大小的整数倍，此时创建视图的层级范围也会受限制。

二、数组切片字段与纹理维度如何对应

baseArrayLayer和arrayLayerCount负责描述视图在纹理数组维度上的范围。对于普通的2D纹理，数组层数为1，这两个字段通常保持默认即可。对于2D纹理数组或立方体贴图，数组维度才真正发挥作用。baseArrayLayer表示起始数组层索引，arrayLayerCount表示连续层数。TypeScript签名中它们同样是可选的number，默认值分别是0和源纹理所有剩余层数。

在GPUTextureViewDimension类型中，常见的值包括2d、2d-array、cube、cube-array。创建视图时，viewDimension决定是否将数组层解释为数组纹理还是立方体贴图。例如一个具有6层的2D纹理数组，可以使用dimension: "cube"创建立方体贴图视图，也可以使用dimension: "2d-array"创建数组视图。下面的代码从6层纹理数组中取出第2到第5层，创建2D数组视图。

const arrayTexture = device.createTexture({
  size: [256, 256, 6],
  format: "rgba8unorm",
  usage: GPUTextureUsage.TEXTURE_BINDING
});

const arrayView = arrayTexture.createView({
  dimension: "2d-array",
  baseArrayLayer: 2,
  arrayLayerCount: 4
});

如果要创建立方体贴图视图，需要确保arrayLayerCount为6的整数倍或至少满足cube所需的6层。例如一个12层的纹理数组可以创建dimension为cube-array的视图，同时baseArrayLayer和arrayLayerCount必须按6层对齐。具体实现中，cube视图的第0层对应+X面、第1层对应-X面、第2层对应+Y面、第3层对应-Y面、第4层对应+Z面、第5层对应-Z面。TypeScript类型不会约束这种层数必须为6的倍数，所以还是需要自行校验。

数组切片还常与级联阴影贴图配合。比如一个2048x2048、layerCount为4的深度纹理，可以为每一级阴影创建一个单层视图，baseArrayLayer依次设为0、1、2、3，arrayLayerCount设为1，这样在渲染不同距离阴影时绑定不同视图即可。

三、深层面范围类型GPUTextureAspect与格式限制

对于深度模板纹理，纹理视图还需要明确要访问哪个平面。GPUTextureAspect在TypeScript中定义为三个字符串字面量：all、depth-only、stencil-only。all表示同时访问深度和模板分量；depth-only只访问深度分量；stencil-only只访问模板分量。这个字段在创建视图时通过aspect传入，默认值取决于源纹理格式。如果格式只有深度分量，则只能使用depth-only或all；如果格式包含模板分量，使用all可以同时采样或渲染两个平面，但可能无法单独绑定到着色器的某个采样器。

示例中创建一个深度模板格式的纹理，然后分别创建深度只读视图和模板只读视图。

const depthStencilTexture = device.createTexture({
  size: [1024, 1024],
  format: "depth24plus-stencil8",
  usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
});

const depthView = depthStencilTexture.createView({
  aspect: "depth-only"
});

const stencilView = depthStencilTexture.createView({
  aspect: "stencil-only"
});

这里要注意TypeScript中的GPUTextureAspect类型允许字符串，但在运行时会严格校验。如果你的纹理格式是depth24plus或depth32float，传入stencil-only会创建失败。此外，当使用all创建深度模板视图时，着色器采样该视图通常需要同时处理两个分量；而将深度与模板分开绑定到不同视图是更清晰的做法，特别是WebGPU管线需要显式指定深度模板附件时。

从类型系统角度看，TypeScript并不会根据纹理格式自动推断aspect字段的合法取值，因为createView接收的是GPUTextureViewDescriptor，其中aspect是可选的GPUTextureAspect。这样设计的灵活性更高，但开发者需要自己维护格式与平面的一致性。可以在封装纹理创建函数时，根据格式参数返回更具体的联合类型，帮助捕获错误。

四、组合使用时的类型校验与封装建议

多数真实场景中，Mip层级、数组切片和aspect会同时出现在一个createView调用里。例如对深度立方体贴图纹理的某个面创建视图，既要指定cube维度、baseArrayLayer为某面索引、arrayLayerCount为1，还要指定aspect。TypeScript类型定义允许这些字段自由组合，但组合后的语义必须受源纹理维度和格式约束。

一个可行的封装思路是编写createTextureView辅助函数，在调用原生createView之前根据源纹理信息做校验。校验内容包括：baseMipLevel加mipLevelCount是否超过源纹理mipLevelCount；baseArrayLayer加arrayLayerCount是否超过源纹理数组层数；viewDimension是否与源纹理维度兼容；aspect是否与格式匹配。下面的代码展示了一个简单的校验函数。

function createCheckedView(
  texture: GPUTexture,
  descriptor: GPUTextureViewDescriptor
): GPUTextureView {
  const mipEnd = (descriptor.baseMipLevel ?? 0) + (descriptor.mipLevelCount ?? texture.mipLevelCount);
  if (mipEnd > texture.mipLevelCount) {
    throw new RangeError("Mip range exceeds texture mipLevelCount");
  }

  const layerEnd = (descriptor.baseArrayLayer ?? 0) + (descriptor.arrayLayerCount ?? 1);
  if (layerEnd > texture.depthOrArrayLayers) {
    throw new RangeError("Array layer range exceeds texture array layers");
  }

  return texture.createView(descriptor);
}

这段代码对Mip和数组层做了基本检查。对于aspect与格式的校验，可以额外维护一个格式集合。如果格式为depth24plus-stencil8或depth32float-stencil8，才允许stencil-only；如果格式为depth24plus或depth32float，则不允许stencil-only。把这种规则集中到辅助函数后，上层业务代码就可以减少运行期错误。

TypeScript本身还能通过接口扩展提供更细粒度的类型。比如定义StencilTextureViewDescriptor接口继承GPUTextureViewDescriptor，并将aspect限定为stencil-only。这样在封装深度模板纹理类时，stencilView方法可以返回更准确的描述类型。不过需要注意，TypeScript类型断言不能替代运行时行为，最终仍要依赖WebGPU API的验证。

WebGPUTexture ViewTypeScript类型修改时间：2026-09-19 18:39:53