diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/api/webglrenderingcontext | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/web/api/webglrenderingcontext')
19 files changed, 2062 insertions, 0 deletions
diff --git a/files/ja/web/api/webglrenderingcontext/attachshader/index.html b/files/ja/web/api/webglrenderingcontext/attachshader/index.html new file mode 100644 index 0000000000..93965d40f6 --- /dev/null +++ b/files/ja/web/api/webglrenderingcontext/attachshader/index.html @@ -0,0 +1,95 @@ +--- +title: WebGLRenderingContext.attachShader() +slug: Web/API/WebGLRenderingContext/attachShader +translation_of: Web/API/WebGLRenderingContext/attachShader +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong>WebGLRenderingContext.attachShader()</strong> メソッドは、フラグメントか頂点のどちらかの {{domxref("WebGLShader")}} を {{domxref("WebGLProgram")}} にアタッチします。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">void <var><em>gl</em>.attach</var>Shader<var>(program, shader);</var> +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt><code>program</code></dt> + <dd>{{domxref("WebGLProgram")}}。</dd> + <dt><code>shader</code></dt> + <dd>フラグメントか頂点の {{domxref("WebGLShader")}}。</dd> +</dl> + +<h2 id="例">例</h2> + +<p>以下は既存のシェーダーを {{domxref("WebGLProgram")}} にアタッチするコードです。</p> + +<pre class="brush: js">var program = gl.createProgram(); + +// Attach pre-existing shaders +gl.attachShader(program, vertexShader); +gl.attachShader(program, fragmentShader); + +gl.linkProgram(program); + +if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) { + var info = gl.getProgramInfoLog(program); + throw 'Could not compile WebGL program. \n\n' + info; +} +</pre> + +<h2 id="仕様策定状況">仕様策定状況</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.9", "attachShader")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初回定義。</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glAttachShader.xml", "glAttachShader")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL マニュアルページ。</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザーの対応">ブラウザーの対応</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.attachShader")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{domxref("WebGLProgram")}}</li> + <li>{{domxref("WebGLShader")}}</li> + <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.compileShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.createShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li> + <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.isShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li> + <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li> +</ul> diff --git a/files/ja/web/api/webglrenderingcontext/bindbuffer/index.html b/files/ja/web/api/webglrenderingcontext/bindbuffer/index.html new file mode 100644 index 0000000000..1dfa4e17ae --- /dev/null +++ b/files/ja/web/api/webglrenderingcontext/bindbuffer/index.html @@ -0,0 +1,123 @@ +--- +title: WebGLRenderingContext.bindBuffer() +slug: Web/API/WebGLRenderingContext/bindBuffer +translation_of: Web/API/WebGLRenderingContext/bindBuffer +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.bindBuffer()</code></strong> メソッドは、与えられた {{domxref("WebGLBuffer")}} をターゲットに結合します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">void <var>gl</var>.bindBuffer(<var>target</var>, <var>buffer</var>); +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt>target</dt> + <dd>結合する場所 (ターゲット) の {{domxref("GLenum")}} です。以下の値を与えることができます。 + <ul> + <li><code>gl.ARRAY_BUFFER</code>: 頂点の属性を含むバッファーで、頂点座標、テクスチャ座標データや、頂点色データのようなものです。</li> + <li><code>gl.ELEMENT_ARRAY_BUFFER</code>: 要素の位置指定に使われるバッファーです。</li> + <li>{{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} を使用している場合は、更に以下の値を利用することができます。 + <ul> + <li><code>gl.COPY_READ_BUFFER</code>: バッファーオブジェクトを他へコピーするためのバッファーです。</li> + <li><code>gl.COPY_WRITE_BUFFER</code>: バッファーオブジェクトを他へコピーするためのバッファーです。</li> + <li><code>gl.TRANSFORM_FEEDBACK_BUFFER</code>: 書き戻し操作を変換するバッファーです。</li> + <li><code>gl.UNIFORM_BUFFER</code>: ユニフォームブロックの格納に使われるバッファーです。</li> + <li><code>gl.PIXEL_PACK_BUFFER</code>: ピクセル移動操作に使われるバッファーです。</li> + <li><code>gl.PIXEL_UNPACK_BUFFER</code>: ピクセル移動操作に使われるバッファーです。</li> + </ul> + </li> + </ul> + </dd> + <dt>buffer</dt> + <dd>結合する {{domxref("WebGLBuffer")}} です。</dd> +</dl> + +<h3 id="返り値">返り値</h3> + +<p>ありません。</p> + +<h3 id="例外">例外</h3> + +<p>一つのターゲットにのみ {{domxref("WebGLBuffer")}} を結合できます。バッファーを他のターゲットに結合しようとすると、<code>INVALID_OPERATION</code> エラーをスローして現在のバッファ結合を同じままにします。</p> + +<p>{{domxref("WebGLBuffer")}} が {{domxref("WebGLRenderingContext.deleteBuffer()", "deleteBuffer")}} によって削除されるようにマークされると、(再び) 結合できなくなります。そうしようとしても <code>INVALID_OPERATION</code> エラーが生成されて、現在の結合は変更されません。</p> + +<h2 id="例">例</h2> + +<h3 id="バッファーをターゲットに結合">バッファーをターゲットに結合</h3> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var gl = canvas.getContext('webgl'); +var buffer = gl.createBuffer(); + +gl.bindBuffer(gl.ARRAY_BUFFER, buffer); +</pre> + +<h3 id="現在結合されているものの取得">現在結合されているものの取得</h3> + +<p>現在のバッファー結合を確認するには、<code>ARRAY_BUFFER_BINDING</code> や <code>ELEMENT_ARRAY_BUFFER_BINDING</code> の定数で問い合わせます。</p> + +<pre class="brush: js">gl.getParameter(gl.ARRAY_BUFFER_BINDING); +gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING); +</pre> + +<h2 id="仕様策定状況">仕様策定状況</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.5", "bindBuffer")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>WebGL 初回定義。</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glBindBuffer.xml", "glBindBuffer")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL ES 2 API (と同様な) マニュアルページ。</td> + </tr> + <tr> + <td>{{SpecName('WebGL2', "#3.7.1", "bindBuffer")}}</td> + <td>{{Spec2('WebGL2')}}</td> + <td> + <p>WebGL 2 のために定義を更新。</p> + + <p>以下の新しい <code>target</code> バッファーを追加。<br> + <code>gl.COPY_READ_BUFFER</code>,<br> + <code>gl.COPY_WRITE_BUFFER</code>,<br> + <code>gl.TRANSFORM_FEEDBACK_BUFFER</code>,<br> + <code>gl.UNIFORM_BUFFER</code>,<br> + <code>gl.PIXEL_PACK_BUFFER</code>,<br> + <code>gl.PIXEL_UNPACK_BUFFER</code></p> + </td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glBindBuffer.xhtml", "glBindBuffer")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td>OpenGL ES 3 API (と同様な) マニュアルページ。</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザーの対応">ブラウザーの対応</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.bindBuffer")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.isBuffer()")}}</li> + <li>他のバッファ: {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li> +</ul> diff --git a/files/ja/web/api/webglrenderingcontext/bufferdata/index.html b/files/ja/web/api/webglrenderingcontext/bufferdata/index.html new file mode 100644 index 0000000000..cd45cbdc5c --- /dev/null +++ b/files/ja/web/api/webglrenderingcontext/bufferdata/index.html @@ -0,0 +1,155 @@ +--- +title: WebGLRenderingContext.bufferData() +slug: Web/API/WebGLRenderingContext/bufferData +translation_of: Web/API/WebGLRenderingContext/bufferData +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> <strong><code>WebGLRenderingContext.bufferData()</code></strong> メソッドは、バッファーオブジェクトのデータストアを初期化、作成します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">// WebGL1: +void gl.bufferData(target, size, usage); +void gl.bufferData(target, ArrayBuffer? srcData, usage); +void gl.bufferData(target, ArrayBufferView srcData, usage); + +// WebGL2: +void gl.bufferData(target, ArrayBufferView srcData, usage, srcOffset, length); +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt>target</dt> + <dd>結合する場所 (ターゲット) を指定する {{domxref("GLenum")}}。以下の値を取ることができます。 + <ul> + <li><code>gl.ARRAY_BUFFER</code>: 頂点の属性を含むバッファーで、頂点座標、テクスチャ座標データや、頂点色データのようなものです。</li> + <li><code>gl.ELEMENT_ARRAY_BUFFER</code>: 要素の位置指定に使用されるバッファーです。</li> + <li>{{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} を使用している場合は、更にに以下の値を利用できます。 + <ul> + <li><code>gl.COPY_READ_BUFFER</code>: バッファーオブジェクトを他へコピーするためのバッファーです。</li> + <li><code>gl.COPY_WRITE_BUFFER</code>: バッファーオブジェクトを他へコピーするためのバッファーです。</li> + <li><code>gl.TRANSFORM_FEEDBACK_BUFFER</code>: 書き戻し操作を変換するバッファーです。</li> + <li><code>gl.UNIFORM_BUFFER</code>: ユニフォームブロックの格納に使われるバッファーです。</li> + <li><code>gl.PIXEL_PACK_BUFFER</code>: ピクセル移動操作に使われるバッファーです。</li> + <li><code>gl.PIXEL_UNPACK_BUFFER</code>: ピクセル移動操作に使われるバッファーです。</li> + </ul> + </li> + </ul> + </dd> + <dt>size</dt> + <dd>{{domxref("GLsizeiptr")}} のバッファーオブジェクトのデータストアのサイズ。</dd> + <dt>srcData {{optional_inline}}</dt> + <dd>{{jsxref("ArrayBuffer")}}, {{jsxref("SharedArrayBuffer")}} か {{domxref("ArrayBufferView")}} の型付き配列型の一つで、データストアへ格納されます。<code>null</code> の場合、データストアは作成されますが、内容は初期化されず未定義です。</dd> + <dt>usage</dt> + <dd>データストアの用途を指定する {{domxref("GLenum")}}。以下の値を取ることができます。 + <ul> + <li><code>gl.STATIC_DRAW</code>: バッファーの内容は、何度か使用されてあまり変更されません。バッファーへ書き込まれますが、読み出せません。</li> + <li><code>gl.DYNAMIC_DRAW</code>: バッファーの内容は、よく使用されて何度か変更されます。バッファーへ書き込まれますが、読み出せません。</li> + <li><code>gl.STREAM_DRAW</code>: バッファーの内容は、よく使用され変更されます。バッファーへ書き込まれますが、読み出せません。</li> + <li>{{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} を使用している場合、さらに以下の値を取ることができます。 + <ul> + <li><code>gl.STATIC_READ</code>: バッファーの内容は、何度か使用されてあまり変更されません。バッファーから読み出されますが、書き込めません。</li> + <li><code>gl.DYNAMIC_READ</code>: バッファーの内容は、よく使用されて何度か変更されます。バッファーから読み出されますが、書き込めません。</li> + <li><code>gl.STREAM_READ</code>: バッファーの内容は、よく使用され変更されます。バッファーから読み出されますが、書き込めません。</li> + <li><code>gl.STATIC_COPY</code>: バッファーの内容は、何度か使用されてあまり変更されません。ユーザーによる書き込みや読み出しはできません。</li> + <li><code>gl.DYNAMIC_COPY</code>: バッファーの内容は、よく使用されて何度か変更されます。ユーザーによる書き込みや読み出しはできません。</li> + <li><code>gl.STREAM_COPY</code>: バッファーの内容は、よく使用され変更されます。ユーザーによる書き込みや読み出しはできません。</li> + </ul> + </li> + </ul> + </dd> + <dt>srcOffset</dt> + <dd>バッファー読み出しを開始する要素の位置のオフセットを指定する {{domxref("GLuint")}}。</dd> + <dt><code>length</code> {{optional_inline}}</dt> + <dd>{{domxref("GLuint")}}。既定値は 0 です。</dd> +</dl> + +<h3 id="返り値">返り値</h3> + +<p>ありません。</p> + +<h3 id="例外">例外</h3> + +<ul> + <li>与えられた <code>size</code> でデータストアを作成できない場合、<code>gl.OUT_OF_MEMORY</code> エラーをスローします。</li> + <li><code>size</code> が負数の場合、<code>gl.INVALID_VALUE</code> エラーをスローします。</li> + <li><code>target</code> や <code>usage</code> が許可された列挙のものでない場合、<code>gl.INVALID_ENUM</code> エラーをスローします。</li> +</ul> + +<h2 id="例">例</h2> + +<h3 id="bufferData_の使用"><code>bufferData</code> の使用</h3> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var gl = canvas.getContext('webgl'); +var buffer = gl.createBuffer(); +gl.bindBuffer(gl.ARRAY_BUFFER, buffer); +gl.bufferData(gl.ARRAY_BUFFER, 1024, gl.STATIC_DRAW); +</pre> + +<h3 id="バッファー情報の取得">バッファー情報の取得</h3> + +<p>現在のバッファーの用途やサイズを確認するには、{{domxref("WebGLRenderingContext.getBufferParameter()")}} メソッドを使用します。</p> + +<pre class="brush: js">gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_SIZE); +gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_USAGE); +</pre> + +<h2 id="仕様策定状況">仕様策定状況</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.5", "bufferData")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初回定義。</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glBufferData.xml", "glBufferData")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL API のマニュアルページ。</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glBufferData.xhtml", "glBufferData")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td>OpenGL ES 3 API (と同様の) マニュアルページ。<br> + <br> + 以下の新しい <code>target</code> バッファーを追加。<br> + <code>gl.COPY_READ_BUFFER</code>,<br> + <code>gl.COPY_WRITE_BUFFER</code>,<br> + <code>gl.TRANSFORM_FEEDBACK_BUFFER</code>,<br> + <code>gl.UNIFORM_BUFFER</code>,<br> + <code>gl.PIXEL_PACK_BUFFER</code>,<br> + <code>gl.PIXEL_UNPACK_BUFFER</code><br> + <br> + 以下の新しい <code>usage</code> ヒントを追加。<br> + <code>gl.STATIC_READ</code>,<br> + <code>gl.DYNAMIC_READ</code>,<br> + <code>gl.STREAM_READ</code>,<br> + <code>gl.STATIC_COPY</code>,<br> + <code>gl.DYNAMIC_COPY</code>,<br> + <code>gl.STREAM_COPY</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザーの対応">ブラウザーの対応</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.bufferData")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.bufferSubData()")}}</li> + <li>他のバッファー : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li> +</ul> diff --git a/files/ja/web/api/webglrenderingcontext/clear/index.html b/files/ja/web/api/webglrenderingcontext/clear/index.html new file mode 100644 index 0000000000..80a32fd495 --- /dev/null +++ b/files/ja/web/api/webglrenderingcontext/clear/index.html @@ -0,0 +1,89 @@ +--- +title: WebGLRenderingContext.clear() +slug: Web/API/WebGLRenderingContext/clear +translation_of: Web/API/WebGLRenderingContext/clear +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.clear()</code></strong> メソッドは、バッファーをプリセット値で消去します。</p> + +<p>プリセット値は、{{domxref("WebGLRenderingContext.clearColor", "clearColor()")}}, {{domxref("WebGLRenderingContext.clearDepth", "clearDepth()")}} や {{domxref("WebGLRenderingContext.clearStencil", "clearStencil()")}} で設定可能です。</p> + +<p>シザーボックス、ディザリング、バッファー書き込みマスクは <code>clear()</code> メソッドに影響します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">void <var>gl</var>.clear(<var>mask</var>); +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt><code>mask</code></dt> + <dd>消去されるバッファーを示す {{domxref("GLbitfield")}} のビット論理和マスクです。以下の値を取ることができます。 + <ul> + <li><code>gl.COLOR_BUFFER_BIT</code></li> + <li><code>gl.DEPTH_BUFFER_BIT</code></li> + <li><code>gl.STENCIL_BUFFER_BIT</code></li> + </ul> + </dd> +</dl> + +<h3 id="返り値">返り値</h3> + +<p>ありません。</p> + +<h3 id="例外">例外</h3> + +<p><em>mask</em> が記載した値のうちどれでもない場合、<code>gl.INVALID_ENUM</code> エラーがスローされます。</p> + +<h2 id="例">例</h2> + +<p><code>clear()</code> メソッドは複数の値を受け入れることができます。</p> + +<pre class="brush: js">gl.clear(gl.DEPTH_BUFFER_BIT); +gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT); +</pre> + +<p>現在の消去する値を取得するには、<code>COLOR_CLEAR_VALUE</code>, <code>DEPTH_CLEAR_VALUE</code>, や <code>STENCIL_CLEAR_VALUE</code> 定数で問い合わせます。</p> + +<pre class="brush: js">gl.getParameter(gl.COLOR_CLEAR_VALUE); +gl.getParameter(gl.DEPTH_CLEAR_VALUE); +gl.getParameter(gl.STENCIL_CLEAR_VALUE); +</pre> + +<h2 id="仕様策定状況">仕様策定状況</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.11", "clear")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初回定義。</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glClear.xml", "glClear")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL API のマニュアルページ。</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザーの対応">ブラウザーの対応</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.clear")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.clearColor()")}}</li> + <li>{{domxref("WebGLRenderingContext.clearDepth()")}}</li> + <li>{{domxref("WebGLRenderingContext.clearStencil()")}}</li> +</ul> diff --git a/files/ja/web/api/webglrenderingcontext/clearcolor/index.html b/files/ja/web/api/webglrenderingcontext/clearcolor/index.html new file mode 100644 index 0000000000..50b8db0960 --- /dev/null +++ b/files/ja/web/api/webglrenderingcontext/clearcolor/index.html @@ -0,0 +1,79 @@ +--- +title: WebGLRenderingContext.clearColor() +slug: Web/API/WebGLRenderingContext/clearColor +translation_of: Web/API/WebGLRenderingContext/clearColor +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.clearColor()</code></strong> メソッドは、カラーバッファーの消去に使われる色の値を指定します。</p> + +<p>この指定は {{domxref("WebGLRenderingContext.clear", "clear()")}} メソッドを呼んだときに使用される色です。値は 0 から 1 に丸められます。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">void <var>gl</var>.clearColor(<var>red, green, blue, alpha</var>); +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt><code>red</code></dt> + <dd>赤色を指定する {{domxref("GLclampf")}} で、カラーバッファーの消去に使われます。既定値は 0 です。</dd> + <dt><code>green</code></dt> + <dd>緑色を指定する {{domxref("GLclampf")}} で、カラーバッファーの消去に使われます。既定値は 0 です。</dd> + <dt><code>blue</code></dt> + <dd>青色を指定する {{domxref("GLclampf")}} で、カラーバッファーの消去に使われます。既定値は 0 です。</dd> + <dt><code>alpha</code></dt> + <dd>アルファ (不透明度) を指定する {{domxref("GLclampf")}} で、カラーバッファーの消去に使われます。既定値は 0 です。</dd> +</dl> + +<h3 id="返り値">返り値</h3> + +<p>ありません。</p> + +<h2 id="例">例</h2> + +<pre class="brush: js">gl.clearColor(1, 0.5, 0.5, 3); +</pre> + +<p>現在の消去に使われる色を取得するには、<code>COLOR_CLEAR_VALUE</code> 定数で問い合わせると {{jsxref("Float32Array")}} を返します。</p> + +<pre class="brush: js">gl.getParameter(gl.COLOR_CLEAR_VALUE); +// Float32Array[1, 0.5, 0.5, 1] +</pre> + +<h2 id="仕様策定状況">仕様策定状況</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.3", "clearColor")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初回定義。</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glClearColor.xml", "glClearColor")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL API のマニュアルページ。</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザーの対応">ブラウザーの対応</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.clearColor")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.clear()")}}</li> + <li>{{domxref("WebGLRenderingContext.clearDepth()")}}</li> + <li>{{domxref("WebGLRenderingContext.clearStencil()")}}</li> +</ul> diff --git a/files/ja/web/api/webglrenderingcontext/cleardepth/index.html b/files/ja/web/api/webglrenderingcontext/cleardepth/index.html new file mode 100644 index 0000000000..038675c9b2 --- /dev/null +++ b/files/ja/web/api/webglrenderingcontext/cleardepth/index.html @@ -0,0 +1,72 @@ +--- +title: WebGLRenderingContext.clearDepth() +slug: Web/API/WebGLRenderingContext/clearDepth +translation_of: Web/API/WebGLRenderingContext/clearDepth +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.clearDepth()</code></strong> メソッドは、深度バッファーを消去する値を指定します。</p> + +<p>この指定は、{{domxref("WebGLRenderingContext.clear", "clear()")}} メソッドを呼ぶときに使用される深度の数値です。値は 0 から 1 に丸められます。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">void <var>gl</var>.clearDepth(<var>depth</var>); +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt><code>depth</code></dt> + <dd>深度の値を指定する {{domxref("GLclampf")}} で、深度バッファーを消去するときに使われる値です。既定値は 1 です。</dd> +</dl> + +<h3 id="返り値">返り値</h3> + +<p>ありません。</p> + +<h2 id="例">例</h2> + +<pre class="brush: js">gl.clearDepth(0.5); +</pre> + +<p>現在の深度を消去する値を取得するには、<code>DEPTH_CLEAR_VALUE</code> 定数で問い合わせます。</p> + +<pre class="brush: js">gl.getParameter(gl.DEPTH_CLEAR_VALUE); +// 0.5</pre> + +<h2 id="仕様策定状況">仕様策定状況</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.3", "clearDepth")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初回定義。</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glClearDepthf.xml", "glClearDepthf")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL API のマニュアルページ。</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザーの対応">ブラウザーの対応</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.clearDepth")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.clear()")}}</li> + <li>{{domxref("WebGLRenderingContext.clearColor()")}}</li> + <li>{{domxref("WebGLRenderingContext.clearStencil()")}}</li> +</ul> diff --git a/files/ja/web/api/webglrenderingcontext/clearstencil/index.html b/files/ja/web/api/webglrenderingcontext/clearstencil/index.html new file mode 100644 index 0000000000..7efeb488d8 --- /dev/null +++ b/files/ja/web/api/webglrenderingcontext/clearstencil/index.html @@ -0,0 +1,72 @@ +--- +title: WebGLRenderingContext.clearStencil() +slug: Web/API/WebGLRenderingContext/clearStencil +translation_of: Web/API/WebGLRenderingContext/clearStencil +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.clearStencil()</code></strong> メソッドは、ステンシルバッファーを消去する値を指定します。</p> + +<p>この指定は、{{domxref("WebGLRenderingContext.clear", "clear()")}} メソッドを呼ぶときに使用されるステンシルの値です。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">void <var>gl</var>.clearStencil(<var>s</var>); +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt><code>s</code></dt> + <dd>インデックスを指定する {{domxref("GLint")}} で、ステンシルバッファーの消去に使用される値です。既定値は 0 です。</dd> +</dl> + +<h3 id="返り値">返り値</h3> + +<p>ありません。</p> + +<h2 id="例">例</h2> + +<pre class="brush: js">gl.clearStencil(1); +</pre> + +<p>現在のステンシルを消去する値を取得するには、<code>STENCIL_CLEAR_VALUE</code> 定数で問い合わせます。</p> + +<pre class="brush: js">gl.getParameter(gl.STENCIL_CLEAR_VALUE); +// 1</pre> + +<h2 id="仕様策定状況">仕様策定状況</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様策定状況</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.3", "clearStencil")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初回定義。</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glClearStencil.xml", "glClearStencil")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL API のマニュアルページ。</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザーの対応">ブラウザーの対応</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.clearStencil")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.clear()")}}</li> + <li>{{domxref("WebGLRenderingContext.clearColor()")}}</li> + <li>{{domxref("WebGLRenderingContext.clearDepth()")}}</li> +</ul> diff --git a/files/ja/web/api/webglrenderingcontext/compileshader/index.html b/files/ja/web/api/webglrenderingcontext/compileshader/index.html new file mode 100644 index 0000000000..adcb119b07 --- /dev/null +++ b/files/ja/web/api/webglrenderingcontext/compileshader/index.html @@ -0,0 +1,81 @@ +--- +title: WebGLRenderingContext.compileShader() +slug: Web/API/WebGLRenderingContext/compileShader +translation_of: Web/API/WebGLRenderingContext/compileShader +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong>WebGLRenderingContext.compileShader()</strong> メソッドは、GLSL シェーダーをバイナリへコンパイルします。これは {{domxref("WebGLProgram")}} に使用することができます。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">void <var><em>gl</em>.compileShader</var><var>(shader);</var> +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt><code>shader</code></dt> + <dd>フラグメントか頂点の {{domxref("WebGLShader")}}。</dd> +</dl> + +<h2 id="例">例</h2> + +<pre class="brush: js">var shader = gl.createShader(gl.VERTEX_SHADER); +gl.shaderSource(shader, shaderSource); +gl.compileShader(shader); +</pre> + +<h2 id="仕様策定状況">仕様策定状況</h2> + +<table class="standard-table" style="font-family: Arial,x-locale-body,sans-serif; font-size: 1rem; letter-spacing: -0.00278rem;"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.9", "compileShader")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初回定義。</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glCompileShader.xml", "glCompileShader")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL マニュアルページ。</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザーの対応">ブラウザーの対応</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.compileShader")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{domxref("WebGLProgram")}}</li> + <li>{{domxref("WebGLShader")}}</li> + <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.createShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li> + <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.isShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li> + <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li> +</ul> diff --git a/files/ja/web/api/webglrenderingcontext/createbuffer/index.html b/files/ja/web/api/webglrenderingcontext/createbuffer/index.html new file mode 100644 index 0000000000..709db8e9ac --- /dev/null +++ b/files/ja/web/api/webglrenderingcontext/createbuffer/index.html @@ -0,0 +1,67 @@ +--- +title: WebGLRenderingContext.createBuffer() +slug: Web/API/WebGLRenderingContext/createBuffer +translation_of: Web/API/WebGLRenderingContext/createBuffer +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.createBuffer()</code></strong> メソッドは、頂点や色といったデータを格納する {{domxref("WebGLBuffer")}} を作成、初期化します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">WebGLBuffer <var>gl</var>.createBuffer(); +</pre> + +<h3 id="引数">引数</h3> + +<p>ありません。</p> + +<h3 id="返り値">返り値</h3> + +<p>頂点や色といったデータを格納する {{domxref("WebGLBuffer")}} です。</p> + +<h2 id="例">例</h2> + +<h3 id="バッファーの作成">バッファーの作成</h3> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var gl = canvas.getContext('webgl'); +var buffer = gl.createBuffer(); +</pre> + +<h2 id="仕様策定状況">仕様策定状況</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.5", "createBuffer")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初回定義。</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glGenBuffers.xml", "glGenBuffers")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL API (と同様な) マニュアルページ</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザーの対応">ブラウザーの対応</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.createBuffer")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.bindBuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.isBuffer()")}}</li> + <li>他のバッファー : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li> +</ul> diff --git a/files/ja/web/api/webglrenderingcontext/createprogram/index.html b/files/ja/web/api/webglrenderingcontext/createprogram/index.html new file mode 100644 index 0000000000..4a986bb515 --- /dev/null +++ b/files/ja/web/api/webglrenderingcontext/createprogram/index.html @@ -0,0 +1,83 @@ +--- +title: WebGLRenderingContext.createProgram() +slug: Web/API/WebGLRenderingContext/createProgram +translation_of: Web/API/WebGLRenderingContext/createProgram +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.createProgram()</code></strong> メソッドは、{{domxref("WebGLProgram")}} オブジェクトを作成、初期化します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">WebGLProgram <var>gl</var>.createProgram(); +</pre> + +<h3 id="引数">引数</h3> + +<p>ありません。</p> + +<h3 id="返り値">返り値</h3> + +<p>{{domxref("WebGLProgram")}} オブジェクトは、2 つのコンパイルされた {{domxref("WebGLShader")}} の組み合わせで、頂点シェーダーとフラグメントシェーダー (どちらも GLSL で書かれる) で成り立ちます。そして、これらを使用可能なプログラムへとリンクします。</p> + +<h2 id="例">例</h2> + +<h3 id="WebGL_プログラムの作成">WebGL プログラムの作成</h3> + +<pre class="brush: js">var program = gl.createProgram(); + +// Attach pre-existing shaders +gl.attachShader(program, vertexShader); +gl.attachShader(program, fragmentShader); + +gl.linkProgram(program); + +if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) { + var info = gl.getProgramInfoLog(program); + throw 'Could not compile WebGL program. \n\n' + info; +} +</pre> + +<p>{{domxref("WebGLShader")}} を参照すると、上記サンプルの <code>vertexShader</code> と <code>fragmentShader</code> の作成についての情報が得られます。</p> + +<h2 id="仕様策定状況">仕様策定状況</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.9", "createProgram")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初回定義。</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glCreateProgram.xml", "glCreateProgram")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td> + <p>OpenGL API (と同様の) マニュアルページ。</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザーの対応">ブラウザーの対応</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.createProgram")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li> +</ul> diff --git a/files/ja/web/api/webglrenderingcontext/createshader/index.html b/files/ja/web/api/webglrenderingcontext/createshader/index.html new file mode 100644 index 0000000000..66ccf943ce --- /dev/null +++ b/files/ja/web/api/webglrenderingcontext/createshader/index.html @@ -0,0 +1,80 @@ +--- +title: WebGLRenderingContext.createShader() +slug: Web/API/WebGLRenderingContext/createShader +translation_of: Web/API/WebGLRenderingContext/createShader +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong>WebGLRenderingContext.createShader()</strong> メソッドは、{{domxref("WebGLShader")}} を作成します。それからさらに、 {{domxref("WebGLRenderingContext.shaderSource()")}} と {{domxref("WebGLRenderingContext.compileShader()")}} を用いて設定できます。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">WebGLShader <var><em>gl</em>.</var>createShader<var>(type);</var> +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt><code>type</code></dt> + <dd><code>gl.VERTEX_SHADER</code> と <code>gl.FRAGMENT_SHADER</code> のどちらか</dd> +</dl> + +<h2 id="例">例</h2> + +<p>用例については {{domxref("WebGLShader")}} を参照してください。</p> + +<h2 id="仕様策定状況">仕様策定状況</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.9", "createShader")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初回定義。</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glCreateShader.xml", "glCreateShader")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL マニュアルページ。</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザーの対応">ブラウザーの対応</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.createShader")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{domxref("WebGLProgram")}}</li> + <li>{{domxref("WebGLShader")}}</li> + <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.bindAttribLocation()")}}</li> + <li>{{domxref("WebGLRenderingContext.compileShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.createShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li> + <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.isShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li> + <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li> +</ul> diff --git a/files/ja/web/api/webglrenderingcontext/drawarrays/index.html b/files/ja/web/api/webglrenderingcontext/drawarrays/index.html new file mode 100644 index 0000000000..b2ddd3c562 --- /dev/null +++ b/files/ja/web/api/webglrenderingcontext/drawarrays/index.html @@ -0,0 +1,91 @@ +--- +title: WebGLRenderingContext.drawArrays() +slug: Web/API/WebGLRenderingContext/drawArrays +translation_of: Web/API/WebGLRenderingContext/drawArrays +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.drawArrays()</code></strong> メソッドは、配列データからプリミティブを描画します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">void <var>gl</var>.drawArrays(<var>mode</var>, <var>first</var>, <var>count</var>); +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt><code>mode</code></dt> + <dd>描画するプリミティブの種類を指定する {{domxref("GLenum")}}。以下の値を取ることができます。 + <ul> + <li><code>gl.POINTS</code>: 単一の点を描画します。</li> + <li><code>gl.LINE_STRIP</code>: 次の線へと直線を描画します。</li> + <li><code>gl.LINE_LOOP</code>: 次の線へと直線を描画し、最後の頂点は最初のものに接続します。</li> + <li><code>gl.LINES</code>: 頂点 2 つごとに、その間に線を描画します。</li> + <li><code><a href="https://en.wikipedia.org/wiki/Triangle_strip">gl.TRIANGLE_STRIP</a></code></li> + <li><code><a href="https://en.wikipedia.org/wiki/Triangle_fan">gl.TRIANGLE_FAN</a></code></li> + <li><code>gl.TRIANGLES</code>: 頂点 3 つの集まりごとに、三角形を描画します。</li> + </ul> + </dd> + <dt>first</dt> + <dd>頂点ベクトルの配列の開始インデックスを指定する {{domxref("GLint")}}。</dd> + <dt>count</dt> + <dd>描画されるインデックスの数を指定する {{domxref("GLsizei")}}。</dd> +</dl> + +<h3 id="返り値">返り値</h3> + +<p>ありません。</p> + +<h3 id="例外">例外</h3> + +<ul> + <li><code>mode</code> が許容された値のどれでもない場合、<code>gl.INVALID_ENUM</code> エラーがスローされます。</li> + <li><code>first</code> や <code>count</code> が負数の場合、<code>gl.INVALID_VALUE</code> エラーがスローされます。</li> + <li><code>gl.CURRENT_PROGRAM</code> が {{jsxref("null")}} の場合、<code>gl.INVALID_OPERATION</code> エラーがスローされます。</li> +</ul> + +<h2 id="例">例</h2> + +<pre class="brush: js">gl.drawArrays(gl.POINTS, 0, 8); +</pre> + +<h2 id="仕様策定状況">仕様策定状況</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.11", "drawArrays")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初回定義。</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glDrawArrays.xml", "glDrawArrays")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL API のマニュアルページ。</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザーの対応">ブラウザーの対応</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.drawArrays")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.drawElements()")}}</li> + <li>{{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}}</li> + <li>{{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}</li> + <li>{{domxref("ANGLE_instanced_arrays.vertexAttribDivisorANGLE()", "ext.vertexAttribDivisorANGLE()")}}</li> + <li>{{domxref("WebGL2RenderingContext.drawArraysInstanced()")}}</li> + <li>{{domxref("WebGL2RenderingContext.drawElementsInstanced()")}}</li> + <li>{{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}}</li> +</ul> diff --git a/files/ja/web/api/webglrenderingcontext/getattriblocation/index.html b/files/ja/web/api/webglrenderingcontext/getattriblocation/index.html new file mode 100644 index 0000000000..f11ff51400 --- /dev/null +++ b/files/ja/web/api/webglrenderingcontext/getattriblocation/index.html @@ -0,0 +1,65 @@ +--- +title: WebGLRenderingContext.getAttribLocation() +slug: Web/API/WebGLRenderingContext/getAttribLocation +translation_of: Web/API/WebGLRenderingContext/getAttribLocation +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.getAttribLocation()</code></strong>メソッドは指定された{{domxref("WebGLProgram")}}内の属性の場所を返します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox notranslate">GLint <var>gl</var>.getAttribLocation(<var>program</var>, <var>name</var>); +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt>program</dt> + <dd>属性の変数を含む{{domxref("WebGLProgram")}}</dd> + <dt>name</dt> + <dd>場所を取得する属性の変数名を指定する{{domxref("DOMString")}}</dd> +</dl> + +<h3 id="返り値">返り値</h3> + +<p>見つかった場合、変数名の場所を示す{{domxref("GLint")}}番号を、それ以外の場合は-1を返します。</p> + +<h2 id="例">例</h2> + +<pre class="brush: js notranslate">gl.getAttribLocation(program, 'vColor'); +</pre> + +<h2 id="仕様策定状況">仕様策定状況</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.10", "getAttribLocation")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初回定義</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glGetAttribLocation.xml", "glGetAttribLocation")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL API のマニュアルページ</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザーの対応">ブラウザーの対応</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.getAttribLocation")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.getUniformLocation()")}}</li> +</ul> diff --git a/files/ja/web/api/webglrenderingcontext/index.html b/files/ja/web/api/webglrenderingcontext/index.html new file mode 100644 index 0000000000..5d2665f629 --- /dev/null +++ b/files/ja/web/api/webglrenderingcontext/index.html @@ -0,0 +1,365 @@ +--- +title: WebGLRenderingContext +slug: Web/API/WebGLRenderingContext +tags: + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext +--- +<div>{{APIRef("WebGL")}}</div> + +<p><code><strong>WebGLRenderingContext</strong></code> インターフェースは {{HTMLElement("canvas")}} 要素の描画サーフェスのためのOpenGL ES 2.0のレンダリングコンテキストを提供します。</p> + +<p>このインターフェースを取得するためには、<code><canvas></code> 要素の {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} を "webgl" の引数を与えて呼び出します:</p> + +<pre class="brush: js">var canvas = document.getElementById('myCanvas'); +var gl = canvas.getContext('webgl'); +</pre> + +<p>一度キャンバスのWebGLレンダリングコンテキストを取得すれば、その中でレンダリングができます。</p> + +<p><a href="/ja/docs/Web/API/WebGL_API/Tutorial" title="WebGL tutorial">WebGL tutorial</a> には、WebGLを始めるためのより多くの情報、サンプル、資料があります。</p> + +<h2 id="定数">定数</h2> + +<p><a href="/ja/docs/Web/API/WebGL_API/Constants">WebGL constants</a> ページを参照してください。</p> + +<h2 id="WebGL_コンテキスト">WebGL コンテキスト</h2> + +<p>次のプロパティやメソッドはWebGLコンテキストを扱うための一般的な情報や機能を提供します:</p> + +<dl> + <dt>{{domxref("WebGLRenderingContext.canvas")}}</dt> + <dd>読み取り専用の {{domxref("HTMLCanvasElement")}} への後方参照です。{{HTMLElement("canvas")}} 要素と関連付けられていない場合は {{jsxref("null")}} を返すことがあります。</dd> + <dt>{{domxref("WebGLRenderingContext.commit()")}} {{experimental_inline}}</dt> + <dd> + <p>コンテキストが直接指定されたキャンバスに固定されていない場合、フレームを元の {{domxref("HTMLCanvasElement")}} にプッシュします。</p> + </dd> + <dt>{{domxref("WebGLRenderingContext.drawingBufferWidth")}}</dt> + <dd>読み取り専用の現在の描画バッファの幅です。コンテキストが関連付けされたcanvas要素の幅と一致しているといえます。</dd> + <dt>{{domxref("WebGLRenderingContext.drawingBufferHeight")}}</dt> + <dd>読み取り専用の現在の描画バッファの高さです。コンテキストが関連付けされたcanvas要素の高さと一致しているといえます。</dd> + <dt>{{domxref("WebGLRenderingContext.getContextAttributes()")}}</dt> + <dd>実際のコンテキストパラメータを含む <code>WebGLContextAttributes</code> オブジェクトを返します。コンテキストが失われていた場合は {{jsxref("null")}} を返すことがあります。</dd> + <dt>{{domxref("WebGLRenderingContext.isContextLost()")}}</dt> + <dd>コンテキストが失われている場合は <code>true</code> を返し、そうでない場合は <code>false</code> を返します。</dd> +</dl> + +<h2 id="ビューイングとクリッピング">ビューイングとクリッピング</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.scissor()")}}</dt> + <dd>シザーボックスを定義します。</dd> + <dt>{{domxref("WebGLRenderingContext.viewport()")}}</dt> + <dd>ビューポートをセットします。</dd> +</dl> + +<h2 id="ステート情報">ステート情報</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.activeTexture()")}}</dt> + <dd>アクティブなテクスチャユニットを選択します。</dd> + <dt>{{domxref("WebGLRenderingContext.blendColor()")}}</dt> + <dd>ブレンド元とブレンド先のブレンドファクターをセットします。</dd> + <dt>{{domxref("WebGLRenderingContext.blendEquation()")}}</dt> + <dd>RGBのブレンド式とアルファのブレンド式をひとつの式にセットします。</dd> + <dt>{{domxref("WebGLRenderingContext.blendEquationSeparate()")}}</dt> + <dd>RGBのブレンド式とアルファのブレンド式を分けて式にセットします。</dd> + <dt>{{domxref("WebGLRenderingContext.blendFunc()")}}</dt> + <dd>どの関数がピクセルのブレンド演算に使用されるかを定義します。</dd> + <dt>{{domxref("WebGLRenderingContext.blendFuncSeparate()")}}</dt> + <dd>どの関数がピクセルのブレンド演算に使用されるかをRGBとアルファ要素を個別に定義します。</dd> + <dt>{{domxref("WebGLRenderingContext.clearColor()")}}</dt> + <dd>カラーバッファをクリアする時に使われる色を指定します。</dd> + <dt>{{domxref("WebGLRenderingContext.clearDepth()")}}</dt> + <dd>深度バッファをクリアする時に使用する深度値を指定します。</dd> + <dt>{{domxref("WebGLRenderingContext.clearStencil()")}}</dt> + <dd>ステンシルバッファをクリアする時に使用するステンシル値を指定します。</dd> + <dt>{{domxref("WebGLRenderingContext.colorMask()")}}</dt> + <dd>ドローイングまたは {{domxref("WebGLFramebuffer")}} へのレンダリングの際に、どの色要素を有効または無効にするかをセットします。</dd> + <dt>{{domxref("WebGLRenderingContext.cullFace()")}}</dt> + <dd>前面ポリゴンと後面ポリゴンのいずれか、または両方をカリングするかどうかを指定します。</dd> + <dt>{{domxref("WebGLRenderingContext.depthFunc()")}}</dt> + <dd>現在の深度バッファの深度値と書き込むピクセルの深度値を比較する関数を指定します。</dd> + <dt>{{domxref("WebGLRenderingContext.depthMask()")}}</dt> + <dd>深度バッファへの書き込みを有効にするか無効にするかどうかをセットします。</dd> + <dt>{{domxref("WebGLRenderingContext.depthRange()")}}</dt> + <dd>正規化デバイス座標系からウィンドウまたはビューポート座標系への深度レンジマッピングを指定します。</dd> + <dt>{{domxref("WebGLRenderingContext.disable()")}}</dt> + <dd>このコンテキストにおいて、指定したWebGL機能を無効にします。</dd> + <dt>{{domxref("WebGLRenderingContext.enable()")}}</dt> + <dd>このコンテキストにおいて、指定したWebGL機能を有効にします。</dd> + <dt>{{domxref("WebGLRenderingContext.frontFace()")}}</dt> + <dd>前面ポリゴンなのか後面ポリゴンなのかを周る方向によって指定します。</dd> + <dt>{{domxref("WebGLRenderingContext.getParameter()")}}</dt> + <dd>渡されたパラメータ名の値を返します。</dd> + <dt>{{domxref("WebGLRenderingContext.getError()")}}</dt> + <dd>エラー情報を返します。</dd> + <dt>{{domxref("WebGLRenderingContext.hint()")}}</dt> + <dd>一定の振る舞いについてのヒントを指定します。このヒントの振る舞いは実装に依存します。</dd> + <dt>{{domxref("WebGLRenderingContext.isEnabled()")}}</dt> + <dd>このコンテキストで指定されたWebGL機能が有効であるか無効であるかをテストします。</dd> + <dt>{{domxref("WebGLRenderingContext.lineWidth()")}}</dt> + <dd>ラスタライズする線の幅をセットします。</dd> + <dt>{{domxref("WebGLRenderingContext.pixelStorei()")}}</dt> + <dd>ピクセルストレージモードを指定します。</dd> + <dt>{{domxref("WebGLRenderingContext.polygonOffset()")}}</dt> + <dd>Specifies the scale factors and units to calculate depth values.</dd> + <dt>{{domxref("WebGLRenderingContext.sampleCoverage()")}}</dt> + <dd>アンチエイリアシングエフェクトのためのマルチサンプルカバレッジパラメータを指定します。</dd> + <dt>{{domxref("WebGLRenderingContext.stencilFunc()")}}</dt> + <dd>ステンシルテストための関数と参照値を、前面と後面の両面をセットします。</dd> + <dt>{{domxref("WebGLRenderingContext.stencilFuncSeparate()")}}</dt> + <dd>ステンシルテストための関数と参照値を、前面と後面の両面、またはいずれかをセットします。</dd> + <dt>{{domxref("WebGLRenderingContext.stencilMask()")}}</dt> + <dd>ステンシル平面の個々のビットの書き込みの有効と無効を、前面と後面の両面を操作します。</dd> + <dt>{{domxref("WebGLRenderingContext.stencilMaskSeparate()")}}</dt> + <dd>ステンシル平面の個々のビットの書き込みの有効と無効を、前面と後面のいずれか、または両面を操作します。</dd> + <dt>{{domxref("WebGLRenderingContext.stencilOp()")}}</dt> + <dd>前面と後面のステンシルテストの振る舞いを同時にセットします。</dd> + <dt>{{domxref("WebGLRenderingContext.stencilOpSeparate()")}}</dt> + <dd>前面と後面のステンシルテストの振る舞いをセットします。</dd> +</dl> + +<h2 id="バッファ">バッファ</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.bindBuffer()")}}</dt> + <dd><code>WebGLBuffer</code> オブジェクトを与えられたターゲットにバインドします。</dd> + <dt>{{domxref("WebGLRenderingContext.bufferData()")}}</dt> + <dd>バッファデータを更新します。</dd> + <dt>{{domxref("WebGLRenderingContext.bufferSubData()")}}</dt> + <dd>バッファデータを与えられたオフセットから更新します。</dd> + <dt>{{domxref("WebGLRenderingContext.createBuffer()")}}</dt> + <dd><code>WebGLBuffer</code> オブジェクトを作成します。</dd> + <dt>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</dt> + <dd><code>WebGLBuffer</code> オブジェクトを削除します。</dd> + <dt>{{domxref("WebGLRenderingContext.getBufferParameter()")}}</dt> + <dd>バッファについての情報を返します。</dd> + <dt>{{domxref("WebGLRenderingContext.isBuffer()")}}</dt> + <dd>与えられたバッファが有効であるかのブール値を返します。</dd> +</dl> + +<h2 id="フレームバッファ">フレームバッファ</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.bindFramebuffer()")}}</dt> + <dd><code>WebGLFrameBuffer</code> オブジェクトを与えられたターゲットにバインドします。</dd> + <dt>{{domxref("WebGLRenderingContext.checkFramebufferStatus()")}}</dt> + <dd>フレームバッファのステータスを返します。</dd> + <dt>{{domxref("WebGLRenderingContext.createFramebuffer()")}}</dt> + <dd><code>WebGLFrameBuffer</code> オブジェクトを作成します。</dd> + <dt>{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}</dt> + <dd><code>WebGLFrameBuffer</code> オブジェクトを削除します。</dd> + <dt>{{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}}</dt> + <dd><code>WebGLRenderingBuffer</code> オブジェクトを <code>WebGLFrameBuffer</code> オブジェクトにアタッチします。</dd> + <dt>{{domxref("WebGLRenderingContext.framebufferTexture2D()")}}</dt> + <dd>テクスチャ画像を <code>WebGLFrameBuffer</code> オブジェクトにアタッチします。</dd> + <dt>{{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}}</dt> + <dd>フレームバッファについての情報を返します。</dd> + <dt>{{domxref("WebGLRenderingContext.isFramebuffer()")}}</dt> + <dd>渡された <code>WebGLFrameBuffer</code> オブジェクトが有効かどうかを表すブール値を返します。</dd> + <dt>{{domxref("WebGLRenderingContext.readPixels()")}}</dt> + <dd><code>WebGLFrameBuffer</code> からピクセルブロックを読み取ります。</dd> +</dl> + +<h2 id="レンダーバッファ">レンダーバッファ</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}</dt> + <dd>与えられたターゲットに <code>WebGLRenderBuffer</code> オブジェクトをバインドします。</dd> + <dt>{{domxref("WebGLRenderingContext.createRenderbuffer()")}}</dt> + <dd><code>WebGLRenderBuffer</code> オブジェクトを作成します。</dd> + <dt>{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}</dt> + <dd><code>WebGLRenderBuffer</code> オブジェクトを削除します。</dd> + <dt>{{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}</dt> + <dd>レンダーバッファについての情報を返します。</dd> + <dt>{{domxref("WebGLRenderingContext.isRenderbuffer()")}}</dt> + <dd>渡された <code>WebGLRenderingBuffer</code> が有効かどうかを表すブール値を返します。</dd> + <dt>{{domxref("WebGLRenderingContext.renderbufferStorage()")}}</dt> + <dd>レンダーバッファデータストアを作成します。</dd> +</dl> + +<h2 id="テクスチャ">テクスチャ</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.bindTexture()")}}</dt> + <dd>与えられたターゲットに <code>WebGLTexture</code> オブジェクトをバインドします。</dd> + <dt>{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}</dt> + <dd>2Dテクスチャ画像を圧縮フォーマットで指定します。</dd> + <dt>{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}</dt> + <dd>2Dテクスチャ部分画像を圧縮フォーマットで指定します。</dd> + <dt>{{domxref("WebGLRenderingContext.copyTexImage2D()")}}</dt> + <dd>2Dテクスチャ画像をコピーします。</dd> + <dt>{{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}</dt> + <dd>2Dテクスチャ部分画像をコピーします。</dd> + <dt>{{domxref("WebGLRenderingContext.createTexture()")}}</dt> + <dd><code>WebGLTexture</code> オブジェクトを作成します。</dd> + <dt>{{domxref("WebGLRenderingContext.deleteTexture()")}}</dt> + <dd><code>WebGLTexture</code> オブジェクトを削除します。</dd> + <dt>{{domxref("WebGLRenderingContext.generateMipmap()")}}</dt> + <dd><code>WebGLTexture</code> オブジェクトに対してミップマップ集合を生成します。</dd> + <dt>{{domxref("WebGLRenderingContext.getTexParameter()")}}</dt> + <dd>テクスチャに対しての情報を返します。</dd> + <dt>{{domxref("WebGLRenderingContext.isTexture()")}}</dt> + <dd>渡された <code>WebGLTexture</code> が有効かどうかを表すブール値を返します。</dd> + <dt>{{domxref("WebGLRenderingContext.texImage2D()")}}</dt> + <dd>2Dテクスチャ画像を指定します。</dd> + <dt>{{domxref("WebGLRenderingContext.texSubImage2D()")}}</dt> + <dd>現在の <code>WebGLTexture</code> の部分矩形を更新します。</dd> + <dt>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}</dt> + <dd>テクスチャパラメータをセットします。</dd> + <dt>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}</dt> + <dd>テクスチャパラメータをセットします。</dd> +</dl> + +<h2 id="プログラムとシェーダ">プログラムとシェーダ</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.attachShader()")}}</dt> + <dd><code>WebGLShader</code> を <code>WebGLProgram</code> にアタッチします。</dd> + <dt>{{domxref("WebGLRenderingContext.bindAttribLocation()")}}</dt> + <dd>汎用頂点インデックスを名前付き属性変数にバインドします。</dd> + <dt>{{domxref("WebGLRenderingContext.compileShader()")}}</dt> + <dd><code>WebGLShader</code> をコンパイルします。</dd> + <dt>{{domxref("WebGLRenderingContext.createProgram()")}}</dt> + <dd><code>WebGLProgram</code> を作成します。</dd> + <dt>{{domxref("WebGLRenderingContext.createShader()")}}</dt> + <dd><code>WebGLShader</code> を作成します。</dd> + <dt>{{domxref("WebGLRenderingContext.deleteProgram()")}}</dt> + <dd><code>WebGLProgram</code> を削除します。</dd> + <dt>{{domxref("WebGLRenderingContext.deleteShader()")}}</dt> + <dd><code>WebGLShader</code> を削除します。</dd> + <dt>{{domxref("WebGLRenderingContext.detachShader()")}}</dt> + <dd><code>WebGLShader</code> をでタッチします。</dd> + <dt>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</dt> + <dd><code>WebGLProgram</code> にアタッチされた <code>WebGLShader</code> オブジェクトのリストを返します。</dd> + <dt>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</dt> + <dd>プログラムについての情報を返します。</dd> + <dt>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</dt> + <dd><code>WebGLProgram</code> オブジェクトについての情報ログを返します。</dd> + <dt>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</dt> + <dd>シェーダについての情報を返します。</dd> + <dt>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</dt> + <dd>シェーダの数値フォーマットの精度について記述した <code>WebGLShaderPrecisionFormat</code> オブジェクトを返します。</dd> + <dt>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</dt> + <dd><code>WebGLShader</code> についての情報ログを返します。</dd> + <dt>{{domxref("WebGLRenderingContext.getShaderSource()")}}</dt> + <dd><code>WebGLShader</code> のソースコードを文字列として返します。</dd> + <dt>{{domxref("WebGLRenderingContext.isProgram()")}}</dt> + <dd>渡された <code>WebGLProgram</code> 有効かを表すブール値を返します。</dd> + <dt>{{domxref("WebGLRenderingContext.isShader()")}}</dt> + <dd>渡された <code>WebGLShader</code> 有効かを表すブール値を返します。</dd> + <dt>{{domxref("WebGLRenderingContext.linkProgram()")}}</dt> + <dd>渡された <code>WebGLProgram</code> オブジェクトをリンクします。</dd> + <dt>{{domxref("WebGLRenderingContext.shaderSource()")}}</dt> + <dd><code>WebGLShader</code> にソースコードをセットします。</dd> + <dt>{{domxref("WebGLRenderingContext.useProgram()")}}</dt> + <dd>指定した <code>WebGLProgram</code> を現在のレンダリングステートの一部として使用します。</dd> + <dt>{{domxref("WebGLRenderingContext.validateProgram()")}}</dt> + <dd><code>WebGLProgram</code> を検証します。</dd> +</dl> + +<h2 id="ユニフォームと属性">ユニフォームと属性</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}</dt> + <dd>与えられたポジションの頂点属性配列を無効にします。</dd> + <dt>{{domxref("WebGLRenderingContext.enableVertexAttribArray()")}}</dt> + <dd>与えられたポジションの頂点属性配列を有効にします。</dd> + <dt>{{domxref("WebGLRenderingContext.getActiveAttrib()")}}</dt> + <dd>有効な属性変数についての情報を返します。</dd> + <dt>{{domxref("WebGLRenderingContext.getActiveUniform()")}}</dt> + <dd>有効なユニフォーム変数についての情報を返します。</dd> + <dt>{{domxref("WebGLRenderingContext.getAttribLocation()")}}</dt> + <dd>属性変数のロケーションを返します。</dd> + <dt>{{domxref("WebGLRenderingContext.getUniform()")}}</dt> + <dd>与えられたロケーションのユニフォーム変数の値を返します。</dd> + <dt>{{domxref("WebGLRenderingContext.getUniformLocation()")}}</dt> + <dd>ユニフォーム変数のロケーションを返します。</dd> + <dt>{{domxref("WebGLRenderingContext.getVertexAttrib()")}}</dt> + <dd>与えられたポジションの頂点属性についての情報を返します。</dd> + <dt>{{domxref("WebGLRenderingContext.getVertexAttribOffset()")}}</dt> + <dd>与えられた頂点配列のアドレスを返します。</dd> + <dt>{{domxref("WebGLRenderingContext.uniform()", "WebGLRenderingContext.uniform[1234][fi][v]()")}}</dt> + <dd>ユニフォーム変数の値を指定します。</dd> + <dt>{{domxref("WebGLRenderingContext.uniformMatrix()", "WebGLRenderingContext.uniformMatrix[234]fv()")}}</dt> + <dd>ユニフォーム変数の行列を指定します。</dd> + <dt>{{domxref("WebGLRenderingContext.vertexAttrib()", "WebGLRenderingContext.vertexAttrib[1234]f[v]()")}}</dt> + <dd>汎用頂点属性の値を指定します。</dd> + <dt>{{domxref("WebGLRenderingContext.vertexAttribPointer()")}}</dt> + <dd>データフォーマットと頂点属性配列中の頂点属性のロケーションを指定します。</dd> +</dl> + +<h2 id="バッファへの書き込み">バッファへの書き込み</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.clear()")}}</dt> + <dd>指定されたバッファを既定値でクリアします。</dd> + <dt>{{domxref("WebGLRenderingContext.drawArrays()")}}</dt> + <dd>プリミティブを配列データからレンダリングします。</dd> + <dt>{{domxref("WebGLRenderingContext.drawElements()")}}</dt> + <dd>プリミティブを要素配列データからレンダリングします。</dd> + <dt>{{domxref("WebGLRenderingContext.finish()")}}</dt> + <dd>以前に呼び出されたコマンドが終了するまで処理をブロックします。</dd> + <dt>{{domxref("WebGLRenderingContext.flush()")}}</dt> + <dd>可能な限り速くすべてのコマンドを実行し、バッファコマンドを空にします。</dd> +</dl> + +<h2 id="拡張を使用する">拡張を使用する</h2> + +<p>これらのメソッドはWebGL拡張を管理します:</p> + +<dl> + <dt>{{domxref("WebGLRenderingContext.getSupportedExtensions()")}}</dt> + <dd>サポートしている全てのWebGL拡張を {{domxref("DOMString")}} の {{jsxref("Array")}} で返します。</dd> + <dt>{{domxref("WebGLRenderingContext.getExtension()")}}</dt> + <dd>拡張オブジェクトを返します。</dd> +</dl> + +<h2 id="例">例</h2> + +<h3 id="WebGL_コンテキストフィーチャーの検出">WebGL コンテキストフィーチャーの検出</h3> + +<p>{{page("/ja/Learn/WebGL/By_example/Detect_WebGL", "summary")}}</p> + +<p>{{page("/ja/Learn/WebGL/By_example/Detect_WebGL", "detect-webgl-source")}}</p> + +<p>{{EmbedLiveSample("detect-webgl-source", 660,150 ,"" , "Learn/WebGL/By_example/Detect_WebGL")}}</p> + +<h3 id="WebGLレンダリングにおけるキャンバスサイズの効果">WebGLレンダリングにおけるキャンバスサイズの効果</h3> + +<p>{{page("/ja/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-intro")}}</p> + +<p>{{page("/ja/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-source")}}</p> + +<p>{{EmbedLiveSample("canvas-size-and-webgl-source", 660,180 ,"" , "Learn/WebGL/By_example/Canvas_size_and_WebGL")}}</p> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">ステータス</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14", "WebGLRenderingContext")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("HTMLCanvasElement")}}</li> +</ul> diff --git a/files/ja/web/api/webglrenderingcontext/linkprogram/index.html b/files/ja/web/api/webglrenderingcontext/linkprogram/index.html new file mode 100644 index 0000000000..cad53c9a90 --- /dev/null +++ b/files/ja/web/api/webglrenderingcontext/linkprogram/index.html @@ -0,0 +1,79 @@ +--- +title: WebGLRenderingContext.linkProgram() +slug: Web/API/WebGLRenderingContext/linkProgram +translation_of: Web/API/WebGLRenderingContext/linkProgram +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.linkProgram()</code></strong> メソッドは、与えられた {{domxref("WebGLProgram")}} に接続された頂点とフラグメントのシェーダーをリンクします。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox notranslate">void <var>gl</var>.linkProgram(<var>program</var>); +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt>program</dt> + <dd>リンクする {{domxref("WebGLProgram")}}。</dd> +</dl> + +<h3 id="返り値">返り値</h3> + +<p>ありません。</p> + +<h2 id="例">例</h2> + +<pre class="brush: js notranslate">var program = gl.createProgram(); + +// Attach pre-existing shaders +gl.attachShader(program, vertexShader); +gl.attachShader(program, fragmentShader); + +gl.linkProgram(program); + +<code>if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) { + var info = gl.getProgramInfoLog(program); + throw new Error('Could not compile WebGL program. \n\n' + info); +}</code></pre> + +<h2 id="仕様策定状況">仕様策定状況</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.9", "linkProgram")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初回定義。</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glLinkProgram.xml", "glLinkProgram")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL API のマニュアルページ。</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザーの対応">ブラウザーの対応</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.linkProgram")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li> +</ul> diff --git a/files/ja/web/api/webglrenderingcontext/shadersource/index.html b/files/ja/web/api/webglrenderingcontext/shadersource/index.html new file mode 100644 index 0000000000..47018f4f9d --- /dev/null +++ b/files/ja/web/api/webglrenderingcontext/shadersource/index.html @@ -0,0 +1,70 @@ +--- +title: WebGLRenderingContext.shaderSource() +slug: Web/API/WebGLRenderingContext/shaderSource +translation_of: Web/API/WebGLRenderingContext/shaderSource +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.shaderSource()</code></strong> メソッドは、{{domxref("WebGLShader")}} のソースコードを設定します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">void <var>gl</var>.shaderSource(<var>shader</var>, <var>source</var>); +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt>shader</dt> + <dd>ソースコードを設定する {{domxref("WebGLShader")}} オブジェクト。</dd> + <dt>source</dt> + <dd>設定する GLSL ソースコードを含む {{domxref("DOMString")}}。</dd> +</dl> + +<h3 id="返り値">返り値</h3> + +<p>ありません。</p> + +<h2 id="例">例</h2> + +<pre class="brush: js">var shader = gl.createShader(gl.VERTEX_SHADER); +gl.shaderSource(shader, originalSource); + +var source = gl.getShaderSource(shader);</pre> + +<h2 id="仕様策定状況">仕様策定状況</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.9", "shaderSource")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初回定義。</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glShaderSource.xml", "glShaderSource")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL API (と同様の) マニュアルページ。</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザーの対応">ブラウザーの対応</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.shaderSource")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.isShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li> +</ul> diff --git a/files/ja/web/api/webglrenderingcontext/uniformmatrix/index.html b/files/ja/web/api/webglrenderingcontext/uniformmatrix/index.html new file mode 100644 index 0000000000..e75f4f634e --- /dev/null +++ b/files/ja/web/api/webglrenderingcontext/uniformmatrix/index.html @@ -0,0 +1,73 @@ +--- +title: 'WebGLRenderingContext.uniformMatrix[234]fv()' +slug: Web/API/WebGLRenderingContext/uniformMatrix +translation_of: Web/API/WebGLRenderingContext/uniformMatrix +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.uniformMatrix[234]fv()</code></strong> メソッドは、行列の値をユニフォームの値に指定します。</p> + +<p>このメソッドの 3 つのバージョン (<code>uniformMatrix2fv()</code>, <code>uniformMatrix3fv()</code>, と <code>uniformMatrix4fv()</code>) は、入力値として 2 要素, 3 要素, 4 要素のベクトルをそれぞれ取ります。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox"><em>WebGLRenderingContext</em>.uniformMatrix2fv(<em>location</em>, <em>transpose</em>, <em>value</em>); +<em>WebGLRenderingContext</em>.uniformMatrix3fv(<em>location</em>, <em>transpose</em>, <em>value</em>); +<em>WebGLRenderingContext</em>.uniformMatrix4fv(<em>location</em>, <em>transpose</em>, <em>value</em>); +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt><code>location</code></dt> + <dd>変更するユニフォーム属性の位置を含むオブジェクト {{domxref("WebGLUniformLocation")}}。この位置は {{domxref("WebGLRenderingContext.getUniformLocation", "getUniformLocation()")}} を用いて入手されます。</dd> + <dt><code>transpose</code></dt> + <dd>行列を転置するかどうか指定する {{domxref("GLboolean")}}。<code>false</code> でなければならない。</dd> + <dt><code>value</code></dt> + <dd> + <p>{{jsxref("Float32Array")}} か <code>GLfloat</code> 値の並び。</p> + </dd> +</dl> + +<h3 id="返り値">返り値</h3> + +<p><code>undefined</code></p> + +<h2 id="例">例</h2> + +<pre class="brush: js">gl.uniformMatrix2fv(loc, false, [2,1, 2,2]);</pre> + +<h2 id="仕様策定状況">仕様策定状況</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.10", "uniformMatrix")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初回定義。</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glUniform.xml", "glUniform")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL API のマニュアルページ。</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザーの対応">ブラウザーの対応</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.uniformMatrix2fv")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.uniform()")}}</li> + <li>{{domxref("WebGL2RenderingContext.uniformMatrix()")}} – これらのメソッドの WebGL 2 版。</li> +</ul> diff --git a/files/ja/web/api/webglrenderingcontext/useprogram/index.html b/files/ja/web/api/webglrenderingcontext/useprogram/index.html new file mode 100644 index 0000000000..3d55e0ae6c --- /dev/null +++ b/files/ja/web/api/webglrenderingcontext/useprogram/index.html @@ -0,0 +1,76 @@ +--- +title: WebGLRenderingContext.useProgram() +slug: Web/API/WebGLRenderingContext/useProgram +translation_of: Web/API/WebGLRenderingContext/useProgram +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.useProgram()</code></strong> メソッドは、指定した {{domxref("WebGLProgram")}} を現在の描画ステートの一部として設定します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">void <var>gl</var>.useProgram(<var>program</var>); +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt>program</dt> + <dd>使用する {{domxref("WebGLProgram")}}。</dd> +</dl> + +<h3 id="返り値">返り値</h3> + +<p>ありません。</p> + +<h2 id="例">例</h2> + +<pre class="brush: js">var program = gl.createProgram(); + +// Attach pre-existing shaders +gl.attachShader(program, vertexShader); +gl.attachShader(program, fragmentShader); + +gl.linkProgram(program); +gl.useProgram(program); +</pre> + +<h2 id="仕様策定状況">仕様策定状況</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.9", "useProgram")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初回定義。</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glUseProgram.xml", "glUseProgram")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL API のマニュアルページ。</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザーの対応">ブラウザーの対応</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.useProgram")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li> +</ul> diff --git a/files/ja/web/api/webglrenderingcontext/vertexattribpointer/index.html b/files/ja/web/api/webglrenderingcontext/vertexattribpointer/index.html new file mode 100644 index 0000000000..33c959f28e --- /dev/null +++ b/files/ja/web/api/webglrenderingcontext/vertexattribpointer/index.html @@ -0,0 +1,247 @@ +--- +title: WebGLRenderingContext.vertexAttribPointer() +slug: Web/API/WebGLRenderingContext/vertexAttribPointer +translation_of: Web/API/WebGLRenderingContext/vertexAttribPointer +--- +<div>{{APIRef("WebGL")}}</div> + +<p class="summary"><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> の <strong><code>WebGLRenderingContext.vertexAttribPointer()</code></strong> メソッドは、現在 <code>gl.ARRAY_BUFFER</code> に結合されたバッファーを、現在の頂点バッファーオブジェクトの一般的な頂点属性に結合して、そのレイアウトを指定します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">void <em>gl</em>.vertexAttribPointer(<em>index</em>, <em>size</em>, <em>type</em>, <em>normalized</em>, <em>stride</em>, <em>offset</em>); +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt><code>index</code></dt> + <dd>頂点属性の場所を指定する {{domxref("GLuint")}}。この場所が変更されます。</dd> + <dt><code>size</code></dt> + <dd>頂点属性あたりの要素数を指定する {{domxref("GLint")}}。1, 2, 3 か, 4 でなければいけません。</dd> + <dt><code>type</code></dt> + <dd>配列の各要素のデータ型を指定する {{domxref("GLenum")}}。以下の値を取ることができます。 + <ul> + <li><code>gl.BYTE</code>: 符号付き 8 ビット整数、値は [-128, 127]</li> + <li><code>gl.SHORT</code>: 符号付き 16 ビット整数、値は [-32768, 32767]</li> + <li><code>gl.UNSIGNED_BYTE</code>: 符号無し 8 ビット整数、値は [0, 255]</li> + <li><code>gl.UNSIGNED_SHORT</code>: 符号無し 16 ビット整数、値は [0, 65535]</li> + <li><code>gl.FLOAT</code>: 32 ビット IEEE 浮動小数点数</li> + <li>{{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} を使用している場合、さらに以下の値を取ることができます。 + <ul> + <li><code>gl.HALF_FLOAT</code>: 16 ビット IEEE 浮動小数点数</li> + </ul> + </li> + </ul> + </dd> + <dt><code>normalized</code></dt> + <dd>整数データを浮動小数点数へ型変換するとき、厳密な範囲へ正規化するかどうか指定する {{domxref("GLboolean")}}。 + <ul> + <li><code>gl.BYTE</code> と <code>gl.SHORT</code> の型では、true の場合に [-1, 1] の値へ正規化されます。</li> + <li><code>gl.UNSIGNED_BYTE</code> と <code>gl.UNSIGNED_SHORT</code> の型では、true の場合に [0, 1] の値へ正規化されます。</li> + <li><code>gl.FLOAT</code> と <code>gl.HALF_FLOAT</code> の型では、この引数に効果はありません。</li> + </ul> + </dd> + <dt><code>stride</code></dt> + <dd>連続する頂点属性の始端どうしの間にある、オフセット数をバイト単位で指定する {{domxref("GLsizei")}}。255 より大きくできません。stride が 0 の場合、属性はきっちり詰められていると想定されます。すなわち、アトリビュートはインターリーブされておらず、各属性は別れたブロックにあり、現在の頂点属性のすぐ隣に次の頂点属性が続きます。</dd> + <dt><code>offset</code></dt> + <dd>頂点属性配列の最初の要素のオフセットをバイト単位で指定する {{domxref("GLintptr")}}。 <code>type</code> のバイト長の倍数でなければいけません。</dd> +</dl> + +<h3 id="返り値">返り値</h3> + +<p>ありません。</p> + +<h3 id="例外">例外</h3> + +<ul> + <li><code>offset</code> が負数の場合、<code>gl.INVALID_VALUE</code> エラーがスローされます。</li> + <li><code>stride</code> と <code>offset</code> がデータ型のサイズの倍数でない場合、<code>gl.INVALID_OPERATION</code> エラーがスローされます。</li> + <li>WebGLBuffer が ARRAY_BUFFER ターゲットに結合されていない場合、<code>gl.INVALID_OPERATION</code> エラーがスローされます。</li> + <li>{{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} を使用している場合、この頂点属性が頂点シェーダー内で整数として (例えば <code>vec4</code> の代わりに <code>uvec4</code> や <code>ivec4</code> で) 定義されていた場合、<code>gl.INVALID_OPERATION</code> エラーがスローされます。</li> +</ul> + +<h2 id="説明">説明</h2> + +<p>3D ジオメトリーをレンダリングしたいとしましょう。そのためには頂点シェーダーに頂点を供給する必要があります。各頂点には、位置、法線ベクトル、テクスチャー座標など、 {{jsxref("ArrayBuffer")}} で定義された頂点バッファーオブジェクト (VBO) に提供されるいくつかの属性があります。まず、使用したい {{domxref("WebGLBuffer")}} を <code>gl.ARRAY_BUFFER</code> に結合する必要があります。それから、この <code>gl.vertexAttribPointer()</code> メソッドで、属性が格納されている順序、それらの中のデータ型を指定します。加えて、ストライドを含める必要があります。これは、一つの頂点でのすべての属性の総バイト長です。さらに、 {{domxref("WebGLRenderingContext/enableVertexAttribArray", "gl.enableVertexAttribArray()")}} を呼んで、WebGL にこの属性を配列バッファーの値で埋めるように知らせます。</p> + +<p>大抵は、あなたの 3D ジオメトリーはすでに厳格なバイナリ形式になっているので、メモリーレイアウトを把握するためにはその特定のフォーマットの仕様を読む必要があります。しかし、自分のフォーマットを設計していたり、ジオメトリーがテキストファイル (<a href="https://en.wikipedia.org/wiki/Wavefront_.obj_file">Wavefront .obj files</a> など) にあって実行時に <code>ArrayBuffer</code> へ変換する必要がある場合、どのようにメモリ構築するかは自由に選択できます。より高いパフォーマンスのためには、属性を <a href="https://en.wikipedia.org/wiki/Interleaved_memory">インターリーブ</a> してジオメトリを正確に表す最小のデータ型を使用してください。</p> + +<p>頂点属性の最大数はグラフィックカードに依存しており、<code>gl.getParameter(gl.MAX_VERTEX_ATTRIBS)</code> を呼ぶとこの値を取得できます。ハイエンドグラフィックスカードでは、最大値は 16 です。ローエンドグラフィックスカードでは、値は低くなります。</p> + +<h3 id="属性の位置">属性の位置</h3> + +<p>各属性には、その位置を指定する必要があります。これは配列バッファー内の場所とは無関係なので、配列バッファーへの格納方法とは異なる順序で送信できます。以下の 2 つの選択肢があります。</p> + +<ul> + <li>自分でインデックスを指定します。 この場合、{{domxref("WebGLRenderingContext.bindAttribLocation()", "gl.bindAttribLocation()")}} を呼び出して、頂点シェーダーの名前付き属性を、使用するインデックスに接続します。 これは {{domxref("WebGLRenderingContext.linkProgram()", "gl.linkProgram()")}} を呼ぶ前に完了しなければなりません。それから、同じインデックスを <code>gl.vertexAttribPointer()</code> に与えます。</li> + <li>他方では、頂点シェーダをコンパイルするときは、グラフィックスカードによって割り当てられたインデックスを使用します。グラフィックスカードに応じて、インデックスは異なります。なので、{{domxref("WebGLRenderingContext.getAttribLocation()", "gl.getAttribLocation()")}} を呼んでインデックスを探す必要があります。それから、このインデックスを <code>gl.vertexAttribPointer()</code> に与えます。<br> + WebGL 2 を使用している場合、バーテックスシェーダー内で自身のインデックスを指定し、グラフィックカードに使用される既定値を上書きすることができます。例えば、<code>layout(location = 3) in vec4 position;</code> は <code>"position"</code> 属性をインデックス 3 に設定します。</li> +</ul> + +<h3 id="整数属性">整数属性</h3> + +<p><code>ArrayBuffer</code> は整数と浮動小数点数の両方で埋めることができますが、属性は頂点シェーダーに送信されると常に浮動小数点数に変換されます。頂点シェーダーコードで整数を使用する必要がある場合は、頂点シェーダーで (<code>(int) floatNumber</code> のように) 浮動小数点数を整数に型変換し戻すことができます。または、WebGL 2 では{{domxref("WebGL2RenderingContext.vertexAttribIPointer()", "gl.vertexAttribIPointer()")}} を使用できます。</p> + +<h3 id="既定の属性値">既定の属性値</h3> + +<p>バーテックスシェーダーコードはいくつかの属性を含みますが、各属性の値を指定する必要はありません。代わりに、全ての頂点に同一の既定の値を与えることができます。<code>{{domxref("WebGLRenderingContext.disableVertexAttribArray()", "gl.disableVertexAttribArray()")}}</code> を呼んで WebGL に既定の値を使うように知らせることができます。{{domxref("WebGLRenderingContext.enableVertexAttribArray()", "gl.enableVertexAttribArray()")}} を呼ぶと配列バッファーから値を読み出します。この配列バッファーは <code>gl.vertexAttribPointer()</code> で指定します。</p> + +<p>同様に、例えばバーテックスシェーダーが 4 要素属性の <code>vec4</code> を予期しているのに <code>gl.vertexAttribPointer()</code> 呼び出しで <code>size</code> を <code>2</code> にセットした場合、WebGL は最初の 2 つの要素は配列バッファーを基にセットして、3 番目と 4 番目の値は既定値から取られます。</p> + +<p>既定値は <code>vec4(0.0, 0.0, 0.0, 1.0)</code> ですが、<code>{{domxref("WebGLRenderingContext.vertexAttrib()", "gl.vertexAttrib[1234]f[v]()")}}</code> を呼ぶことで異なる既定値を指定することができます。</p> + +<p>例えば、頂点シェーダーが位置と色の属性を使用しているとします。ほとんどのメッシュは頂点ごとのレベルで指定された色を持っていますが、いくつかのメッシュはユニフォームによるシェーディングです。そういったメッシュでは、各頂点に同じ色を配列バッファに入れる必要はありません。一定の色を設定するのに <code>gl.vertexAttrib4fv()</code> を使用できます。</p> + +<h3 id="現在の設定の問い合わせ">現在の設定の問い合わせ</h3> + +<p>{{domxref("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} や {{domxref("WebGLRenderingContext.getVertexAttribOffset()", "gl.getVertexAttribOffset()")}} で現在の属性の引数である、データ型や属性が正規化されるかどうかなどを取得できます。これらの WebGL 関数はパフォーマンスが遅いため、JavaScript アプリケーション内に状態を保存するほうがよいでしょう。しかし、これらの関数は、アプリケーションコードに触れることなく WebGL コンテキストをデバッグするのに最適です。</p> + +<h2 id="例">例</h2> + +<p>この例は、頂点属性をシェーダープログラムに送信する方法を示しています。各頂点の属性が 1 頂点あたり 20 バイトの長さでインターリーブされて格納されている架空のデータ構造を使用します。</p> + +<ol> + <li><strong>position:</strong> X, Y と Z 座標を格納する必要があります。高い精度のために、32 ビット浮動小数点数を使用し、これは合計で 12 バイト使用します。</li> + <li><strong>normal vector:</strong> 法線ベクトルの X, Y と Z 要素を格納する必要がありますが、精度は重要ではないので、8 ビット符号付き整数を使用します。さらなるパフォーマンスのために、データをゼロ値要素で 4 番目まで格納し、32 ビットにアライメントします。総サイズは 4 バイトになります。更に、WebGL に値を正規化するように知らせます。なぜなら法線は常に [-1, 1] の範囲だからです。</li> + <li><strong>texture coordinate:</strong> U と V の座標を格納する必要があります。これは 16 ビット符号無し整数で十分な精度が得られます。総サイズは 4 バイトになります。更に WebGL に値を [0, 1] に正規化するように知らせます。</li> +</ol> + +<p>例として、以下のような頂点のとき、</p> + +<pre class="brush: json">{ + "position": [1.0, 2.0, 1.5], + "normal": [1.0, 0.0, 0.0], + "texCoord": [0.5, 0.25] +} +</pre> + +<p>以下のように配列バッファーに格納されます。</p> + +<table style="width: auto;"> + <tbody> + <tr> + <td style="background-color: #ccf;">00 00 80 3F</td> + <td style="background-color: #ddf;">00 00 00 40</td> + <td style="background-color: #ccf;">00 00 0C 3F</td> + <td style="background-color: #cfc;">7F</td> + <td style="background-color: #dfd;">00</td> + <td style="background-color: #cfc;">00</td> + <td style="background-color: #dfd;">00</td> + <td style="background-color: #fcc;">7F FF</td> + <td style="background-color: #fdd;">3F FF</td> + </tr> + </tbody> +</table> + +<h3 id="配列バッファーの作成">配列バッファーの作成</h3> + +<p>まず、{{domxref("DataView")}} を用いた JSON データから動的に配列バッファーを作成します。<code>true</code> の用法に注意してください。WebGL は私達のデータがリトルエンディアンであることを予期しています。</p> + +<pre class="brush: js">//ジオメトリーを fetch() と Response.json() で読み込む +const response = await fetch('assets/geometry.json'); +const vertices = await response.json(); + +//配列バッファーを作成 +const buffer = new ArrayBuffer(20 * vertices.length); +//配列バッファーを埋める +const dv = new DataView(buffer); +for (let i = 0; i < vertices.length; i++) { + dv.setFloat32(20 * i, vertices[i].position[0], true); + dv.setFloat32(20 * i + 4, vertices[i].position[1], true); + dv.setFloat32(20 * i + 8, vertices[i].position[2], true); + dv.setInt8(20 * i + 12, vertices[i].normal[0] * 0x7F); + dv.setInt8(20 * i + 13, vertices[i].normal[1] * 0x7F); + dv.setInt8(20 * i + 14, vertices[i].normal[2] * 0x7F); + dv.setInt8(20 * i + 15, 0); + dv.setUint16(20 * i + 16, vertices[i].texCoord[0] * 0xFFFF, true); + dv.setUint16(20 * i + 18, vertices[i].texCoord[1] * 0xFFFF, true); +}</pre> + +<p>より高いパフォーマンスのために、サーバー側で事前に JSON から ArrayBuffer への変換を行うこともできます。以下のように、Node.js でそれらからバイナリファイルをロードし、それを配列バッファーとして解釈することができます。</p> + +<pre class="brush: js">const response = await fetch('assets/geometry.bin'); +const buffer = await response.arrayBuffer(); +</pre> + +<h3 id="WebGL_で配列バッファーを使う">WebGL で配列バッファーを使う</h3> + +<p>まず、新しい頂点バッファーオブジェクト (VBO) を作成し、配列バッファーを与えます。</p> + +<pre class="brush: js">//配列バッファーを頂点バッファーオブジェクトに結合する +const vbo = gl.createBuffer(); +gl.bindBuffer(gl.ARRAY_BUFFER, vbo); +gl.bufferData(gl.ARRAY_BUFFER, buffer, gl.STATIC_DRAW); +</pre> + +<p>それから、インデックスを自分で設定することで、配列バッファーのメモリーレイアウトを指定します。</p> + +<pre class="brush: js, highlight:[3, 6, 9]">//バッファーのレイアウトについて記述します +//1. 位置、正規化しない +gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 20, 0); +gl.enableVertexAttribArray(0); +//2. 法線ベクトル、[-1, 1] に正規化 +gl.vertexAttribPointer(1, 4, gl.BYTE, true, 20, 12); +gl.enableVertexAttribArray(1); +//3. テクスチャ座標、[0, 1] に正規化 +gl.vertexAttribPointer(2, 2, gl.UNSIGNED_SHORT, true, 20, 16); +gl.enableVertexAttribArray(2); + +//頂点シェーダー内の属性を同じインデックスに設定します +gl.bindAttribLocation(shaderProgram, 0, 'position'); +gl.bindAttribLocation(shaderProgram, 1, 'normal'); +gl.bindAttribLocation(shaderProgram, 2, 'texUV'); +//属性のインデックスが変更された場合、シェーダーを再リンクする必要があります +//これにより、以前に設定されたすべてのユニフォームがリセットされることに注意してください。 +gl.linkProgram(shaderProgram); +</pre> + +<p>あるいは、インデックスを自分で設定する代わりに、グラフィックスカードによって提供されたインデックスを使用することもできます。これはシェーダープログラムの再リンクを避けます。</p> + +<pre class="brush: js, highlight:[2, 6, 10]">const locPosition = gl.getAttribLocation(shaderProgram, 'position'); +gl.vertexAttribPointer(locPosition, 3, gl.FLOAT, false, 20, 0); +gl.enableVertexAttribArray(locPosition); + +const locNormal = gl.getAttribLocation(shaderProgram, 'normal'); +gl.vertexAttribPointer(locNormal, 4, gl.BYTE, true, 20, 12); +gl.enableVertexAttribArray(locNormal); + +const locTexUV = gl.getAttribLocation(shaderProgram, 'texUV'); +gl.vertexAttribPointer(locTexUV, 2, gl.UNSIGNED_SHORT, true, 20, 16); +gl.enableVertexAttribArray(locTexUV); +</pre> + +<h2 id="仕様策定状況">仕様策定状況</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.10", "vertexAttribPointer")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初回定義。</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glVertexAttribPointer.xml", "glVertexAttribPointer")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL API のマニュアルページ。</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザーの対応">ブラウザーの対応</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.vertexAttribPointer")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>OpenGL wiki の <a href="https://www.khronos.org/opengl/wiki/Vertex_Specification">Vertex Specification</a></li> + <li>{{domxref("WebGL2RenderingContext.vertexAttribIPointer()")}}</li> +</ul> |