GPUCanvasContext: configure() メソッド

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

GPUCanvasContext インターフェイスの configure() メソッドは、指定の GPUDevice でレンダリングを行う用にコンテキストを設定します。このメソッドが呼ばれると、キャンバスはまず透明な黒に初期化されます。

構文

js
configure(configuration)

引数

configuration

以下のプロパティを持つオブジェクトです。

alphaMode 省略可

getCurrentTexture() が返したテクスチャが読み取り・表示・画像ソースとしての使用をされるとき、アルファ値が持つ効果を指定する列挙値です。以下の値が使用可能です。

  • opaque: アルファ値は無視されます。テクスチャが不透明ではない場合は、画像ソースとして使用されたり画面に表示される際にアルファチャンネルは 1.0 にクリアされます。これがデフォルト値です。
  • premultiplied: 色の値はアルファ値を掛けた後の値です。たとえば、アルファ値 50% の 100% 赤は [0.5, 0, 0, 0.5] です。
colorSpace 省略可

getCurrentTexture() が返すテクスチャに書き込まれる値を表示する際に用いる色空間です。srgb (デフォルト) および display-p3 が使用できます。

device

このコンテキストで使用するレンダリング情報の取得元となる GPUDevice です。

format

getCurrentTexture() が返すテクスチャの形式です。bgra8unorm・rgba8unorm・rgba16float のいずれかの値をとれます。現在のシステムで最適なキャンバスのテクスチャ形式は、GPU.getPreferredCanvasFormat() で取得できます。これを使用することが推奨されます。キャンバスコンテキストを設定する際に好ましい形式を使用しないと、プラットフォームによっては、テクスチャのコピーが増えるなど、オーバーヘッドが増加する可能性があります。

usage 省略可

getCurrentTexture() が返すテクスチャで許可する使用法を指定するビットフラグです。以下の値が使用可能です。

  • GPUTextureUsage.COPY_SRC: テクスチャは、コピー操作のソースとして使用できます。たとえば、GPUCommandEncoder.copyTextureToBuffer() を呼び出す際の引数 source で使用できます。
  • GPUTextureUsage.COPY_DST: テクスチャは、コピー操作や書き込み操作のデスティネーションとして使用できます。たとえば、GPUCommandEncoder.copyTextureToTexture() を呼び出す際の引数 destination で使用できます。
  • GPUTextureUsage.RENDER_ATTACHMENT: テクスチャは、レンダーパスにおけるカラーアタッチメントとして使用できます。たとえば、GPUCommandEncoder.beginRenderPass() を呼び出す際のカラーアタッチメントビューとして使用できます。GPUTextureUsage.RENDER_ATTACHMENT はデフォルトの usage ですが、他の値を明示的に設定した場合は自動で含まれないことに注意してください。この場合、自分で追加で含めなければなりません。
  • GPUTextureUsage.TEXTURE_BINDING: テクスチャは、シェーダーでサンプルドテクスチャとして用いるためにバインドできます。たとえば、GPUDevice.createBindGroup() を呼び出す際のバインドグループのエントリーで使用できます。
  • GPUTextureUsage.STORAGE_BINDING: テクスチャは、シェーダーでストレージテクスチャとして用いるためにバインドできます。たとえば、GPUDevice.createBindGroup() を呼び出す際のバインドグループのエントリーで使用できます。

usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT のように、ビット論理和演算子を用いて複数の可能な使用法を指定できます。

viewFormats 省略可

getCurrentTexture() が返すテクスチャから作成されるビューで使用可能な形式の配列です。指定可能なすべての値は、Texture Formats を参照してください。

返値

なし (undefined)

例

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

context.configure({
  device: device,
  format: navigator.gpu.getPreferredCanvasFormat(),
  alphaMode: "premultiplied",
});

仕様書

Specification
WebGPU
# dom-gpucanvascontext-configure

ブラウザーの互換性

BCD tables only load in the browser

関連情報