GPU

Limited availability

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

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

WebGPU APIGPU インターフェイスは、WebGPU を使用するためのスタート地点です。デバイスの要求、機能や制限の設定、などを行える GPUAdapter を取得するのに使用できます。

現在のコンテキスト用の GPU オブジェクトには、Navigator.gpu または WorkerNavigator.gpu プロパティからアクセスできます。

インスタンスプロパティ

wgslLanguageFeatures Experimental 読取専用

この WebGPU の実装が対応している WGSL 言語の拡張を報告する WGSLLanguageFeatures オブジェクトです。

インスタンスメソッド

requestAdapter() Experimental

GPUAdapter オブジェクトのインスタンスで解決する Promise を返します。これを用いて、WebGPU の機能を用いるための第一のインターフェイスである GPUDevice を要求できます。

getPreferredCanvasFormat() Experimental

現在のシステムにおける、8 ビット深度で通常のダイナミックレンジのコンテンツを表示するために最適なキャンバステクスチャーの形式を返します。

アダプターとデバイスを要求する

js
async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU に対応していません。");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("WebGPU アダプターを要求できませんでした。");
  }

  const device = await adapter.requestDevice();

  //...
}

GPUCanvasContext を最適なテクスチャー形式で設定する

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

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

仕様書

Specification
WebGPU
# gpu-interface

ブラウザーの互換性

BCD tables only load in the browser

関連情報