From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../webglrenderingcontext/attachshader/index.html | 95 ++++++ .../webglrenderingcontext/bindbuffer/index.html | 123 +++++++ .../webglrenderingcontext/bufferdata/index.html | 155 +++++++++ .../web/api/webglrenderingcontext/clear/index.html | 89 +++++ .../webglrenderingcontext/clearcolor/index.html | 79 +++++ .../webglrenderingcontext/cleardepth/index.html | 72 ++++ .../webglrenderingcontext/clearstencil/index.html | 72 ++++ .../webglrenderingcontext/compileshader/index.html | 81 +++++ .../webglrenderingcontext/createbuffer/index.html | 67 ++++ .../webglrenderingcontext/createprogram/index.html | 83 +++++ .../webglrenderingcontext/createshader/index.html | 80 +++++ .../webglrenderingcontext/drawarrays/index.html | 91 +++++ .../getattriblocation/index.html | 65 ++++ files/ja/web/api/webglrenderingcontext/index.html | 365 +++++++++++++++++++++ .../webglrenderingcontext/linkprogram/index.html | 79 +++++ .../webglrenderingcontext/shadersource/index.html | 70 ++++ .../webglrenderingcontext/uniformmatrix/index.html | 73 +++++ .../webglrenderingcontext/useprogram/index.html | 76 +++++ .../vertexattribpointer/index.html | 247 ++++++++++++++ 19 files changed, 2062 insertions(+) create mode 100644 files/ja/web/api/webglrenderingcontext/attachshader/index.html create mode 100644 files/ja/web/api/webglrenderingcontext/bindbuffer/index.html create mode 100644 files/ja/web/api/webglrenderingcontext/bufferdata/index.html create mode 100644 files/ja/web/api/webglrenderingcontext/clear/index.html create mode 100644 files/ja/web/api/webglrenderingcontext/clearcolor/index.html create mode 100644 files/ja/web/api/webglrenderingcontext/cleardepth/index.html create mode 100644 files/ja/web/api/webglrenderingcontext/clearstencil/index.html create mode 100644 files/ja/web/api/webglrenderingcontext/compileshader/index.html create mode 100644 files/ja/web/api/webglrenderingcontext/createbuffer/index.html create mode 100644 files/ja/web/api/webglrenderingcontext/createprogram/index.html create mode 100644 files/ja/web/api/webglrenderingcontext/createshader/index.html create mode 100644 files/ja/web/api/webglrenderingcontext/drawarrays/index.html create mode 100644 files/ja/web/api/webglrenderingcontext/getattriblocation/index.html create mode 100644 files/ja/web/api/webglrenderingcontext/index.html create mode 100644 files/ja/web/api/webglrenderingcontext/linkprogram/index.html create mode 100644 files/ja/web/api/webglrenderingcontext/shadersource/index.html create mode 100644 files/ja/web/api/webglrenderingcontext/uniformmatrix/index.html create mode 100644 files/ja/web/api/webglrenderingcontext/useprogram/index.html create mode 100644 files/ja/web/api/webglrenderingcontext/vertexattribpointer/index.html (limited to 'files/ja/web/api/webglrenderingcontext') 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 +--- +
{{APIRef("WebGL")}}
+ +

WebGL API の WebGLRenderingContext.attachShader() メソッドは、フラグメントか頂点のどちらかの {{domxref("WebGLShader")}} を {{domxref("WebGLProgram")}} にアタッチします。

+ +

構文

+ +
void gl.attachShader(program, shader);
+
+ +

引数

+ +
+
program
+
{{domxref("WebGLProgram")}}。
+
shader
+
フラグメントか頂点の {{domxref("WebGLShader")}}。
+
+ +

例

+ +

以下は既存のシェーダーを {{domxref("WebGLProgram")}} にアタッチするコードです。

+ +
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;
+}
+
+ +

仕様策定状況

+ + + + + + + + + + + + + + + + + + + +
仕様策定状況コメント
{{SpecName('WebGL', "#5.14.9", "attachShader")}}{{Spec2('WebGL')}}初回定義。
{{SpecName('OpenGL ES 2.0', "glAttachShader.xml", "glAttachShader")}}{{Spec2('OpenGL ES 2.0')}}OpenGL マニュアルページ。
+ +

ブラウザーの対応

+ + + +

{{Compat("api.WebGLRenderingContext.attachShader")}}

+ +

関連項目

+ + 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 +--- +
{{APIRef("WebGL")}}
+ +

WebGL API の WebGLRenderingContext.bindBuffer() メソッドは、与えられた {{domxref("WebGLBuffer")}} をターゲットに結合します。

+ +

構文

+ +
void gl.bindBuffer(target, buffer);
+
+ +

引数

+ +
+
target
+
結合する場所 (ターゲット) の {{domxref("GLenum")}} です。以下の値を与えることができます。 +
    +
  • gl.ARRAY_BUFFER: 頂点の属性を含むバッファーで、頂点座標、テクスチャ座標データや、頂点色データのようなものです。
    • +
  • gl.ELEMENT_ARRAY_BUFFER: 要素の位置指定に使われるバッファーです。
    • +
  • {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} を使用している場合は、更に以下の値を利用することができます。 +
      +
    • gl.COPY_READ_BUFFER: バッファーオブジェクトを他へコピーするためのバッファーです。
      • +
    • gl.COPY_WRITE_BUFFER: バッファーオブジェクトを他へコピーするためのバッファーです。
      • +
    • gl.TRANSFORM_FEEDBACK_BUFFER: 書き戻し操作を変換するバッファーです。
      • +
    • gl.UNIFORM_BUFFER: ユニフォームブロックの格納に使われるバッファーです。
      • +
    • gl.PIXEL_PACK_BUFFER: ピクセル移動操作に使われるバッファーです。
      • +
    • gl.PIXEL_UNPACK_BUFFER: ピクセル移動操作に使われるバッファーです。
      • +
    +
    • +
+
+
buffer
+
結合する {{domxref("WebGLBuffer")}} です。
+
+ +

返り値

+ +

ありません。

+ +

例外

+ +

一つのターゲットにのみ {{domxref("WebGLBuffer")}} を結合できます。バッファーを他のターゲットに結合しようとすると、INVALID_OPERATION エラーをスローして現在のバッファ結合を同じままにします。

+ +

{{domxref("WebGLBuffer")}} が {{domxref("WebGLRenderingContext.deleteBuffer()", "deleteBuffer")}} によって削除されるようにマークされると、(再び) 結合できなくなります。そうしようとしても INVALID_OPERATION エラーが生成されて、現在の結合は変更されません。

+ +

例

+ +

バッファーをターゲットに結合

+ +
var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var buffer = gl.createBuffer();
+
+gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+
+ +

現在結合されているものの取得

+ +

現在のバッファー結合を確認するには、ARRAY_BUFFER_BINDING や ELEMENT_ARRAY_BUFFER_BINDING の定数で問い合わせます。

+ +
gl.getParameter(gl.ARRAY_BUFFER_BINDING);
+gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING);
+
+ +

仕様策定状況

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様策定状況コメント
{{SpecName('WebGL', "#5.14.5", "bindBuffer")}}{{Spec2('WebGL')}}WebGL 初回定義。
{{SpecName('OpenGL ES 2.0', "glBindBuffer.xml", "glBindBuffer")}}{{Spec2('OpenGL ES 2.0')}}OpenGL ES 2 API (と同様な) マニュアルページ。
{{SpecName('WebGL2', "#3.7.1", "bindBuffer")}}{{Spec2('WebGL2')}} +

WebGL 2 のために定義を更新。

+ +

以下の新しい target バッファーを追加。
+ gl.COPY_READ_BUFFER,
+ gl.COPY_WRITE_BUFFER,
+ gl.TRANSFORM_FEEDBACK_BUFFER,
+ gl.UNIFORM_BUFFER,
+ gl.PIXEL_PACK_BUFFER,
+ gl.PIXEL_UNPACK_BUFFER

