CODEWITHSUNDEEP
javascriptopengl-eswebgl
user3003873
user3003873

Reputation: 553

WebGL. Is it creating a buffer in GPU?

Looking for a decision about a realtime plotting of rather a large data stream. I would like to process it via a GPU to reduce memory costs.

I have found a WebGL example:

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

And would like to clarify something:

UPDATE: also would like to clarify, if it is possible to update only a part of the gl buffer by index.

Upvotes: 1

Views: 2116

Answers (2)

user128511
user128511

Reputation:

gl.createBuffer and gl.bufferData create buffers for WebGL. Whether those are on the GPU or not is up to the platform and browser. AFAIK All Intel GPUs store vertex data in the same memory as other CPU data. Also some WebGL implementations might store copies of buffers in CPU ram as well so there's really no way to know.

gl.bufferData sets the size of a buffer and puts data in it.

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

You don't want to put data in it pass in a size instead of an 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);

After that you can put data in it a little at a time with gl.bufferSubData. Example

const offset = 100;
gl.bufferSubData(gl.ARRAY_BUFFER, offset, someTypedArray);

someTypedArray is just that, a TypedArray like

const someTypedArray = new Uint8Array(45);

In which case the buffer would have bytes 100 to 144 get updated with the contents of someTypedArray

Or if you want to use a part of an TypedArray then you can make view 

const someTypedArray = new Uint8Array(1024);

...

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

That makes someOtherTypedArray a view into someTypedArray that starts 200 bytes into someTypedArray and is 50 bytes long.

Upvotes: 6

Rafael Emshoff
Rafael Emshoff

Reputation: 2729

A quick google answers this question: http://webglfundamentals.org/webgl/lessons/webgl-how-it-works.html

Buffers are the way of getting vertex and other per vertex data onto the GPU. gl.createBuffer creates a buffer. gl.bindBuffer sets that buffer as the buffer to be worked on. gl.bufferData copies data into the buffer.

gl.Array_buffer is the parameter for the gl.bufferData() method, which copies data into the buffer that was previously created and bound in the GPU.

If it is stable on linux, probably depends on the linux version and release. It also depends on your hardware, if your PC's GPU supports WebGl or not.

Upvotes: 1

Related Questions