WebGPU の新機能(Chrome 155 ~ 156)

WGSL fragment_depth 拡張機能

ジオメトリを多用するレンダーパスでは、Early-Z 最適化がデベロッパーの強い味方になります。高コストのフラグメント シェーダーを実行する前に GPU が非表示のピクセルを破棄できるため、パフォーマンスが大幅に向上します。ラスタライズされた深度が深度テストに失敗した場合、シェーダーに他の副作用がない限り、GPU はフラグメント シェーダーを完全にスキップします。

ハードウェアがこの処理をどのように行うかについては、MJP の記事 When Does Early-Z Have to be Disabled? をご覧ください。

カスタム深度操作は便利ですが、フラグメント シェーダーで行うと、隠れたコストが発生します。フラグメント シェーダー内で @builtin(frag_depth) に書き込むと、通常、ドライバは描画呼び出し全体で Early-Z 最適化を無効にします。これは、ドライバのヒューリスティックでは、シェーダーで計算された出力深度がラスタライザによって補間された深度と一致することを保証できないためです。

このパフォーマンスの低下に対処するため、WGSL 拡張機能 fragment_depth を使用すると、@builtin(frag_depth) に less または greater 深度モード名を指定して、書き込まれた深度と補間された深度を比較する方法を明示的に指定できます。これにより、GPU は Early-Z 最適化を安全に適用できます。

この言語拡張機能は、JavaScript で navigator.gpu.wgslLanguageFeatures を使用して機能検出できます。requires ディレクティブを使用して、WGSL シェーダー コードの先頭に requires fragment_depth; を追加し、移植できない可能性があることを示すことをおすすめします。次の例とリリース予定をご覧ください。

if (!navigator.gpu.wgslLanguageFeatures.has("fragment_depth")) {
  throw new Error(`WGSL fragment depth is not available`);
}

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const shaderModule = device.createShaderModule({ code: `
  requires fragment_depth;

  @fragment
  fn main() -> @builtin(frag_depth, less) f32 {
    // Explicitly states that the output fragment depth is less than early-Z depth,
    // allowing the GPU to safely preserve early-Z optimizations.
    return 0.0f;
  }`,
});

テクスチャ圧縮の不揃い

「texture-compression-unaligned」GPU 機能を使用すると、ブロックサイズの整数倍ではないディメンション(BC、ETC2、ASTC 形式の場合は 4x4 など)で圧縮テクスチャを作成できます。以前は、WebGPU ではテクスチャ サイズをこれらのブロック境界に合わせる必要がありました。この機能では、ブロックの配置に合わせてテクスチャをパディングまたはスケーリングする必要がないため、スケーリングによる歪みを生じさせることなく、元の圧縮忠実度を維持できます。リリース予定をご覧ください。

次のコード スニペットは、アダプターがテクスチャ圧縮の不揃いをサポートしているかどうかを確認し、サポートしている場合は、そのアダプターを使用してデバイスをリクエストします。

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("texture-compression-unaligned")) {
  throw new Error("Texture compression unaligned support is not available");
}
// Explicitly request texture compression unaligned support.
const device = await adapter.requestDevice({
  requiredFeatures: ["texture-compression-unaligned"],
});

この機能、仕様、CTS の作業を推進してくださった外部のコントリビューターである spark.js の Ignacio Castaño 様に感謝いたします。

srgb-linear 色空間と display-p3-linear 色空間

「srgb-linear」と「display-p3-linear」の事前定義された色空間が追加されたため、WebGPU キャンバス コンテキストで拡張範囲のリニア色空間に直接レンダリングして、広色域ディスプレイをサポートできるようになりました。これらの色空間では、ピクセル値と物理輝度の間に線形関係が維持されます。そのため、ゲームでの物理的な光のレンダリングや、アンチエイリアシング、補間、間引きなどの空間処理タスクに最適です。リリース予定とParticles(HDR)サンプル PR #574をご覧ください。

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const canvas = document.querySelector("canvas");
const context = canvas.getContext("webgpu");

context.configure({
  device,
  format: "rgba16float",
  colorSpace: "display-p3-linear",
});

snorm10-10-10-2 頂点形式の追加

「snorm10-10-10-2」頂点形式は、4 つの符号付き正規化値(3 つの 10 ビット コンポーネント(r, g, b)と 1 つの 2 ビット コンポーネント(a))を保持するパックされた 32 ビット形式です。この形式を使用すると、メモリ帯域幅を節約しながら、追加の 2 ビット スカラーや配置フラグを含む 3D 法線ベクトルなどの属性を効率的に保存できます。仕様 PR 6491 をご覧ください。

NVIDIA の Linux での f16 のサポート

WGSL で 16 ビット浮動小数点値をサポートするオプションの「shader-f16」機能が、最新の NVIDIA GPU ドライバの Linux でサポートされるようになりました。issue chromium:42251215 をご覧ください。

Dawn の更新

WGPUAdapterPropertiesD3D 構造体を使用して、特定の GPU アダプターの基盤となる DXGIAdapter の LUID をクエリできるようになりました。issue chromium:562849566 をご覧ください。

主なハイライトは以上です。コミットの完全なリストをご覧ください。

WebGPU の新機能

WebGPU の新機能シリーズで取り上げられたすべての機能の一覧です。

Chrome 155 ~ 156

Chrome 153 ~ 154

Chrome 151 ~ 152

Chrome 149 ~ 150

Chrome 147 ~ 148

Chrome 146

Chrome 145

Chrome 144

Chrome 143

Chrome 142

Chrome 141

Chrome 140

Chrome 139

Chrome 138

Chrome 137

Chrome 136

Chrome 135

Chrome 134

Chrome 133

Chrome 132

Chrome 131

Chrome 130

Chrome 129

Chrome 128

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113