+
{{SpecName('OpenGL ES 3.0', "glBindBuffer.xhtml", "glBindBuffer")}}{{Spec2('OpenGL ES 3.0')}}OpenGL ES 3 API (と同様な) マニュアルページ。
+ +

ブラウザーの対応

+ + + +

{{Compat("api.WebGLRenderingContext.bindBuffer")}}

+ +

関連項目

+ + 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 +--- +
{{APIRef("WebGL")}}
+ +

WebGL API WebGLRenderingContext.bufferData() メソッドは、バッファーオブジェクトのデータストアを初期化、作成します。

+ +

構文

+ +
// 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);
+
+ +

引数

+ +
+
target
+
結合する場所 (ターゲット) を指定する {{domxref("GLenum")}}。以下の値を取ることができます。 +
    +
  • gl.ARRAY_BUFFER: 頂点の属性を含むバッファーで、頂点座標、テクスチャ座標データや、頂点色データのようなものです。
    • +
  • gl.ELEMENT_ARRAY_BUFFER: 要素の位置指定に使用されるバッファーです。
    • +
  • {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} を使用している場合は、更にに以下の値を利用できます。 +
      +
    • gl.COPY_READ_BUFFER: バッファーオブジェクトを他へコピーするためのバッファーです。
      • +
    • gl.COPY_WRITE_BUFFER: バッファーオブジェクトを他へコピーするためのバッファーです。
      • +
    • gl.TRANSFORM_FEEDBACK_BUFFER: 書き戻し操作を変換するバッファーです。
      • +
    • gl.UNIFORM_BUFFER: ユニフォームブロックの格納に使われるバッファーです。
      • +
    • gl.PIXEL_PACK_BUFFER: ピクセル移動操作に使われるバッファーです。
      • +
    • gl.PIXEL_UNPACK_BUFFER: ピクセル移動操作に使われるバッファーです。
      • +
    +
    • +
+
+
size
+
{{domxref("GLsizeiptr")}} のバッファーオブジェクトのデータストアのサイズ。
+
srcData {{optional_inline}}
+
{{jsxref("ArrayBuffer")}}, {{jsxref("SharedArrayBuffer")}} か {{domxref("ArrayBufferView")}} の型付き配列型の一つで、データストアへ格納されます。null の場合、データストアは作成されますが、内容は初期化されず未定義です。
+
usage
+
データストアの用途を指定する {{domxref("GLenum")}}。以下の値を取ることができます。 +
    +
  • gl.STATIC_DRAW: バッファーの内容は、何度か使用されてあまり変更されません。バッファーへ書き込まれますが、読み出せません。
    • +
  • gl.DYNAMIC_DRAW: バッファーの内容は、よく使用されて何度か変更されます。バッファーへ書き込まれますが、読み出せません。
    • +
  • gl.STREAM_DRAW: バッファーの内容は、よく使用され変更されます。バッファーへ書き込まれますが、読み出せません。
    • +
  • {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} を使用している場合、さらに以下の値を取ることができます。 +
      +
    • gl.STATIC_READ: バッファーの内容は、何度か使用されてあまり変更されません。バッファーから読み出されますが、書き込めません。
      • +
    • gl.DYNAMIC_READ: バッファーの内容は、よく使用されて何度か変更されます。バッファーから読み出されますが、書き込めません。
      • +
    • gl.STREAM_READ: バッファーの内容は、よく使用され変更されます。バッファーから読み出されますが、書き込めません。
      • +
    • gl.STATIC_COPY: バッファーの内容は、何度か使用されてあまり変更されません。ユーザーによる書き込みや読み出しはできません。
      • +
    • gl.DYNAMIC_COPY: バッファーの内容は、よく使用されて何度か変更されます。ユーザーによる書き込みや読み出しはできません。
      • +
    • gl.STREAM_COPY: バッファーの内容は、よく使用され変更されます。ユーザーによる書き込みや読み出しはできません。
      • +
    +
    • +
+
+
srcOffset
+
バッファー読み出しを開始する要素の位置のオフセットを指定する {{domxref("GLuint")}}。
+
length {{optional_inline}}
+
{{domxref("GLuint")}}。既定値は 0 です。
+
+ +

返り値

+ +

ありません。

+ +

例外

+ + + +

例

+ +

bufferData の使用

+ +
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);
+
+ +

バッファー情報の取得

+ +

現在のバッファーの用途やサイズを確認するには、{{domxref("WebGLRenderingContext.getBufferParameter()")}} メソッドを使用します。

+ +
gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_SIZE);
+gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_USAGE);
+
+ +

仕様策定状況

+ + + + + + + + + + + + + + + + + + + + + + + + +
仕様策定状況コメント
{{SpecName('WebGL', "#5.14.5", "bufferData")}}{{Spec2('WebGL')}}初回定義。
{{SpecName('OpenGL ES 2.0', "glBufferData.xml", "glBufferData")}}{{Spec2('OpenGL ES 2.0')}}OpenGL API のマニュアルページ。
{{SpecName('OpenGL ES 3.0', "glBufferData.xhtml", "glBufferData")}}{{Spec2('OpenGL ES 3.0')}}OpenGL ES 3 API (と同様の) マニュアルページ。
+
+ 以下の新しい target バッファーを追加。
+ gl.COPY_READ_BUFFER,
+ gl.COPY_WRITE_BUFFER,
+ gl.TRANSFORM_FEEDBACK_BUFFER,
+ gl.UNIFORM_BUFFER,
+ gl.PIXEL_PACK_BUFFER,
+ gl.PIXEL_UNPACK_BUFFER
+
+ 以下の新しい usage ヒントを追加。
+ gl.STATIC_READ,
+ gl.DYNAMIC_READ,
+ gl.STREAM_READ,
+ gl.STATIC_COPY,
+ gl.DYNAMIC_COPY,
+ gl.STREAM_COPY.
+ +

ブラウザーの対応

+ + + +

{{Compat("api.WebGLRenderingContext.bufferData")}}

+ +

関連項目

+ + 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 +--- +
{{APIRef("WebGL")}}
+ +

WebGL API の WebGLRenderingContext.clear() メソッドは、バッファーをプリセット値で消去します。

+ +

プリセット値は、{{domxref("WebGLRenderingContext.clearColor", "clearColor()")}}, {{domxref("WebGLRenderingContext.clearDepth", "clearDepth()")}} や {{domxref("WebGLRenderingContext.clearStencil", "clearStencil()")}} で設定可能です。

+ +

シザーボックス、ディザリング、バッファー書き込みマスクは clear() メソッドに影響します。

+ +

構文

+ +
void gl.clear(mask);
+
+ +

引数

+ +
+
mask
+
消去されるバッファーを示す {{domxref("GLbitfield")}} のビット論理和マスクです。以下の値を取ることができます。 +
    +
  • gl.COLOR_BUFFER_BIT
    • +
  • gl.DEPTH_BUFFER_BIT
    • +
  • gl.STENCIL_BUFFER_BIT
    • +
+
+
+ +

返り値

+ +

ありません。

+ +

例外

+ +

mask が記載した値のうちどれでもない場合、gl.INVALID_ENUM エラーがスローされます。

+ +

例

+ +

clear() メソッドは複数の値を受け入れることができます。

+ +
gl.clear(gl.DEPTH_BUFFER_BIT);
+gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
+
+ +

現在の消去する値を取得するには、COLOR_CLEAR_VALUE, DEPTH_CLEAR_VALUE, や STENCIL_CLEAR_VALUE 定数で問い合わせます。

+ +
gl.getParameter(gl.COLOR_CLEAR_VALUE);
+gl.getParameter(gl.DEPTH_CLEAR_VALUE);
+gl.getParameter(gl.STENCIL_CLEAR_VALUE);
+
+ +

仕様策定状況

+ + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('WebGL', "#5.14.11", "clear")}}{{Spec2('WebGL')}}初回定義。
{{SpecName('OpenGL ES 2.0', "glClear.xml", "glClear")}}{{Spec2('OpenGL ES 2.0')}}OpenGL API のマニュアルページ。
+ +

