Merge branch 'mdn:main' into fix-design-responsivo

files/ja/web/api/gpucanvascontext/canvas/index.md

@@ -0,0 +1,36 @@
+---
+title: "GPUCanvasContext: canvas プロパティ"
+slug: Web/API/GPUCanvasContext/canvas
+l10n:
+  sourceCommit: 89c435da452257b944b403cc9e45036fcb22590e
+---
+
+{{APIRef("WebGPU API")}}{{SeeCompatTable}}{{SecureContext_Header}}
+
+{{domxref("GPUCanvasContext")}} インターフェイスの読み取り専用プロパティ **`canvas`** は、このコンテキストの作成元であるキャンバスへの参照を返します。
+
+## 値
+
+{{domxref("HTMLCanvasElement")}} または {{domxref("OffscreenCanvas")}} オブジェクトのインスタンスです。
+
+## 例
+
+```js
+const canvas = document.querySelector("#gpuCanvas");
+const context = canvas.getContext("webgpu");
+
+// HTMLCanvasElement への参照を返す
+context.canvas;
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [WebGPU API](/ja/docs/Web/API/WebGPU_API)

files/ja/web/api/gpucanvascontext/configure/index.md

@@ -0,0 +1,76 @@
+---
+title: "GPUCanvasContext: configure() メソッド"
+slug: Web/API/GPUCanvasContext/configure
+l10n:
+  sourceCommit: 89c435da452257b944b403cc9e45036fcb22590e
+---
+
+{{APIRef("WebGPU API")}}{{SeeCompatTable}}{{SecureContext_Header}}
+
+{{domxref("GPUCanvasContext")}} インターフェイスの **`configure()`** メソッドは、指定の {{domxref("GPUDevice")}} でレンダリングを行う用にコンテキストを設定します。このメソッドが呼ばれると、キャンバスはまず透明な黒に初期化されます。
+
+## 構文
+
+```js-nolint
+configure(configuration)
+```
+
+### 引数
+
+- `configuration`
+
+  - : 以下のプロパティを持つオブジェクトです。
+
+    - `alphaMode` {{optional_inline}}
+      - : {{domxref("GPUCanvasContext.getCurrentTexture()", "getCurrentTexture()")}} が返したテクスチャが読み取り・表示・画像ソースとしての使用をされるとき、アルファ値が持つ効果を指定する列挙値です。以下の値が使用可能です。
+        - `opaque`: アルファ値は無視されます。テクスチャが不透明ではない場合は、画像ソースとして使用されたり画面に表示される際にアルファチャンネルは 1.0 にクリアされます。これがデフォルト値です。
+        - `premultiplied`: 色の値はアルファ値を掛けた後の値です。たとえば、アルファ値 50% の 100% 赤は `[0.5, 0, 0, 0.5]` です。
+    - `colorSpace` {{optional_inline}}
+      - : `getCurrentTexture()` が返すテクスチャに書き込まれる値を表示する際に用いる色空間です。`srgb` (デフォルト) および `display-p3` が使用できます。
+    - `device`
+      - : このコンテキストで使用するレンダリング情報の取得元となる {{domxref("GPUDevice")}} です。
+    - `format`
+      - : `getCurrentTexture()` が返すテクスチャの形式です。`bgra8unorm`・`rgba8unorm`・`rgba16float` のいずれかの値をとれます。現在のシステムで最適なキャンバスのテクスチャ形式は、{{domxref("GPU.getPreferredCanvasFormat()")}} で取得できます。これを使用することが推奨されます。キャンバスコンテキストを設定する際に好ましい形式を使用しないと、プラットフォームによっては、テクスチャのコピーが増えるなど、オーバーヘッドが増加する可能性があります。
+    - `usage` {{optional_inline}}
+
+      - : `getCurrentTexture()` が返すテクスチャで許可する使用法を指定する{{glossary("Bitwise flags", "ビットフラグ")}}です。以下の値が使用可能です。
+
+        - `GPUTextureUsage.COPY_SRC`: テクスチャは、コピー操作のソースとして使用できます。たとえば、{{domxref("GPUCommandEncoder.copyTextureToBuffer()")}} を呼び出す際の引数 `source` で使用できます。
+        - `GPUTextureUsage.COPY_DST`: テクスチャは、コピー操作や書き込み操作のデスティネーションとして使用できます。たとえば、{{domxref("GPUCommandEncoder.copyTextureToTexture()")}} を呼び出す際の引数 `destination` で使用できます。
+        - `GPUTextureUsage.RENDER_ATTACHMENT`: テクスチャは、レンダーパスにおけるカラーアタッチメントとして使用できます。たとえば、{{domxref("GPUCommandEncoder.beginRenderPass()")}} を呼び出す際のカラーアタッチメントビューとして使用できます。`GPUTextureUsage.RENDER_ATTACHMENT` はデフォルトの `usage` ですが、他の値を明示的に設定した場合は自動で含まれないことに注意してください。この場合、自分で追加で含めなければなりません。
+        - `GPUTextureUsage.TEXTURE_BINDING`: テクスチャは、シェーダーでサンプルドテクスチャとして用いるためにバインドできます。たとえば、{{domxref("GPUDevice.createBindGroup()")}} を呼び出す際のバインドグループのエントリーで使用できます。
+        - `GPUTextureUsage.STORAGE_BINDING`: テクスチャは、シェーダーでストレージテクスチャとして用いるためにバインドできます。たとえば、{{domxref("GPUDevice.createBindGroup()")}} を呼び出す際のバインドグループのエントリーで使用できます。
+
+        `usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT` のように、[ビット論理和演算子](/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_OR)を用いて複数の可能な使用法を指定できます。
+
+    - `viewFormats` {{optional_inline}}
+      - : `getCurrentTexture()` が返すテクスチャから作成されるビューで使用可能な形式の配列です。指定可能なすべての値は、[Texture Formats](https://gpuweb.github.io/gpuweb/#texture-formats) を参照してください。
+
+### 返値
+
+なし (`undefined`)
+
+## 例
+
+```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)

