diff --git a/files/ja/web/api/gpu/getpreferredcanvasformat/index.md b/files/ja/web/api/gpu/getpreferredcanvasformat/index.md new file mode 100644 index 00000000000000..eb1b80dad85bfe --- /dev/null +++ b/files/ja/web/api/gpu/getpreferredcanvasformat/index.md @@ -0,0 +1,55 @@ +--- +title: "GPU: getPreferredCanvasFormat() メソッド" +slug: Web/API/GPU/getPreferredCanvasFormat +l10n: + sourceCommit: b6984118ac9482e683a654edfefa4b426ca3c7ca +--- + +{{APIRef("WebGPU API")}}{{SeeCompatTable}} + +{{domxref("GPU")}} インターフェイスの **`getPreferredCanvasFormat()`** メソッドは、現在のシステムにおける 8 ビット深度で通常のダイナミックレンジのコンテンツを表示する用の最適なキャンバステクスチャーの形式を返します。 + +これは、{{domxref("GPUCanvasContext.configure()")}} を呼び出す際に `format` の値を現在のシステムで最適なものにするためによく用いられます。これは推奨される方法です。キャンバスコンテキストを設定する際に適した形式を用いないと、プラットフォームによっては、テクスチャーのコピーが増えるなどの追加のオーバーヘッドが発生する可能性があります。 + +## 構文 + +```js-nolint +getPreferredCanvasFormat() +``` + +### 引数 + +なし + +### 返値 + +キャンバステクスチャーの形式を表す文字列です。`rgba8unorm` および `bgra8unorm` を取りえます。 + +### 例外 + +なし + +## 例 + +```js +const canvas = document.querySelector("#gpuCanvas"); +const context = canvas.getContext("webgpu"); + +context.configure({ + device: device, + format: navigator.gpu.getPreferredCanvasFormat(), + alphaMode: "premultiplied", +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebGPU API](/ja/docs/Web/API/WebGPU_API) diff --git a/files/ja/web/api/gpu/index.md b/files/ja/web/api/gpu/index.md new file mode 100644 index 00000000000000..c41b8042b3a359 --- /dev/null +++ b/files/ja/web/api/gpu/index.md @@ -0,0 +1,72 @@ +--- +title: GPU +slug: Web/API/GPU +l10n: + sourceCommit: ced28062a310010c347dae055bd53760b10293ba +--- + +{{APIRef("WebGPU API")}}{{SeeCompatTable}} + +{{domxref("WebGPU API", "WebGPU API", "", "nocode")}} の **`GPU`** インターフェイスは、WebGPU を使用するためのスタート地点です。デバイスの要求、機能や制限の設定、などを行える {{domxref("GPUAdapter")}} を取得するのに使用できます。 + +現在のコンテキスト用の `GPU` オブジェクトには、{{domxref("Navigator.gpu")}} または {{domxref("WorkerNavigator.gpu")}} プロパティからアクセスできます。 + +{{InheritanceDiagram}} + +## インスタンスプロパティ + +- {{domxref("GPU.wgslLanguageFeatures", "wgslLanguageFeatures")}} {{Experimental_Inline}} {{ReadOnlyInline}} + - : この WebGPU の実装が対応している [WGSL 言語の拡張](https://gpuweb.github.io/gpuweb/wgsl/#language-extension)を報告する {{domxref("WGSLLanguageFeatures")}} オブジェクトです。 + +## インスタンスメソッド + +- {{domxref("GPU.requestAdapter", "requestAdapter()")}} {{Experimental_Inline}} + - : {{domxref("GPUAdapter")}} オブジェクトのインスタンスで解決する {{jsxref("Promise")}} を返します。これを用いて、WebGPU の機能を用いるための第一のインターフェイスである {{domxref("GPUDevice")}} を要求できます。 +- {{domxref("GPU.getPreferredCanvasFormat", "getPreferredCanvasFormat()")}} {{Experimental_Inline}} + - : 現在のシステムにおける、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", +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebGPU API](/ja/docs/Web/API/WebGPU_API) diff --git a/files/ja/web/api/gpu/requestadapter/index.md b/files/ja/web/api/gpu/requestadapter/index.md new file mode 100644 index 00000000000000..56dcd07cc00fad --- /dev/null +++ b/files/ja/web/api/gpu/requestadapter/index.md @@ -0,0 +1,86 @@ +--- +title: "GPU: requestAdapter() メソッド" +slug: Web/API/GPU/requestAdapter +l10n: + sourceCommit: cf57e1e1e1756fec85425d01294ffeabc3b5b451 +--- + +{{APIRef("WebGPU API")}}{{SeeCompatTable}} + +{{domxref("GPU")}} インターフェイスの **`requestAdapter()`** メソッドは、{{domxref("GPUAdapter")}} オブジェクトのインスタンスで解決する {{jsxref("Promise")}} を返します。これを用いると、{{domxref("GPUDevice")}}、アダプターの情報、機能、制限を要求できます。 + +注意点として、ユーザーエージェントはアダプターを返すかどうかを選択します。返す場合は、渡されたオプションに沿って選択します。オプションが何も渡されなかった場合は、デバイスはデフォルトアダプターへのアクセスを提供し、これは通常ほとんどの目的に十分適します。 + +## 構文 + +```js-nolint +requestAdapter() +requestAdapter(options) +``` + +### 引数 + +- `options` {{optional_inline}} + + - : 以下のプロパティを持つオブジェクトです。 + + - `powerPreference` {{optional_inline}} + + - : システムで利用可能なアダプターからどのような種類のアダプターを選ぶべきかのヒントをユーザーエージェントに与える列挙値です。以下の値が利用できます。 + + - `undefined` (または指定なし): ヒントを与えません。 + - `"low-power"`: パフォーマンスより電力の節約を優先するヒントを与えます。アプリケーションがこの設定で十分動作するなら、ポータブルデバイスにおけるバッテリーの寿命をかなり伸ばすので、これを使用することを推奨します。これは通常オプションが指定されない場合のデフォルトです。 + - `"high-performance"`: 電力の消費よりパフォーマンスを優先するヒントを与えます。これはポータブルデバイスにおけるバッテリーの寿命をかなり縮めるので、どうしても必要な場合のみこの値を指定することを推奨します。さらに、システムは電力を節約するために消費電力が少ないアダプターに切り替えることがあるため、{{domxref("GPUDevice")}} のロスの発生率が上がる可能性があります。 + + このヒントの主な目的は、複数の GPU があるシステムにおける使用する GPU の選択に影響を与えることです。たとえば、ノートパソコンには低消費電力の統合された GPU と高パフォーマンスの独立した GPU があるものがあります。どのアダプターが返されるかは、バッテリーの状態、接続されたディスプレイ、取り外し可能な GPU などの異なる因子に影響を受ける可能性があります。 + + > **メモ:** デュアル GPU の macOS デバイスで実行されている Chrome では、`requestAdapter()` が `powerPreference` オプションなしで呼び出され、デバイスが AC 電源で動作している場合は、高パフォーマンスの独立した GPU が返されます。そうでない場合は、低消費電力の統合された GPU が返されます。 + +### フォールバックアダプター + +ユーザーエージェントがそれが利用可能な中で最適な選択肢だと判断した場合は、ユーザーエージェントにより提供されるアダプターは **フォールバックアダプター** である可能性があります。一般的に、フォールバックアダプターはかなりパフォーマンスが落ちるかわりに、より広い互換性、より予測可能な挙動、よりよいプライバシーのうちいくつかを持ちます。たとえば、フォールバックアダプターを通じて API のソフトウェアベースの実装を提供するブラウザーもあるかもしれません。フォールバックアダプターはすべてのシステムで利用可能ではないでしょう。 + +アプリケーションがフォールバックアダプターで動作するのを防ぎたい場合は、{{domxref("GPUDevice")}} を要求する前に {{domxref("GPUAdapter.isFallbackAdapter")}} 属性をチェックするべきです。 + +> **メモ:** 仕様書には `requestAdapter()` 用の `forceFallbackAdapter` オプションがあります。これは、`true` に設定するとユーザーエージェントに利用可能であれば必ずフォールバックアダプターを返させる論理値です。これに対応しているブラウザーはまだありません。 + +### 返値 + +要求に成功した場合は {{domxref("GPUAdapter")}} オブジェクトのインスタンスで解決する {{jsxref("Promise")}} です。 + +適切なアダプターが利用できない場合は、`requestAdapter()` は `null` で解決します。 + +### 例外 + +なし + +## 例 + +```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(); + + //... +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebGPU API](/ja/docs/Web/API/WebGPU_API) diff --git a/files/ja/web/api/gpu/wgsllanguagefeatures/index.md b/files/ja/web/api/gpu/wgsllanguagefeatures/index.md new file mode 100644 index 00000000000000..1048290be4a912 --- /dev/null +++ b/files/ja/web/api/gpu/wgsllanguagefeatures/index.md @@ -0,0 +1,49 @@ +--- +title: "GPU: wgslLanguageFeatures プロパティ" +slug: Web/API/GPU/wgslLanguageFeatures +l10n: + sourceCommit: cf57e1e1e1756fec85425d01294ffeabc3b5b451 +--- + +{{APIRef("WebGPU API")}}{{SeeCompatTable}} + +{{domxref("GPU")}} インターフェイスの読み取り専用プロパティ **`wgslLanguageFeatures`** は、この WebGPU の実装が対応している [WGSL 言語の拡張](https://gpuweb.github.io/gpuweb/wgsl/#language-extension)を報告する {{domxref("WGSLLanguageFeatures")}} オブジェクトを返します。 + +> **メモ:** API に対応しているすべてのブラウザーの WebGPU ですべての WGSL 言語の拡張が利用可能なわけではありません。使用することを決めたすべての拡張を徹底的にテストすることを推奨します。 + +## 値 + +{{domxref("WGSLLanguageFeatures")}} オブジェクトのインスタンスです。これは [Set 風](/ja/docs/Web/JavaScript/Reference/Global_Objects/Set)オブジェクトです。 + +## 例 + +```js +if (!navigator.gpu) { + throw Error("WebGPU に対応していません。"); +} + +const wgslFeatures = navigator.gpu.wgslLanguageFeatures; + +// 集合のサイズを返す +console.log(wgslFeatures.size); + +// values() を用いて集合の要素すべてを走査する +const valueIterator = wgslFeatures.values(); +for (const value of valueIterator) { + console.log(value); +} + +// ... +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebGPU API](/ja/docs/Web/API/WebGPU_API)