このページは Cloud Translation API によって翻訳されました。

WebGPU の新機能（Chrome 119）

François Beaufort

フィルタリング可能な 32 ビット浮動小数点テクスチャ

32 ビット浮動小数点テクスチャは、HDR 画像や深度マップなどの高精度データの保存に使用されます。特にハイエンドのゲームやプロフェッショナルアプリケーションで使用される GPU で重要となります。

フィルタリング可能な 32 ビット浮動小数点テクスチャのサポートは、32 ビット浮動小数点テクスチャをフィルタリングする GPU の機能を説明しています。つまり、GPU が浮動小数点テクスチャのエッジを滑らかにすることで、ギザギザの傾向が軽減されます。WebGL の「OES_texture_float_linear」拡張機能に似ています。

すべての GPU がフィルタ可能な 32 ビット浮動小数点テクスチャをサポートしているわけではありません。GPUAdapter で "float32-filterable" 機能が利用できる場合、この機能を使用して GPUDevice をリクエストし、「r32float」、「rg32float」、「RGBa32float」の形式でテクスチャをフィルタできるようになりました。次の例と issue dawn:1664 をご覧ください。

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("float32-filterable")) {
  throw new Error("Filterable 32-bit float textures support is not available");
}
// Explicitly request filterable 32-bit float textures support.
const device = await adapter.requestDevice({
  requiredFeatures: ["float32-filterable"],
});

// Create a sampler with linear filtering.
const sampler = device.createSampler({
  magFilter: "linear",
});

// Create a texture with rgba32float format.
const texture = device.createTexture({
  size: [100, 100],
  format: "rgba32float",
  usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,
});

// Write data to texture, create a bindgroup with sampler and texture and
// send the appropriate commands to the GPU....

unorm10-10-10-2 頂点形式

「unorm10-10-10-2」（別名「RGB10a2」）という新しい頂点形式が WebGPU の仕様に追加されました。これは、1 つのパックされた 32 ビット値と 4 つの正規化された符号なし整数値で構成され、10 ビット、10 ビット、10 ビット、2 ビットとして配置されます。次の例と issue dawn:2044 をご覧ください。

// Define the layout of vertex attribute data with unorm10-10-10-2 format.
const buffers = [
  {
    arrayStride: 0,
    attributes: [
      { format: "unorm10-10-10-2", offset: 0, shaderLocation: 0 },
    ],
  },
];

// Describe the vertex shader entry point and its input buffer layouts.
const vertex = {
  module: myVertexShaderModule,
  entryPoint: "main",
  buffers,
};

// Pass vertex to device.createRenderPipeline() and
// use vec4<f32> type in WGSL shader code to manipulate data.

rgb10a2uint テクスチャ形式

「RGB10a2uint」という新しいテクスチャ形式が WebGPU の仕様に追加されました。10 ビットの赤、10 ビットの緑、10 ビットの青、2 ビットのアルファの 4 つの符号なし整数部分を持つ、32 ビットのパック・ピクセル・フォーマットで構成されています。次の例と issue dawn:1936 をご覧ください。

// Create a texture with rgb10a2uint format.
const texture = device.createTexture({
  size: [100, 100],
  format: "rgb10a2uint",
  usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,
});

// Write data to texture, create a bindgroup with texture and
// send the appropriate commands to the GPU....

夜明けの更新情報

タイムスタンプクエリを使用すると、WebGPU アプリケーションで GPU コマンドの実行にかかる時間をナノ秒単位で正確に測定できます。パスの開始時と終了時のタイムスタンプクエリをキャプチャする API の形状を、WebGPU の仕様に合わせて更新しました。次の例と issue dawn:1800 をご覧ください。

// Create a timestamp query set that will store the timestamp values.
wgpu::QuerySetDescriptor querySetDescriptor = {
    .count = 2,
    .type = wgpu::QueryType::Timestamp};
wgpu::QuerySet querySet = device.CreateQuerySet(&querySetDescriptor);

wgpu::RenderPassTimestampWrites timestampWrites = {
    .querySet = querySet,
    .beginningOfPassWriteIndex = 0,
    .endOfPassWriteIndex = 1};
wgpu::ComputePassDescriptor pass{.timestampWrites = &timestampWrites};

// Write the queue timestamp into beginningOfPassWriteIndex and
// endOfPassWriteIndex of myQuerySet respectively before and after the pass
// commands execute.
myEncoder.BeginComputePass(&pass);

ここでは、重要なハイライトの一部についてのみ説明します。commit の完全なリストを確認する。