graphics - 关于webgl中glBufferData第二个参数的疑问

Question

我一直在阅读著名的 webgl 教程 https://webgl2fundamentals.org/webgl并学习如何使用 bufferData 将数据放入缓冲区。本教程以这样的形式广泛使用bufferData

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);


此处的第二个参数是我们要发送到 GPU 缓冲区的实际数组或数据。然而，我今天遇到了 API 的这种新用法。

gl.bufferData(gl.ARRAY_BUFFER, 8*maxNumVertices, gl.STATIC_DRAW);


这里第二个参数表示缓冲区的大小。

所以我对此感到困惑。我在 MDN https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bufferData 上查看了这个 API它说

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

这是否意味着对于 webgl1.0，我们可以将实际的数据数组或缓冲区的大小作为第二个参数传递给 API。然而对于 WebGL2.0 我们只能将实际的数据数组传递给 API？

这个我还不是很清楚。请帮忙。

Answer 1

WebGL2 添加到 WebGL1 api，因此 WebGL2 有 4 个版本的 gl.bufferData，其中 3 个来自 WebGL1，还有一个新版本。

他们是

按大小设置

void gl.bufferData(target, size, usage); 

设置无类型ArrayBuffer

void gl.bufferData(target, ArrayBuffer? srcData, usage); 

使用 ArrayBufferView 设置，例如 Uint8Array、Float32Array 和其他数组缓冲区 View 类型。

void gl.bufferData(target, ArrayBufferView srcData, usage);

设置一个带有偏移量和长度的ArrayBufferView

// WebGL2: 
void gl.bufferData(target, ArrayBufferView srcData, usage, srcOffset, length);

最后一个可以说是为 WebAssembly 添加的。问题是，如果您有很大的 ArrayBufferView 并且只想上传一部分，您必须在覆盖要上传的部分的同一缓冲区上创建一个新的 ArrayBufferView。尽管在相同的 ArrayBuffer 上的 ArrayBufferView 相对便宜，但仍然有一个 View 分配，最终将不得不进行垃圾收集。添加新版本的 gl.bufferData 可消除该问题。您不必为了上传 ArrayBuffer 的一部分而创建临时 ArrayBufferView。