files/ja/web/api/gpucanvascontext/getcurrenttexture/index.md

@@ -0,0 +1,71 @@
+---
+title: "GPUCanvasContext: getCurrentTexture() メソッド"
+slug: Web/API/GPUCanvasContext/getCurrentTexture
+l10n:
+  sourceCommit: 89c435da452257b944b403cc9e45036fcb22590e
+---
+
+{{APIRef("WebGPU API")}}{{SeeCompatTable}}{{SecureContext_Header}}
+
+{{domxref("GPUCanvasContext")}} インターフェイスの **`getCurrentTexture()`** メソッドは、このキャンバスコンテキストによって文書に次に合成される {{domxref("GPUTexture")}} を返します。
+
+## 構文
+
+```js-nolint
+getCurrentTexture()
+```
+
+### 引数
+
+なし
+
+### 返値
+
+{{domxref("GPUTexture")}} オブジェクトのインスタンスです。
+
+### 例外
+
+- `InvalidStateError` {{domxref("DOMException")}}
+  - : 設定をする前 (すなわち、{{domxref("GPUCanvasContext.configure()")}} を呼び出す前) のキャンバスコンテキストで `getCurrentTexture()` が呼ばれたとき投げられます。
+
+## 例
+
+```js
+const canvas = document.querySelector("#gpuCanvas");
+const context = canvas.getContext("webgpu");
+
+context.configure({
+  device: device,
+  format: navigator.gpu.getPreferredCanvasFormat(),
+  alphaMode: "premultiplied",
+});
+
+//...
+// 後で
+const commandEncoder = device.createCommandEncoder();
+
+const renderPassDescriptor = {
+  colorAttachments: [
+    {
+      clearValue: [0, 0, 0, 1], // 不透明な黒
+      loadOp: "clear",
+      storeOp: "store",
+      view: context.getCurrentTexture().createView(),
+    },
+  ],
+};
+
+const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [WebGPU API](/ja/docs/Web/API/WebGPU_API)

files/ja/web/api/gpucanvascontext/index.md

@@ -0,0 +1,51 @@
+---
+title: GPUCanvasContext
+slug: Web/API/GPUCanvasContext
+l10n:
+  sourceCommit: 89c435da452257b944b403cc9e45036fcb22590e
+---
+
+{{APIRef("WebGPU API")}}{{SeeCompatTable}}{{SecureContext_Header}}
+
+{{domxref("WebGPU API", "WebGPU API", "", "nocode")}} の **`GPUCanvasContext`** インターフェイスは、`contextType` を `"webgpu"` にして呼び出した {{domxref("HTMLCanvasElement.getContext()")}} から返される、{{htmlelement("canvas")}} 要素の WebGPU レンダリングコンテキストを表します。
+
+{{InheritanceDiagram}}
+
+## インスタンスプロパティ
+
+- {{domxref("GPUCanvasContext.canvas", "canvas")}} {{Experimental_Inline}} {{ReadOnlyInline}}
+  - : このコンテキストの作成元であるキャンバスへの参照を返します。
+
+## インスタンスメソッド
+
+- {{domxref("GPUCanvasContext.configure", "configure()")}} {{Experimental_Inline}}
+  - : 指定の {{domxref("GPUDevice")}} でレンダリングを行う用にコンテキストを設定し、キャンバスを透明な黒に初期化します。
+- {{domxref("GPUCanvasContext.getCurrentTexture", "getCurrentTexture()")}} {{Experimental_Inline}}
+  - : このキャンバスコンテキストによって文書に次に合成される {{domxref("GPUTexture")}} を返します。
+- {{domxref("GPUCanvasContext.unconfigure", "unconfigure()")}} {{Experimental_Inline}}
+  - : これまでのコンテキスト設定をすべて消去し、キャンバスコンテキストが設定されていた間に作成されたテクスチャをすべて破棄します。
+
+## 例
+
+```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)

files/ja/web/api/gpucanvascontext/unconfigure/index.md

@@ -0,0 +1,52 @@
+---
+title: "GPUCanvasContext: unconfigure() メソッド"
+slug: Web/API/GPUCanvasContext/unconfigure
+l10n:
+  sourceCommit: 89c435da452257b944b403cc9e45036fcb22590e
+---
+
+{{APIRef("WebGPU API")}}{{SeeCompatTable}}{{SecureContext_Header}}
+
+{{domxref("GPUCanvasContext")}} インターフェイスの **`unconfigure()`** メソッドは、これまでのコンテキスト設定をすべて消去し、キャンバスコンテキストが設定されていた間に {{domxref("GPUCanvasContext.getCurrentTexture", "getCurrentTexture()")}} から返されたテクスチャをすべて破棄します。
+
+## 構文
+
+```js-nolint
+unconfigure()
+```
+
+### 引数
+
+なし
+
+### 返値
+
+なし (`undefined`)
+
+## 例
+
+```js
+const canvas = document.querySelector("#gpuCanvas");
+const context = canvas.getContext("webgpu");
+
+context.configure({
+  device: device,
+  format: navigator.gpu.getPreferredCanvasFormat(),
+  alphaMode: "premultiplied",
+});
+
+// 後で
+context.unconfigure();
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [WebGPU API](/ja/docs/Web/API/WebGPU_API)