ブラウザーの対応

+ + + +

{{Compat("api.WebGLRenderingContext.clear")}}

+ +

関連項目

+ + 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 +--- +
{{APIRef("WebGL")}}
+ +

WebGL API の  WebGLRenderingContext.clearColor() メソッドは、カラーバッファーの消去に使われる色の値を指定します。

+ +

この指定は {{domxref("WebGLRenderingContext.clear", "clear()")}} メソッドを呼んだときに使用される色です。値は 0 から 1 に丸められます。

+ +

構文

+ +
void gl.clearColor(red, green, blue, alpha);
+
+ +

引数

+ +
+
red
+
赤色を指定する {{domxref("GLclampf")}} で、カラーバッファーの消去に使われます。既定値は 0 です。
+
green
+
緑色を指定する {{domxref("GLclampf")}} で、カラーバッファーの消去に使われます。既定値は 0 です。
+
blue
+
青色を指定する {{domxref("GLclampf")}} で、カラーバッファーの消去に使われます。既定値は 0 です。
+
alpha
+
アルファ (不透明度) を指定する {{domxref("GLclampf")}} で、カラーバッファーの消去に使われます。既定値は 0 です。
+
+ +

返り値

+ +

ありません。

+ +

例

+ +
gl.clearColor(1, 0.5, 0.5, 3);
+
+ +

現在の消去に使われる色を取得するには、COLOR_CLEAR_VALUE 定数で問い合わせると {{jsxref("Float32Array")}} を返します。

+ +
gl.getParameter(gl.COLOR_CLEAR_VALUE);
+// Float32Array[1, 0.5, 0.5, 1]
+
+ +

仕様策定状況

+ + + + + + + + + + + + + + + + + + + +
仕様策定状況コメント
{{SpecName('WebGL', "#5.14.3", "clearColor")}}{{Spec2('WebGL')}}初回定義。
{{SpecName('OpenGL ES 2.0', "glClearColor.xml", "glClearColor")}}{{Spec2('OpenGL ES 2.0')}}OpenGL API のマニュアルページ。
+ +

ブラウザーの対応

+ + + +

{{Compat("api.WebGLRenderingContext.clearColor")}}

+ +

関連項目

+ + 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 +--- +
{{APIRef("WebGL")}}
+ +

WebGL API の WebGLRenderingContext.clearDepth() メソッドは、深度バッファーを消去する値を指定します。

+ +

この指定は、{{domxref("WebGLRenderingContext.clear", "clear()")}} メソッドを呼ぶときに使用される深度の数値です。値は 0 から 1 に丸められます。

+ +

構文

+ +
void gl.clearDepth(depth);
+
+ +

引数

+ +
+
depth
+
深度の値を指定する {{domxref("GLclampf")}} で、深度バッファーを消去するときに使われる値です。既定値は 1 です。
+
+ +

返り値

+ +

ありません。

+ +

例

+ +
gl.clearDepth(0.5);
+
+ +

現在の深度を消去する値を取得するには、DEPTH_CLEAR_VALUE 定数で問い合わせます。

+ +
gl.getParameter(gl.DEPTH_CLEAR_VALUE);
+// 0.5
+ +

仕様策定状況

+ + + + + + + + + + + + + + + + + + + +
仕様策定状況コメント
{{SpecName('WebGL', "#5.14.3", "clearDepth")}}{{Spec2('WebGL')}}初回定義。
{{SpecName('OpenGL ES 2.0', "glClearDepthf.xml", "glClearDepthf")}}{{Spec2('OpenGL ES 2.0')}}OpenGL API のマニュアルページ。
+ +

ブラウザーの対応

+ + + +

{{Compat("api.WebGLRenderingContext.clearDepth")}}

+ +

関連項目

+ + 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 +--- +
{{APIRef("WebGL")}}
+ +

WebGL API の WebGLRenderingContext.clearStencil() メソッドは、ステンシルバッファーを消去する値を指定します。

+ +

この指定は、{{domxref("WebGLRenderingContext.clear", "clear()")}} メソッドを呼ぶときに使用されるステンシルの値です。

+ +

構文

+ +
void gl.clearStencil(s);
+
+ +

引数

+ +
+
s
+
インデックスを指定する {{domxref("GLint")}} で、ステンシルバッファーの消去に使用される値です。既定値は 0 です。
+
+ +

返り値

+ +

ありません。

+ +

例

+ +
gl.clearStencil(1);
+
+ +

現在のステンシルを消去する値を取得するには、STENCIL_CLEAR_VALUE 定数で問い合わせます。

+ +
gl.getParameter(gl.STENCIL_CLEAR_VALUE);
+// 1
+ +

仕様策定状況

+ + + + + + + + + + + + + + + + + + + +
仕様策定状況策定状況コメント
{{SpecName('WebGL', "#5.14.3", "clearStencil")}}{{Spec2('WebGL')}}初回定義。
{{SpecName('OpenGL ES 2.0', "glClearStencil.xml", "glClearStencil")}}{{Spec2('OpenGL ES 2.0')}}OpenGL API のマニュアルページ。
+ +

ブラウザーの対応

+ + + +

{{Compat("api.WebGLRenderingContext.clearStencil")}}

+ +

関連項目

+ + 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 +--- +
{{APIRef("WebGL")}}
+ +

WebGL API の WebGLRenderingContext.compileShader() メソッドは、GLSL シェーダーをバイナリへコンパイルします。これは {{domxref("WebGLProgram")}} に使用することができます。

+ +

構文

+ +
void gl.compileShader(shader);
+
+ +

引数

+ +
+
shader
+
フラグメントか頂点の {{domxref("WebGLShader")}}。
+
+ +

例

+ +
var shader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(shader, shaderSource);
+gl.compileShader(shader);
+
+ +

仕様策定状況

+ + + + + + + + + + + + + + + + + + + +
仕様策定状況コメント
{{SpecName('WebGL', "#5.14.9", "compileShader")}}{{Spec2('WebGL')}}初回定義。
{{SpecName('OpenGL ES 2.0', "glCompileShader.xml", "glCompileShader")}}{{Spec2('OpenGL ES 2.0')}}OpenGL マニュアルページ。
+ +

ブラウザーの対応

+ + + +

{{Compat("api.WebGLRenderingContext.compileShader")}}

+ +

関連項目

+ + 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 +--- +
{{APIRef("WebGL")}}
+ +

WebGL API の WebGLRenderingContext.createBuffer() メソッドは、頂点や色といったデータを格納する {{domxref("WebGLBuffer")}} を作成、初期化します。

+ +

構文

+ +
WebGLBuffer gl.createBuffer();
+
+ +

引数

+ +

ありません。

+ +

返り値

+ +

頂点や色といったデータを格納する {{domxref("WebGLBuffer")}} です。

+ +

例

+ +

バッファーの作成

+ +
var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var buffer = gl.createBuffer();
+
+ +

仕様策定状況

+ + + + + + + + + + + + + + + + + + + +
仕様策定状況コメント
{{SpecName('WebGL', "#5.14.5", "createBuffer")}}{{Spec2('WebGL')}}初回定義。
{{SpecName('OpenGL ES 2.0', "glGenBuffers.xml", "glGenBuffers")}}{{Spec2('OpenGL ES 2.0')}}OpenGL API (と同様な) マニュアルページ
+ +

ブラウザーの対応

+ + + +

{{Compat("api.WebGLRenderingContext.createBuffer")}}

+ +

関連項目

+ + 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 +--- +
{{APIRef("WebGL")}}
+ +

WebGL API の WebGLRenderingContext.createProgram() メソッドは、{{domxref("WebGLProgram")}} オブジェクトを作成、初期化します。

+ +

構文

+ +
WebGLProgram gl.createProgram();
+
+ +

引数

+ +

ありません。

+ +

返り値

+ +

{{domxref("WebGLProgram")}} オブジェクトは、2 つのコンパイルされた {{domxref("WebGLShader")}} の組み合わせで、頂点シェーダーとフラグメントシェーダー (どちらも GLSL で書かれる) で成り立ちます。そして、これらを使用可能なプログラムへとリンクします。

