系列博客总目录：https://segmentfault.com/a/1190000040716735

WebGPU 基本概念节选翻译，选自 WebGPU Spec 3 Fundamentals，本文列举一部分简略的内容，其余内容当前独自拉出去和其余材料一起谈。

1 公共约定

节选自 WebGPU Spec 3.1 Conventions

① WebGPU 接口

WebGPU 接口是外部对象的公开拜访模式，和大多数语言的接口语法提供的性能差不多。

这里只需注意，继承了 GPUObjectBase 的接口都是 WebGPU 接口。

interface mixin GPUObjectBase {attribute USVString? label;};

label 字段用来形容对象本身，可空。

② 对象形容者

对象形容者蕴含创立一个对象所需的信息，通常调用 GPUDevice 的 createXXX 办法实现。

dictionary GPUObjectDescriptorBase {USVString label;};

此处的 label 和 GPUObjectBase 的 label 含意差不多。

2 坐标零碎

节选自 WebGPU Spec 3.3 Coordinate Systems

• 在 NDC 中，Y 轴朝上。NDC 的点 (-1.0, -1.0) 位于 NDC 的左下角。NDC 的 X 和 Y 的最大最小值为 1 和 -1，Z 的取值范畴是 [0, 1]。NDC 中超出此范畴的点会被剪裁。
• 在 Framebuffer、视口坐标系和 Fragment/ 像素坐标系中 Y 轴朝下。原点 (0, 0) 位于这几个坐标系的左上角。
• 视窗坐标和帧缓存（Framebuffer）坐标相匹配。
• 纹理坐标的原点 (0, 0) 示意纹理数据的第一个纹素（texel）。

WebGPU 的坐标系和 DirectX 坐标系匹配。

3 外围对象

节选自 WebGPU Spec 3.5 Core Internal Objects

Adapter（适配器）

适配器对象示意 WebGPU 在具体零碎中古代图形接口的实现。如果适配器对象变得不可用了，那就会被标记为有效，并且永远不会再变无效，并且，连带着由它创立的设施等对象一并变得有效。

适配器对象能够简略了解为图形处理器，既能够是真的物理显卡，也能够是由模仿进去的的软显卡。不同的适配器对象容许指向同一个显卡，譬如适配器 A 和适配器 B，只是在申请参数上略有不同。

适配器对象在 WebGPU 中由 GPUAdapter 接口实现。

对于适配器对象的申请与创立过程，参考初始化局部的内容。

Devices（设施）

设施是适配器的逻辑性能上的实现，所有的 WebGPU 子对象均由设施对象创立，它能够在专用型 WebWorker 中应用。

如果设施对象生效了，那么由设施对象创立的子对象也会变得不可用。

设施对象在 WebGPU 中由 GPUDevice 接口实现。

对于设施对象的申请与创立过程，参考初始化局部的内容。

4 WebGPU 的性能列表及其最大限度

节选自 WebGPU Spec 3.6 Optional Capabilities

4.2 性能

性能，指的是一组可选的 WebGPU 性能，并不是所有的平台都反对，通常是操作系统或者显卡硬件不反对。

每个 GPUAdapter 都会带有一个 features 对象，在申请设施对象时只能用这个对象内的性能，也只有在申请设施对象时，能力设置这个行将被创立的设施对象能有哪些性能。

无关 WebGPU 性能的具体形容，参考 WebGPU Spec 23. Feature Index 后列举如下：

译者注

有点蛋疼的是，你间接拜访 adapter.features 它只是个相似 Set 的对象，而不是一般的对象能看到外面有什么反对的性能，要你本人去拜访 values …

① depth-clamping

启用这个性能时，GPUPrimitiveState 接口的 clampDepth 属性能力被设置：

const renderPipeline = device.createRenderPipeline({
  /*...*/,
  primitive: {
    /* ... */,
    clampDepth: true
  }
})

② depth24unorm-stencil8

启用这个性能时，能力创立 “depth24unorm-stencil8” 格局的纹理对象：

const texture = device.createTexture({
  /* ... */,
  format: "depth24unorm-stencil8"
})

③ depth32float-stencil8

启用这个性能时，能力创立 “depth32float-stencil8” 格局的纹理对象：

const texture = device.createTexture({
  /* ... */,
  format: "depth32float-stencil8"
})

④ pipeline-statistics-query

启用这个性能时，枚举类型 GPUQueryType 能力用。

⑤ texture-compression-bc

启用这个性能时，能力创立 BC 格局的纹理：

