WebGL。它是否在 GPU 中创建缓冲区?

use*_*873 1 javascript opengl-es webgl

寻找关于实时绘制相当大的数据流的决定。我想通过 GPU 处理它以降低内存成本。

我找到了一个 WebGL 示例:

// Fill the buffer with the values that define a triangle.
function setGeometry(gl) {
  gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([
             0, -100,
           150,  125,
          -175,  100]),
      gl.STATIC_DRAW);
}
Run Code Online (Sandbox Code Playgroud)

并想澄清一些事情:

  • gl.ARRAY_BUFFER 是否在 GPU 内创建缓冲区,而不是在 RAM 内?

  • WebGL 在 Linux 上稳定吗?


更新:还想澄清一下,是否可以通过索引仅更新 gl 缓冲区的一部分。

gma*_*man 6

gl.createBuffergl.bufferData为 WebGL 创建缓冲区。这些是否在 GPU 上取决于平台和浏览器。AFAIK 所有英特尔 GPU 都将顶点数据与其他 CPU 数据存储在同一内存中。此外,一些 WebGL 实现也可能在 CPU ram 中存储缓冲区的副本,因此真的无法知道。

gl.bufferData 设置缓冲区的大小并将数据放入其中。

// create buffer
const buf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf);

// set it's size to size of data and copy data into it
const data = new Uint8Array([1, 2, 3, 4, 5]);
gl.bufferData(g.ARRAY_BUFFER, data, gl.STATIC_DATA);
Run Code Online (Sandbox Code Playgroud)

您不想将数据放入其中传递大小而不是 TypedArray

// create buffer
const buf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf);

// set it's size to 1024 bytes
gl.bufferData(g.ARRAY_BUFFER, 1024, gl.STATIC_DATA);
Run Code Online (Sandbox Code Playgroud)

之后,您可以使用gl.bufferSubData. 例子

const offset = 100;
gl.bufferSubData(gl.ARRAY_BUFFER, offset, someTypedArray);
Run Code Online (Sandbox Code Playgroud)

someTypedArray就是这样,一个TypedArray就像

const someTypedArray = new Uint8Array(45);
Run Code Online (Sandbox Code Playgroud)

在这种情况下,缓冲区将使用以下内容更新字节 100 到 144 someTypedArray

或者,如果您想使用 TypedArray 的一部分,那么您可以查看

const someTypedArray = new Uint8Array(1024);

...

const bufferOffset = 200;
cconstonst bufferLength = 50;
var someOtherTypedArray = new Uint8Array(
       someTypedArray.buffer, 
       someTypedArray.byteOffset + bufferOffset,
       bufferLength);
Run Code Online (Sandbox Code Playgroud)

这使得someOtherTypedArray视图someTypedArray从 200 个字节开始someTypedArray,长度为 50 个字节。