この記事は翻訳作業中です。

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

返り値

ありません。

例外

  • 与えられた size でデータストアを作成できない場合、gl.OUT_OF_MEMORY エラーをスローします。
  • size が負数の場合、gl.INVALID_VALUE エラーをスローします。
  • target や usage が許可された列挙のものでない場合、gl.INVALID_ENUM エラーをスローします。

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

バッファー情報の取得

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

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

仕様策定状況

仕様 策定状況 コメント
WebGL 1.0
bufferData の定義
勧告 初回定義。
OpenGL ES 2.0
glBufferData の定義
標準 OpenGL API のマニュアルページ。
OpenGL ES 3.0
glBufferData の定義
標準 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.

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 9Edge 完全対応 12Firefox 完全対応 4IE 完全対応 11Opera 完全対応 12Safari 完全対応 5.1WebView Android 完全対応 ありChrome Android 完全対応 25Edge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 12Safari iOS 完全対応 8.1Samsung Internet Android 完全対応 あり
WebGL2Chrome 完全対応 56Edge 未対応 なしFirefox 完全対応 51IE 未対応 なしOpera 完全対応 43Safari 未対応 なしWebView Android 完全対応 58Chrome Android 完全対応 58Edge Mobile 未対応 なしFirefox Android 完全対応 51Opera Android 完全対応 43Safari iOS 未対応 なしSamsung Internet Android 完全対応 7.0

凡例

完全対応  
完全対応
未対応  
未対応

関連項目

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, MikuroXina
最終更新者: mdnwebdocs-bot,