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
154
155
156
157
158
159
160
161
|
---
title: WebGLRenderingContext.bufferData()
slug: Web/API/WebGLRenderingContext/bufferData
tags:
- API
- WebGL
- WebGLRenderingContext
- 参考
- 方法
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>方法创建并初始化了Buffer对象的数据存储区。</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")}} 指定Buffer绑定点（目标）。可取以下值：
<ul>
<li><code>gl.ARRAY_BUFFER</code>: 包含顶点属性的Buffer，如顶点坐标，纹理坐标数据或顶点颜色数据。</li>
<li><code>gl.ELEMENT_ARRAY_BUFFER</code>: 用于元素索引的Buffer。</li>
<li>当使用 {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} 时，可以使用以下值：
<ul>
<li><code>gl.COPY_READ_BUFFER</code>: 从一个Buffer对象复制到另一个Buffer对象。</li>
<li><code>gl.COPY_WRITE_BUFFER</code>: 从一个Buffer对象复制到另一个Buffer对象。</li>
<li><code>gl.TRANSFORM_FEEDBACK_BUFFER</code>: 用于转换反馈操作的Buffer。</li>
<li><code>gl.UNIFORM_BUFFER</code>: 用于存储统一块的Buffer。</li>
<li><code>gl.PIXEL_PACK_BUFFER</code>: 用于像素转换操作的Buffer。</li>
<li><code>gl.PIXEL_UNPACK_BUFFER</code>: 用于像素转换操作的Buffer。</li>
</ul>
</li>
</ul>
</dd>
<dt>size</dt>
<dd>{{domxref("GLsizeiptr")}} 设定Buffer对象的数据存储区大小。</dd>
<dt>srcData {{optional_inline}}</dt>
<dd>一个{{jsxref("ArrayBuffer")}}，{{jsxref("SharedArrayBuffer")}} 或者 {{domxref("ArrayBufferView")}} 类型的数组对象，将被复制到Buffer的数据存储区。 如果为<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>None.</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> 可取的buffer值：<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>Other buffers: {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li>
</ul>
|
