From 9403d2e86d827724d461007efde3d264c00ec601 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Fri, 1 Dec 2023 10:35:20 +0900
Subject: [PATCH] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9=E3=81=AE?=
 =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?=
 =?UTF-8?q?=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/webglshader/index.md | 97 +++++++++++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 files/ja/web/api/webglshader/index.md

diff --git a/files/ja/web/api/webglshader/index.md b/files/ja/web/api/webglshader/index.md
new file mode 100644
index 00000000000000..8b20bd142095c0
--- /dev/null
+++ b/files/ja/web/api/webglshader/index.md
@@ -0,0 +1,97 @@
+---
+title: WebGLShader
+slug: Web/API/WebGLShader
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{APIRef("WebGL")}}
+
+**WebGLShader** は [WebGL API](/ja/docs/Web/API/WebGL_API) の一部で、頂点シェーダーとフラグメントシェーダーを表します。 {{domxref("WebGLProgram")}} は両方の種類のシェーダーが必要です。
+
+{{InheritanceDiagram}}
+
+## 解説
+
+**WebGLShader** を作成するには {{domxref("WebGLRenderingContext.createShader")}} を使用し、それから {{domxref("WebGLRenderingContext.shaderSource()")}} を使用して GLSL ソースコードを結び付け、最後に {{domxref("WebGLRenderingContext.compileShader()")}} を呼び出してシェーダーを完成させコンパイルします。この時点では **WebGLShader** はまだ使用可能な形になっておらず、 {{domxref("WebGLProgram")}} に関連付ける必要があります。
+
+```js
+function createShader(gl, sourceCode, type) {
+  // gl.VERTEX_SHADER または gl.FRAGMENT_SHADER のどちらかをコンパイル
+  const shader = gl.createShader(type);
+  gl.shaderSource(shader, sourceCode);
+  gl.compileShader(shader);
+
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const info = gl.getShaderInfoLog(shader);
+    throw `WebGL プログラムをコンパイルできませんでした。\n\n${info}`;
+  }
+  return shader;
+}
+```
+
+シェーダーの取り付けについては {{domxref("WebGLProgram")}} を参照してください。
+
+## 例
+
+### 頂点シェーダーの作成
+
+シェーダーのソースコード文字列の書き込みのアクセスには、他にも多くの戦略があることに注意してください。これらの例は説明のためのものです。
+
+```js
+const vertexShaderSource =
+  "attribute vec4 position;\n" +
+  "void main() {\n" +
+  "  gl_Position = position;\n" +
+  "}\n";
+
+// 上の例の createShader 関数を使う
+const vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
+```
+
+### フラグメントシェーダーの作成
+
+```js
+const fragmentShaderSource =
+  "void main() {\n" + "  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n" + "}\n";
+
+// 上の例の createShader 関数を使う
+const fragmentShader = createShader(
+  gl,
+  fragmentShaderSource,
+  gl.FRAGMENT_SHADER,
+);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("WebGLProgram")}}
+- {{domxref("WebGLRenderingContext.attachShader()")}}
+- {{domxref("WebGLRenderingContext.bindAttribLocation()")}}
+- {{domxref("WebGLRenderingContext.compileShader()")}}
+- {{domxref("WebGLRenderingContext.createProgram()")}}
+- {{domxref("WebGLRenderingContext.createShader()")}}
+- {{domxref("WebGLRenderingContext.deleteProgram()")}}
+- {{domxref("WebGLRenderingContext.deleteShader()")}}
+- {{domxref("WebGLRenderingContext.detachShader()")}}
+- {{domxref("WebGLRenderingContext.getAttachedShaders()")}}
+- {{domxref("WebGLRenderingContext.getProgramParameter()")}}
+- {{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
+- {{domxref("WebGLRenderingContext.getShaderParameter()")}}
+- {{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}
+- {{domxref("WebGLRenderingContext.getShaderInfoLog()")}}
+- {{domxref("WebGLRenderingContext.getShaderSource()")}}
+- {{domxref("WebGLRenderingContext.isProgram()")}}
+- {{domxref("WebGLRenderingContext.isShader()")}}
+- {{domxref("WebGLRenderingContext.linkProgram()")}}
+- {{domxref("WebGLRenderingContext.shaderSource()")}}
+- {{domxref("WebGLRenderingContext.useProgram()")}}
+- {{domxref("WebGLRenderingContext.validateProgram()")}}