+ +

例

+ +

WebGL プログラムの作成

+ +
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;
+}
+
+ +

{{domxref("WebGLShader")}} を参照すると、上記サンプルの vertexShader と fragmentShader の作成についての情報が得られます。

+ +

仕様策定状況

+ + + + + + + + + + + + + + + + + + + +
仕様策定状況コメント
{{SpecName('WebGL', "#5.14.9", "createProgram")}}{{Spec2('WebGL')}}初回定義。
{{SpecName('OpenGL ES 2.0', "glCreateProgram.xml", "glCreateProgram")}}{{Spec2('OpenGL ES 2.0')}} +

OpenGL API (と同様の) マニュアルページ。

+
+ +

ブラウザーの対応

+ + + +

{{Compat("api.WebGLRenderingContext.createProgram")}}

+ +

関連項目

+ + 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 +--- +
{{APIRef("WebGL")}}
+ +

WebGL API の WebGLRenderingContext.createShader() メソッドは、{{domxref("WebGLShader")}} を作成します。それからさらに、 {{domxref("WebGLRenderingContext.shaderSource()")}} と {{domxref("WebGLRenderingContext.compileShader()")}} を用いて設定できます。

+ +

構文

+ +
WebGLShader gl.createShader(type);
+
+ +

引数

+ +
+
type
+
gl.VERTEX_SHADER と gl.FRAGMENT_SHADER のどちらか
+
+ +

例

+ +

用例については {{domxref("WebGLShader")}} を参照してください。

+ +

仕様策定状況

+ + + + + + + + + + + + + + + + + + + +
仕様策定状況コメント
{{SpecName('WebGL', "#5.14.9", "createShader")}}{{Spec2('WebGL')}}初回定義。
{{SpecName('OpenGL ES 2.0', "glCreateShader.xml", "glCreateShader")}}{{Spec2('OpenGL ES 2.0')}}OpenGL マニュアルページ。
+ +

ブラウザーの対応

+ + + +

{{Compat("api.WebGLRenderingContext.createShader")}}

+ +

関連項目

+ + 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 +--- +
{{APIRef("WebGL")}}
+ +

WebGL API の WebGLRenderingContext.drawArrays() メソッドは、配列データからプリミティブを描画します。

+ +

構文

+ +
void gl.drawArrays(mode, first, count);
+
+ +

引数

+ +
+
mode
+
描画するプリミティブの種類を指定する {{domxref("GLenum")}}。以下の値を取ることができます。 +
    +
  • gl.POINTS: 単一の点を描画します。
    • +
  • gl.LINE_STRIP: 次の線へと直線を描画します。
    • +
  • gl.LINE_LOOP: 次の線へと直線を描画し、最後の頂点は最初のものに接続します。
    • +
  • gl.LINES: 頂点 2 つごとに、その間に線を描画します。
    • +
  • gl.TRIANGLE_STRIP
    • +
  • gl.TRIANGLE_FAN
    • +
  • gl.TRIANGLES: 頂点 3 つの集まりごとに、三角形を描画します。
    • +
+
+
first
+
頂点ベクトルの配列の開始インデックスを指定する {{domxref("GLint")}}。
+
count
+
描画されるインデックスの数を指定する {{domxref("GLsizei")}}。
+
+ +

返り値

+ +

ありません。

+ +

例外

+ + + +

例

+ +
gl.drawArrays(gl.POINTS, 0, 8);
+
+ +

仕様策定状況

+ + + + + + + + + + + + + + + + + + + +
仕様策定状況コメント
{{SpecName('WebGL', "#5.14.11", "drawArrays")}}{{Spec2('WebGL')}}初回定義。
{{SpecName('OpenGL ES 2.0', "glDrawArrays.xml", "glDrawArrays")}}{{Spec2('OpenGL ES 2.0')}}OpenGL API のマニュアルページ。
+ +

ブラウザーの対応

+ + + +

{{Compat("api.WebGLRenderingContext.drawArrays")}}

+ +

関連項目

+ + 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 +--- +
{{APIRef("WebGL")}}
+ +

WebGL API の WebGLRenderingContext.getAttribLocation()メソッドは指定された{{domxref("WebGLProgram")}}内の属性の場所を返します。

+ +

構文

+ +
GLint gl.getAttribLocation(program, name);
+
+ +

引数

+ +
+
program
+
属性の変数を含む{{domxref("WebGLProgram")}}
+
name
+
場所を取得する属性の変数名を指定する{{domxref("DOMString")}}
+
+ +

返り値

+ +

見つかった場合、変数名の場所を示す{{domxref("GLint")}}番号を、それ以外の場合は-1を返します。

+ +

例

+ +
gl.getAttribLocation(program, 'vColor');
+
+ +

仕様策定状況

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14.10", "getAttribLocation")}}{{Spec2('WebGL')}}初回定義
{{SpecName('OpenGL ES 2.0', "glGetAttribLocation.xml", "glGetAttribLocation")}}{{Spec2('OpenGL ES 2.0')}}OpenGL API のマニュアルページ
+ +

ブラウザーの対応

+ + + +

{{Compat("api.WebGLRenderingContext.getAttribLocation")}}

+ +

関連項目

+ + 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 +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext インターフェースは {{HTMLElement("canvas")}} 要素の描画サーフェスのためのOpenGL ES 2.0のレンダリングコンテキストを提供します。

+ +

このインターフェースを取得するためには、<canvas> 要素の {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} を "webgl" の引数を与えて呼び出します:

+ +
var canvas = document.getElementById('myCanvas');
+var gl = canvas.getContext('webgl');
+
+ +

一度キャンバスのWebGLレンダリングコンテキストを取得すれば、その中でレンダリングができます。

+ +

WebGL tutorial には、WebGLを始めるためのより多くの情報、サンプル、資料があります。

+ +

定数

+ +

WebGL constants ページを参照してください。

+ +

WebGL コンテキスト

+ +

次のプロパティやメソッドはWebGLコンテキストを扱うための一般的な情報や機能を提供します:

+ +
+
{{domxref("WebGLRenderingContext.canvas")}}
+
読み取り専用の {{domxref("HTMLCanvasElement")}} への後方参照です。{{HTMLElement("canvas")}} 要素と関連付けられていない場合は {{jsxref("null")}} を返すことがあります。
+
{{domxref("WebGLRenderingContext.commit()")}} {{experimental_inline}}
+
+

コンテキストが直接指定されたキャンバスに固定されていない場合、フレームを元の {{domxref("HTMLCanvasElement")}} にプッシュします。

+
+
{{domxref("WebGLRenderingContext.drawingBufferWidth")}}
+
読み取り専用の現在の描画バッファの幅です。コンテキストが関連付けされたcanvas要素の幅と一致しているといえます。
+
{{domxref("WebGLRenderingContext.drawingBufferHeight")}}
+
読み取り専用の現在の描画バッファの高さです。コンテキストが関連付けされたcanvas要素の高さと一致しているといえます。
+
{{domxref("WebGLRenderingContext.getContextAttributes()")}}
+
実際のコンテキストパラメータを含む WebGLContextAttributes オブジェクトを返します。コンテキストが失われていた場合は {{jsxref("null")}} を返すことがあります。
+
{{domxref("WebGLRenderingContext.isContextLost()")}}
+
コンテキストが失われている場合は true を返し、そうでない場合は false を返します。
+
+ +

ビューイングとクリッピング

+ +
+
{{domxref("WebGLRenderingContext.scissor()")}}
+
シザーボックスを定義します。
+
{{domxref("WebGLRenderingContext.viewport()")}}
+
ビューポートをセットします。
+
+ +

ステート情報