const texture = device.createTexture({
  /* ... */,
  format: "bc1-rgba-unorm" / "bc1-rgba-unorm-srgb" / "bc2-rgba-unorm" / "bc2-rgba-unorm-srgb" / "bc3-rgba-unorm" / "bc3-rgba-unorm-srgb" / "bc4-r-unorm" / "bc4-r-snorm" / "bc5-rg-unorm" / "bc5-rg-snorm" / "bc6h-rgb-ufloat" / "bc6h-rgb-float" / "bc7-rgba-unorm" / "bc7-rgba-unorm-srgb"
})

⑥ timestamp-query

启用这个性能后，枚举类型 GPUQueryType 中的 "timestamp" 枚举能力应用。

4.1 限度

每个限度属性的值类型都是数字。每个限度对象（适配器对象和设施对象的一个属性）上的限度属性个数都是一样的，区别就是他们的值有可能不太一样。

设施对象的限度优先级高于适配器的，因为大多时候用的是设施对象，而且设施对象是由适配器对象申请的，适配器对象申请设施对象的时候能够传递对设施对象的限度需要。

留神，每条限度要与硬件适配，不要在挪动设施上把限度放得很宽，否则容易影响性能。正当的限度须要因具体硬件而定。

每条限度都有一个默认值，如果适配器在申请设施时，没有传递限度参数 requiredLimits，那么就会应用默认值。

当初，对限度值进行逐条解释。

4.1.1 GPUSupportedLimits

GPUSupportedLimits 接口裸露了适配器或者设施对象的最大限度，间接拜访 device.limits 或 adapter.limits 即可，是一个对象。

[Exposed=(Window, DedicatedWorker)]
interface GPUSupportedLimits {
  readonly attribute unsigned long maxTextureDimension1D;
  readonly attribute unsigned long maxTextureDimension2D;
  readonly attribute unsigned long maxTextureDimension3D;
  readonly attribute unsigned long maxTextureArrayLayers;
  readonly attribute unsigned long maxBindGroups;
  readonly attribute unsigned long maxDynamicUniformBuffersPerPipelineLayout;
  readonly attribute unsigned long maxDynamicStorageBuffersPerPipelineLayout;
  readonly attribute unsigned long maxSampledTexturesPerShaderStage;
  readonly attribute unsigned long maxSamplersPerShaderStage;
  readonly attribute unsigned long maxStorageBuffersPerShaderStage;
  readonly attribute unsigned long maxStorageTexturesPerShaderStage;
  readonly attribute unsigned long maxUniformBuffersPerShaderStage;
  readonly attribute unsigned long long maxUniformBufferBindingSize;
  readonly attribute unsigned long long maxStorageBufferBindingSize;
  readonly attribute unsigned long minUniformBufferOffsetAlignment;
  readonly attribute unsigned long minStorageBufferOffsetAlignment;
  readonly attribute unsigned long maxVertexBuffers;
  readonly attribute unsigned long maxVertexAttributes;
  readonly attribute unsigned long maxVertexBufferArrayStride;
  readonly attribute unsigned long maxInterStageShaderComponents;
  readonly attribute unsigned long maxComputeWorkgroupStorageSize;
  readonly attribute unsigned long maxComputeInvocationsPerWorkgroup;
  readonly attribute unsigned long maxComputeWorkgroupSizeX;
  readonly attribute unsigned long maxComputeWorkgroupSizeY;
  readonly attribute unsigned long maxComputeWorkgroupSizeZ;
  readonly attribute unsigned long maxComputeWorkgroupsPerDimension;
};

每项的解释见上文。

4.1.2 GPUSupportedFeatures

GPUSupportedFeatures 即 device.features 和 adapter.features 对象所实现的接口。

这个对象不是一般的 JavaScript 对象，而是相似 ES6 中 Set 一样的汇合，你能够应用 has 办法来查看有什么性能。它只能增加 GPUFeatureName（定义在 WebGPU Spec 4.4.1.1 GPUFeatureName）枚举中的值。

[Exposed=(Window, DedicatedWorker)]
interface GPUSupportedFeatures {readonly setlike<DOMString>;};

enum GPUFeatureName {
  "depth-clamping",
  "depth24unorm-stencil8",
  "depth32float-stencil8",
  "pipeline-statistics-query",
  "texture-compression-bc",
  "timestamp-query",
};

留神，GPUFeatureName 会缓缓增加，然而浏览器实现不肯定就跟得上进度，这时候能够用判断优雅地解决：

if (adapter.features.has('unknown-feature')) {// Use unknown-feature} else {console.warn('unknown-feature is not supported by this adapter.');
}