1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
---
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>{{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>
|