+ +
+
{{domxref("WebGLRenderingContext.activeTexture()")}}
+
アクティブなテクスチャユニットを選択します。
+
{{domxref("WebGLRenderingContext.blendColor()")}}
+
ブレンド元とブレンド先のブレンドファクターをセットします。
+
{{domxref("WebGLRenderingContext.blendEquation()")}}
+
RGBのブレンド式とアルファのブレンド式をひとつの式にセットします。
+
{{domxref("WebGLRenderingContext.blendEquationSeparate()")}}
+
RGBのブレンド式とアルファのブレンド式を分けて式にセットします。
+
{{domxref("WebGLRenderingContext.blendFunc()")}}
+
どの関数がピクセルのブレンド演算に使用されるかを定義します。
+
{{domxref("WebGLRenderingContext.blendFuncSeparate()")}}
+
どの関数がピクセルのブレンド演算に使用されるかをRGBとアルファ要素を個別に定義します。
+
{{domxref("WebGLRenderingContext.clearColor()")}}
+
カラーバッファをクリアする時に使われる色を指定します。
+
{{domxref("WebGLRenderingContext.clearDepth()")}}
+
深度バッファをクリアする時に使用する深度値を指定します。
+
{{domxref("WebGLRenderingContext.clearStencil()")}}
+
ステンシルバッファをクリアする時に使用するステンシル値を指定します。
+
{{domxref("WebGLRenderingContext.colorMask()")}}
+
ドローイングまたは {{domxref("WebGLFramebuffer")}} へのレンダリングの際に、どの色要素を有効または無効にするかをセットします。
+
{{domxref("WebGLRenderingContext.cullFace()")}}
+
前面ポリゴンと後面ポリゴンのいずれか、または両方をカリングするかどうかを指定します。
+
{{domxref("WebGLRenderingContext.depthFunc()")}}
+
現在の深度バッファの深度値と書き込むピクセルの深度値を比較する関数を指定します。
+
{{domxref("WebGLRenderingContext.depthMask()")}}
+
深度バッファへの書き込みを有効にするか無効にするかどうかをセットします。
+
{{domxref("WebGLRenderingContext.depthRange()")}}
+
正規化デバイス座標系からウィンドウまたはビューポート座標系への深度レンジマッピングを指定します。
+
{{domxref("WebGLRenderingContext.disable()")}}
+
このコンテキストにおいて、指定したWebGL機能を無効にします。
+
{{domxref("WebGLRenderingContext.enable()")}}
+
このコンテキストにおいて、指定したWebGL機能を有効にします。
+
{{domxref("WebGLRenderingContext.frontFace()")}}
+
前面ポリゴンなのか後面ポリゴンなのかを周る方向によって指定します。
+
{{domxref("WebGLRenderingContext.getParameter()")}}
+
渡されたパラメータ名の値を返します。
+
{{domxref("WebGLRenderingContext.getError()")}}
+
エラー情報を返します。
+
{{domxref("WebGLRenderingContext.hint()")}}
+
一定の振る舞いについてのヒントを指定します。このヒントの振る舞いは実装に依存します。
+
{{domxref("WebGLRenderingContext.isEnabled()")}}
+
このコンテキストで指定されたWebGL機能が有効であるか無効であるかをテストします。
+
{{domxref("WebGLRenderingContext.lineWidth()")}}
+
ラスタライズする線の幅をセットします。
+
{{domxref("WebGLRenderingContext.pixelStorei()")}}
+
ピクセルストレージモードを指定します。
+
{{domxref("WebGLRenderingContext.polygonOffset()")}}
+
Specifies the scale factors and units to calculate depth values.
+
{{domxref("WebGLRenderingContext.sampleCoverage()")}}
+
アンチエイリアシングエフェクトのためのマルチサンプルカバレッジパラメータを指定します。
+
{{domxref("WebGLRenderingContext.stencilFunc()")}}
+
ステンシルテストための関数と参照値を、前面と後面の両面をセットします。
+
{{domxref("WebGLRenderingContext.stencilFuncSeparate()")}}
+
ステンシルテストための関数と参照値を、前面と後面の両面、またはいずれかをセットします。
+
{{domxref("WebGLRenderingContext.stencilMask()")}}
+
ステンシル平面の個々のビットの書き込みの有効と無効を、前面と後面の両面を操作します。
+
{{domxref("WebGLRenderingContext.stencilMaskSeparate()")}}
+
ステンシル平面の個々のビットの書き込みの有効と無効を、前面と後面のいずれか、または両面を操作します。
+
{{domxref("WebGLRenderingContext.stencilOp()")}}
+
前面と後面のステンシルテストの振る舞いを同時にセットします。
+
{{domxref("WebGLRenderingContext.stencilOpSeparate()")}}
+
前面と後面のステンシルテストの振る舞いをセットします。
+
+ +

バッファ

+ +
+
{{domxref("WebGLRenderingContext.bindBuffer()")}}
+
WebGLBuffer オブジェクトを与えられたターゲットにバインドします。
+
{{domxref("WebGLRenderingContext.bufferData()")}}
+
バッファデータを更新します。
+
{{domxref("WebGLRenderingContext.bufferSubData()")}}
+
バッファデータを与えられたオフセットから更新します。
+
{{domxref("WebGLRenderingContext.createBuffer()")}}
+
WebGLBuffer オブジェクトを作成します。
+
{{domxref("WebGLRenderingContext.deleteBuffer()")}}
+
WebGLBuffer オブジェクトを削除します。
+
{{domxref("WebGLRenderingContext.getBufferParameter()")}}
+
バッファについての情報を返します。
+
{{domxref("WebGLRenderingContext.isBuffer()")}}
+
与えられたバッファが有効であるかのブール値を返します。
+
+ +

フレームバッファ

+ +
+
{{domxref("WebGLRenderingContext.bindFramebuffer()")}}
+
WebGLFrameBuffer オブジェクトを与えられたターゲットにバインドします。
+
{{domxref("WebGLRenderingContext.checkFramebufferStatus()")}}
+
フレームバッファのステータスを返します。
+
{{domxref("WebGLRenderingContext.createFramebuffer()")}}
+
WebGLFrameBuffer オブジェクトを作成します。
+
{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}
+
WebGLFrameBuffer オブジェクトを削除します。
+
{{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}}
+
WebGLRenderingBuffer オブジェクトを WebGLFrameBuffer オブジェクトにアタッチします。
+
{{domxref("WebGLRenderingContext.framebufferTexture2D()")}}
+
テクスチャ画像を WebGLFrameBuffer オブジェクトにアタッチします。
+
{{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}}
+
フレームバッファについての情報を返します。
+
{{domxref("WebGLRenderingContext.isFramebuffer()")}}
+
渡された WebGLFrameBuffer オブジェクトが有効かどうかを表すブール値を返します。
+
{{domxref("WebGLRenderingContext.readPixels()")}}
+
WebGLFrameBuffer からピクセルブロックを読み取ります。
+
+ +

レンダーバッファ

+ +
+
{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}
+
与えられたターゲットに WebGLRenderBuffer オブジェクトをバインドします。
+
{{domxref("WebGLRenderingContext.createRenderbuffer()")}}
+
WebGLRenderBuffer オブジェクトを作成します。
+
{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}
+
WebGLRenderBuffer オブジェクトを削除します。
+
{{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}
+
レンダーバッファについての情報を返します。
+
{{domxref("WebGLRenderingContext.isRenderbuffer()")}}
+
渡された WebGLRenderingBuffer が有効かどうかを表すブール値を返します。
+
{{domxref("WebGLRenderingContext.renderbufferStorage()")}}
+
レンダーバッファデータストアを作成します。
+
+ +

テクスチャ

+ +
+
{{domxref("WebGLRenderingContext.bindTexture()")}}
+
与えられたターゲットに WebGLTexture オブジェクトをバインドします。
+
{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}
+
2Dテクスチャ画像を圧縮フォーマットで指定します。
+
{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}
+
2Dテクスチャ部分画像を圧縮フォーマットで指定します。
+
{{domxref("WebGLRenderingContext.copyTexImage2D()")}}
+
2Dテクスチャ画像をコピーします。
+
{{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}
+
2Dテクスチャ部分画像をコピーします。
+
{{domxref("WebGLRenderingContext.createTexture()")}}
+
WebGLTexture オブジェクトを作成します。
+
{{domxref("WebGLRenderingContext.deleteTexture()")}}
+
WebGLTexture オブジェクトを削除します。
+
{{domxref("WebGLRenderingContext.generateMipmap()")}}
+
WebGLTexture オブジェクトに対してミップマップ集合を生成します。
+
{{domxref("WebGLRenderingContext.getTexParameter()")}}
+
テクスチャに対しての情報を返します。
+
{{domxref("WebGLRenderingContext.isTexture()")}}
+
渡された WebGLTexture が有効かどうかを表すブール値を返します。
+
{{domxref("WebGLRenderingContext.texImage2D()")}}
+
2Dテクスチャ画像を指定します。
+
{{domxref("WebGLRenderingContext.texSubImage2D()")}}
+
現在の WebGLTexture の部分矩形を更新します。
+
{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}
+
テクスチャパラメータをセットします。
+
{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}
+
テクスチャパラメータをセットします。
+
+ +

プログラムとシェーダ

+ +
+
{{domxref("WebGLRenderingContext.attachShader()")}}
+
WebGLShader を WebGLProgram にアタッチします。
+
{{domxref("WebGLRenderingContext.bindAttribLocation()")}}
+
汎用頂点インデックスを名前付き属性変数にバインドします。
+
{{domxref("WebGLRenderingContext.compileShader()")}}
+
WebGLShader をコンパイルします。
+
{{domxref("WebGLRenderingContext.createProgram()")}}
+
WebGLProgram を作成します。
+
{{domxref("WebGLRenderingContext.createShader()")}}
+
WebGLShader を作成します。
+
{{domxref("WebGLRenderingContext.deleteProgram()")}}
+
WebGLProgram を削除します。
+
{{domxref("WebGLRenderingContext.deleteShader()")}}
+
WebGLShader を削除します。
+
{{domxref("WebGLRenderingContext.detachShader()")}}
+
WebGLShader をでタッチします。
+
{{domxref("WebGLRenderingContext.getAttachedShaders()")}}
+
WebGLProgram にアタッチされた WebGLShader オブジェクトのリストを返します。
+
{{domxref("WebGLRenderingContext.getProgramParameter()")}}
+
プログラムについての情報を返します。
+
{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
+
WebGLProgram オブジェクトについての情報ログを返します。
+
{{domxref("WebGLRenderingContext.getShaderParameter()")}}
+
シェーダについての情報を返します。
+
{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}
+
シェーダの数値フォーマットの精度について記述した WebGLShaderPrecisionFormat オブジェクトを返します。
+
{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}
+
WebGLShader についての情報ログを返します。
+
{{domxref("WebGLRenderingContext.getShaderSource()")}}
+
WebGLShader のソースコードを文字列として返します。
+
{{domxref("WebGLRenderingContext.isProgram()")}}
+
渡された WebGLProgram 有効かを表すブール値を返します。
+
{{domxref("WebGLRenderingContext.isShader()")}}
+
渡された WebGLShader 有効かを表すブール値を返します。
+
{{domxref("WebGLRenderingContext.linkProgram()")}}
+
渡された WebGLProgram オブジェクトをリンクします。
+
{{domxref("WebGLRenderingContext.shaderSource()")}}
+
WebGLShader にソースコードをセットします。
+
{{domxref("WebGLRenderingContext.useProgram()")}}
+
指定した WebGLProgram を現在のレンダリングステートの一部として使用します。
+
{{domxref("WebGLRenderingContext.validateProgram()")}}
+
WebGLProgram を検証します。
+
+ +

ユニフォームと属性

+ +
+
{{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}
+
与えられたポジションの頂点属性配列を無効にします。
+
{{domxref("WebGLRenderingContext.enableVertexAttribArray()")}}
+
与えられたポジションの頂点属性配列を有効にします。
+
{{domxref("WebGLRenderingContext.getActiveAttrib()")}}
+
有効な属性変数についての情報を返します。
+
{{domxref("WebGLRenderingContext.getActiveUniform()")}}
+
有効なユニフォーム変数についての情報を返します。
+
{{domxref("WebGLRenderingContext.getAttribLocation()")}}
+
属性変数のロケーションを返します。
+
{{domxref("WebGLRenderingContext.getUniform()")}}
+
与えられたロケーションのユニフォーム変数の値を返します。
+
{{domxref("WebGLRenderingContext.getUniformLocation()")}}
+
ユニフォーム変数のロケーションを返します。
+
{{domxref("WebGLRenderingContext.getVertexAttrib()")}}
+
与えられたポジションの頂点属性についての情報を返します。
+
{{domxref("WebGLRenderingContext.getVertexAttribOffset()")}}
+
与えられた頂点配列のアドレスを返します。
+
{{domxref("WebGLRenderingContext.uniform()", "WebGLRenderingContext.uniform[1234][fi][v]()")}}
+
ユニフォーム変数の値を指定します。
+
{{domxref("WebGLRenderingContext.uniformMatrix()", "WebGLRenderingContext.uniformMatrix[234]fv()")}}
+
ユニフォーム変数の行列を指定します。
+
{{domxref("WebGLRenderingContext.vertexAttrib()", "WebGLRenderingContext.vertexAttrib[1234]f[v]()")}}
+
汎用頂点属性の値を指定します。
+
{{domxref("WebGLRenderingContext.vertexAttribPointer()")}}
+
データフォーマットと頂点属性配列中の頂点属性のロケーションを指定します。
+
+ +

バッファへの書き込み

+ +
+
{{domxref("WebGLRenderingContext.clear()")}}
+
指定されたバッファを既定値でクリアします。
+
{{domxref("WebGLRenderingContext.drawArrays()")}}
+
プリミティブを配列データからレンダリングします。
+
{{domxref("WebGLRenderingContext.drawElements()")}}
+
プリミティブを要素配列データからレンダリングします。
+
{{domxref("WebGLRenderingContext.finish()")}}
+
以前に呼び出されたコマンドが終了するまで処理をブロックします。
+
{{domxref("WebGLRenderingContext.flush()")}}
+
可能な限り速くすべてのコマンドを実行し、バッファコマンドを空にします。
+
+ +

拡張を使用する

+ +

これらのメソッドはWebGL拡張を管理します:

+ +
+
{{domxref("WebGLRenderingContext.getSupportedExtensions()")}}
+
サポートしている全てのWebGL拡張を {{domxref("DOMString")}} の {{jsxref("Array")}} で返します。
+
{{domxref("WebGLRenderingContext.getExtension()")}}
+
拡張オブジェクトを返します。
+
+ +

例

+ +

WebGL コンテキストフィーチャーの検出

+ +

{{page("/ja/Learn/WebGL/By_example/Detect_WebGL", "summary")}}

+ +

{{page("/ja/Learn/WebGL/By_example/Detect_WebGL", "detect-webgl-source")}}

+ +

{{EmbedLiveSample("detect-webgl-source", 660,150 ,"" , "Learn/WebGL/By_example/Detect_WebGL")}}

+ +

WebGLレンダリングにおけるキャンバスサイズの効果

+ +

{{page("/ja/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-intro")}}

+ +

{{page("/ja/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-source")}}

+ +

{{EmbedLiveSample("canvas-size-and-webgl-source", 660,180 ,"" , "Learn/WebGL/By_example/Canvas_size_and_WebGL")}}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('WebGL', "#5.14", "WebGLRenderingContext")}}{{Spec2('WebGL')}}Initial definition
+ +

ブラウザ実装状況

+ + + +

{{Compat("api.WebGLRenderingContext")}}

+ +

See also

+ + 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 +--- +
{{APIRef("WebGL")}}
+ +

WebGL API の WebGLRenderingContext.linkProgram() メソッドは、与えられた {{domxref("WebGLProgram")}} に接続された頂点とフラグメントのシェーダーをリンクします。

+ +

構文

+ +
void gl.linkProgram(program);
+
+ +

引数

+ +
+
program
+
リンクする {{domxref("WebGLProgram")}}。
+
+ +

返り値

+ +

ありません。

+ +

例

+ +
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 new Error('Could not compile WebGL program. \n\n' + info);
+}
+ +

仕様策定状況

+ + + + + + + + + + + + + + + + + + + +
仕様策定状況コメント
{{SpecName('WebGL', "#5.14.9", "linkProgram")}}{{Spec2('WebGL')}}初回定義。
{{SpecName('OpenGL ES 2.0', "glLinkProgram.xml", "glLinkProgram")}}{{Spec2('OpenGL ES 2.0')}}OpenGL API のマニュアルページ。
+ +

ブラウザーの対応

+ + + +

{{Compat("api.WebGLRenderingContext.linkProgram")}}

+ +

関連項目

+ + 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 +--- +
{{APIRef("WebGL")}}
+ +

WebGL API の WebGLRenderingContext.shaderSource() メソッドは、{{domxref("WebGLShader")}} のソースコードを設定します。

+ +

構文

+ +
void gl.shaderSource(shader, source);
+
+ +

引数

+ +
+
shader
+
ソースコードを設定する {{domxref("WebGLShader")}} オブジェクト。
+
source
+
設定する GLSL ソースコードを含む {{domxref("DOMString")}}。
+
+ +

返り値

+ +

ありません。

+ +

例

+ +
var shader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(shader, originalSource);
+
+var source = gl.getShaderSource(shader);
+ +

仕様策定状況

+ + + + + + + + + + + + + + + + + + + +
仕様策定状況コメント
{{SpecName('WebGL', "#5.14.9", "shaderSource")}}{{Spec2('WebGL')}}初回定義。
{{SpecName('OpenGL ES 2.0', "glShaderSource.xml", "glShaderSource")}}{{Spec2('OpenGL ES 2.0')}}OpenGL API (と同様の) マニュアルページ。
+ +

ブラウザーの対応

+ + + +

{{Compat("api.WebGLRenderingContext.shaderSource")}}

+ +

関連項目

+ + 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 +--- +
{{APIRef("WebGL")}}
+ +

WebGL API の WebGLRenderingContext.uniformMatrix[234]fv() メソッドは、行列の値をユニフォームの値に指定します。

+ +

このメソッドの 3 つのバージョン (uniformMatrix2fv(), uniformMatrix3fv(), と uniformMatrix4fv()) は、入力値として 2 要素, 3 要素, 4 要素のベクトルをそれぞれ取ります。

+ +

構文

+ +
WebGLRenderingContext.uniformMatrix2fv(location, transpose, value);
+WebGLRenderingContext.uniformMatrix3fv(location, transpose, value);
+WebGLRenderingContext.uniformMatrix4fv(location, transpose, value);
+
+ +

引数

+ +
+
location
+
変更するユニフォーム属性の位置を含むオブジェクト {{domxref("WebGLUniformLocation")}}。この位置は {{domxref("WebGLRenderingContext.getUniformLocation", "getUniformLocation()")}} を用いて入手されます。
+
transpose
+
行列を転置するかどうか指定する {{domxref("GLboolean")}}。false でなければならない。
+
value
+
+

{{jsxref("Float32Array")}} か GLfloat 値の並び。

+
+
+ +

返り値

+ +

undefined

+ +

例

+ +
gl.uniformMatrix2fv(loc, false, [2,1, 2,2]);
+ +

仕様策定状況

+ + + + + + + + + + + + + + + + + + + +
仕様策定状況コメント
{{SpecName('WebGL', "#5.14.10", "uniformMatrix")}}{{Spec2('WebGL')}}初回定義。
{{SpecName('OpenGL ES 2.0', "glUniform.xml", "glUniform")}}{{Spec2('OpenGL ES 2.0')}}OpenGL API のマニュアルページ。
+ +

ブラウザーの対応

+ + + +

{{Compat("api.WebGLRenderingContext.uniformMatrix2fv")}}

+ +

関連項目

+ + 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 +--- +
{{APIRef("WebGL")}}
+ +

WebGL API の WebGLRenderingContext.useProgram() メソッドは、指定した {{domxref("WebGLProgram")}} を現在の描画ステートの一部として設定します。

+ +

構文

+ +
void gl.useProgram(program);
+
+ +

引数

+ +
+
program
+
使用する {{domxref("WebGLProgram")}}。
+
+ +

返り値

+ +

ありません。

+ +

例

+ +
var program = gl.createProgram();
+
+// Attach pre-existing shaders
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+
+gl.linkProgram(program);
+gl.useProgram(program);
+
+ +

仕様策定状況

+ + + + + + + + + + + + + + + + + + + +
仕様策定状況コメント
{{SpecName('WebGL', "#5.14.9", "useProgram")}}{{Spec2('WebGL')}}初回定義。
{{SpecName('OpenGL ES 2.0', "glUseProgram.xml", "glUseProgram")}}{{Spec2('OpenGL ES 2.0')}}OpenGL API のマニュアルページ。
+ +

ブラウザーの対応

+ + + +

{{Compat("api.WebGLRenderingContext.useProgram")}}

+ +

関連項目

+ + 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 +--- +
{{APIRef("WebGL")}}
+ +

WebGL API の WebGLRenderingContext.vertexAttribPointer() メソッドは、現在 gl.ARRAY_BUFFER に結合されたバッファーを、現在の頂点バッファーオブジェクトの一般的な頂点属性に結合して、そのレイアウトを指定します。

+ +

構文

+ +
void gl.vertexAttribPointer(index, size, type, normalized, stride, offset);
+
+ +

引数

+ +
+
index
+
頂点属性の場所を指定する {{domxref("GLuint")}}。この場所が変更されます。
+
size
+
頂点属性あたりの要素数を指定する {{domxref("GLint")}}。1, 2, 3 か, 4 でなければいけません。
+
type
+
配列の各要素のデータ型を指定する {{domxref("GLenum")}}。以下の値を取ることができます。 +
    +
  • gl.BYTE: 符号付き 8 ビット整数、値は [-128, 127]
    • +
  • gl.SHORT: 符号付き 16 ビット整数、値は [-32768, 32767]
    • +
  • gl.UNSIGNED_BYTE: 符号無し 8 ビット整数、値は [0, 255]
    • +
  • gl.UNSIGNED_SHORT: 符号無し 16 ビット整数、値は [0, 65535]
    • +
  • gl.FLOAT: 32 ビット IEEE 浮動小数点数
    • +
  • {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} を使用している場合、さらに以下の値を取ることができます。 +
      +
    • gl.HALF_FLOAT: 16 ビット IEEE 浮動小数点数
      • +
    +
    • +
+
+
normalized
+
整数データを浮動小数点数へ型変換するとき、厳密な範囲へ正規化するかどうか指定する {{domxref("GLboolean")}}。 +
    +
  • gl.BYTE と gl.SHORT の型では、true の場合に [-1, 1] の値へ正規化されます。
    • +
  • gl.UNSIGNED_BYTE と gl.UNSIGNED_SHORT の型では、true の場合に [0, 1] の値へ正規化されます。
    • +
  • gl.FLOAT と gl.HALF_FLOAT の型では、この引数に効果はありません。
    • +
+
+
stride
+
連続する頂点属性の始端どうしの間にある、オフセット数をバイト単位で指定する {{domxref("GLsizei")}}。255 より大きくできません。stride が 0 の場合、属性はきっちり詰められていると想定されます。すなわち、アトリビュートはインターリーブされておらず、各属性は別れたブロックにあり、現在の頂点属性のすぐ隣に次の頂点属性が続きます。
+
offset
+
頂点属性配列の最初の要素のオフセットをバイト単位で指定する {{domxref("GLintptr")}}。 type のバイト長の倍数でなければいけません。
+
+ +

返り値

+ +

ありません。

+ +

例外

+ + + +

説明

+ +

3D ジオメトリーをレンダリングしたいとしましょう。そのためには頂点シェーダーに頂点を供給する必要があります。各頂点には、位置、法線ベクトル、テクスチャー座標など、 {{jsxref("ArrayBuffer")}} で定義された頂点バッファーオブジェクト (VBO) に提供されるいくつかの属性があります。まず、使用したい {{domxref("WebGLBuffer")}} を gl.ARRAY_BUFFER に結合する必要があります。それから、この gl.vertexAttribPointer() メソッドで、属性が格納されている順序、それらの中のデータ型を指定します。加えて、ストライドを含める必要があります。これは、一つの頂点でのすべての属性の総バイト長です。さらに、 {{domxref("WebGLRenderingContext/enableVertexAttribArray", "gl.enableVertexAttribArray()")}} を呼んで、WebGL にこの属性を配列バッファーの値で埋めるように知らせます。

+ +

大抵は、あなたの 3D ジオメトリーはすでに厳格なバイナリ形式になっているので、メモリーレイアウトを把握するためにはその特定のフォーマットの仕様を読む必要があります。しかし、自分のフォーマットを設計していたり、ジオメトリーがテキストファイル (Wavefront .obj files など) にあって実行時に ArrayBuffer へ変換する必要がある場合、どのようにメモリ構築するかは自由に選択できます。より高いパフォーマンスのためには、属性を インターリーブ してジオメトリを正確に表す最小のデータ型を使用してください。

+ +

頂点属性の最大数はグラフィックカードに依存しており、gl.getParameter(gl.MAX_VERTEX_ATTRIBS) を呼ぶとこの値を取得できます。ハイエンドグラフィックスカードでは、最大値は 16 です。ローエンドグラフィックスカードでは、値は低くなります。

+ +

属性の位置

+ +

各属性には、その位置を指定する必要があります。これは配列バッファー内の場所とは無関係なので、配列バッファーへの格納方法とは異なる順序で送信できます。以下の 2 つの選択肢があります。

+ + + +

整数属性

+ +

ArrayBuffer は整数と浮動小数点数の両方で埋めることができますが、属性は頂点シェーダーに送信されると常に浮動小数点数に変換されます。頂点シェーダーコードで整数を使用する必要がある場合は、頂点シェーダーで ((int) floatNumber のように) 浮動小数点数を整数に型変換し戻すことができます。または、WebGL 2 では{{domxref("WebGL2RenderingContext.vertexAttribIPointer()", "gl.vertexAttribIPointer()")}} を使用できます。

+ +

既定の属性値

+ +

バーテックスシェーダーコードはいくつかの属性を含みますが、各属性の値を指定する必要はありません。代わりに、全ての頂点に同一の既定の値を与えることができます。{{domxref("WebGLRenderingContext.disableVertexAttribArray()", "gl.disableVertexAttribArray()")}} を呼んで WebGL に既定の値を使うように知らせることができます。{{domxref("WebGLRenderingContext.enableVertexAttribArray()", "gl.enableVertexAttribArray()")}} を呼ぶと配列バッファーから値を読み出します。この配列バッファーは gl.vertexAttribPointer() で指定します。

+ +

同様に、例えばバーテックスシェーダーが 4 要素属性の vec4 を予期しているのに gl.vertexAttribPointer() 呼び出しで size を 2 にセットした場合、WebGL は最初の 2 つの要素は配列バッファーを基にセットして、3 番目と 4 番目の値は既定値から取られます。

+ +

既定値は vec4(0.0, 0.0, 0.0, 1.0) ですが、{{domxref("WebGLRenderingContext.vertexAttrib()", "gl.vertexAttrib[1234]f[v]()")}} を呼ぶことで異なる既定値を指定することができます。

+ +

例えば、頂点シェーダーが位置と色の属性を使用しているとします。ほとんどのメッシュは頂点ごとのレベルで指定された色を持っていますが、いくつかのメッシュはユニフォームによるシェーディングです。そういったメッシュでは、各頂点に同じ色を配列バッファに入れる必要はありません。一定の色を設定するのに gl.vertexAttrib4fv() を使用できます。

+ +

現在の設定の問い合わせ

+ +

{{domxref("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} や {{domxref("WebGLRenderingContext.getVertexAttribOffset()", "gl.getVertexAttribOffset()")}} で現在の属性の引数である、データ型や属性が正規化されるかどうかなどを取得できます。これらの WebGL 関数はパフォーマンスが遅いため、JavaScript アプリケーション内に状態を保存するほうがよいでしょう。しかし、これらの関数は、アプリケーションコードに触れることなく WebGL コンテキストをデバッグするのに最適です。

+ +

例

+ +

この例は、頂点属性をシェーダープログラムに送信する方法を示しています。各頂点の属性が 1 頂点あたり 20 バイトの長さでインターリーブされて格納されている架空のデータ構造を使用します。

+ +
    +
  1. position: X, Y と Z 座標を格納する必要があります。高い精度のために、32 ビット浮動小数点数を使用し、これは合計で 12 バイト使用します。
    2. +
  2. normal vector: 法線ベクトルの X, Y と Z 要素を格納する必要がありますが、精度は重要ではないので、8 ビット符号付き整数を使用します。さらなるパフォーマンスのために、データをゼロ値要素で 4 番目まで格納し、32 ビットにアライメントします。総サイズは 4 バイトになります。更に、WebGL に値を正規化するように知らせます。なぜなら法線は常に [-1, 1] の範囲だからです。
    3. +
  3. texture coordinate: U と V の座標を格納する必要があります。これは 16 ビット符号無し整数で十分な精度が得られます。総サイズは 4 バイトになります。更に WebGL に値を [0, 1] に正規化するように知らせます。
    4. +
+ +

例として、以下のような頂点のとき、

+ +
{
+  "position": [1.0, 2.0, 1.5],
+  "normal": [1.0, 0.0, 0.0],
+  "texCoord": [0.5, 0.25]
+}
+
+ +

以下のように配列バッファーに格納されます。

+ + + + + + + + + + + + + + + +
00 00 80 3F00 00 00 4000 00 0C 3F7F0000007F FF3F FF
+ +

配列バッファーの作成

+ +

まず、{{domxref("DataView")}} を用いた JSON データから動的に配列バッファーを作成します。true の用法に注意してください。WebGL は私達のデータがリトルエンディアンであることを予期しています。

+ +
//ジオメトリーを 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);
+}
+ +

より高いパフォーマンスのために、サーバー側で事前に JSON から ArrayBuffer への変換を行うこともできます。以下のように、Node.js でそれらからバイナリファイルをロードし、それを配列バッファーとして解釈することができます。

+ +
const response = await fetch('assets/geometry.bin');
+const buffer = await response.arrayBuffer();
+
+ +

WebGL で配列バッファーを使う

+ +

まず、新しい頂点バッファーオブジェクト (VBO) を作成し、配列バッファーを与えます。

+ +
//配列バッファーを頂点バッファーオブジェクトに結合する
+const vbo = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+gl.bufferData(gl.ARRAY_BUFFER, buffer, gl.STATIC_DRAW);
+
+ +

それから、インデックスを自分で設定することで、配列バッファーのメモリーレイアウトを指定します。

+ +
//バッファーのレイアウトについて記述します
+//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);
+
+ +

あるいは、インデックスを自分で設定する代わりに、グラフィックスカードによって提供されたインデックスを使用することもできます。これはシェーダープログラムの再リンクを避けます。

+ +
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);
+
+ +

仕様策定状況

+ + + + + + + + + + + + + + + + + + + +
仕様策定状況コメント
{{SpecName('WebGL', "#5.14.10", "vertexAttribPointer")}}{{Spec2('WebGL')}}初回定義。
{{SpecName('OpenGL ES 2.0', "glVertexAttribPointer.xml", "glVertexAttribPointer")}}{{Spec2('OpenGL ES 2.0')}}OpenGL API のマニュアルページ。
+ +

ブラウザーの対応

+ + + +

{{Compat("api.WebGLRenderingContext.vertexAttribPointer")}}

+ +

関連項目

+ + -- cgit v1.2.3-54-g00ecf