Adding vertices to a vertex buffer that has already been initialized in WebGL

Question

Adding vertices to a vertex buffer that has already been initialized in WebGL

My journey into learning WebGL has led me to initialize a vertex buffer with data that is designated for gl.STATIC_DRAW. According to the documentation on MDN, gl.STATIC_DRAW is typically used when the vertex data remains constant throughout the application, as explained here:

The contents are intended to be specified once by the application, and used many times as the source for WebGL drawing and image specification commands.

The code snippet I currently have for initializing the vertex buffer is as follows:

const vertices = new Float32Array([
  -1.0, 1.0,   -1.0, -1.0,   1.0, 1.0,   1.0, -1.0
]);
const n = 4;

const vertexBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

const aPosition = gl.getAttribLocation(program, 'aPosition');

gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aPosition);

However, I now have a need to modify the contents of this buffer by adding new vertex coordinates without the need to reinitialize the entire buffer. This led me to consider using gl.DYNAMIC_DRAW for more flexibility, as described in the MDN documentation:

The contents are intended to be respecified repeatedly by the application, and used many times as the source for WebGL drawing and image specification commands.

My dilemma now is how to incorporate this change in usage into my current workflow, specifically in providing new vertices to the existing buffer and triggering a redraw. I haven't come across any examples demonstrating this process.

Your insights and guidance on this matter would be greatly appreciated. Thank you.

javascript graphics webgl

Answer 1

Answer №1

There are 2 choices available to you

You can utilize the gl.bufferData function and input your new data

By doing this, the buffer will be reallocated and your data will be copied in
Alternatively, you can use the gl.bufferSubData function which allows you to copy data to a specific section of the buffer.

In this scenario, you would first execute gl.bufferData to allocate the buffer, and then use gl.bufferSubData to update the data. If you need to handle varying amounts of data, you can adjust by passing a different count to gl.drawArrays or utilizing different indices with gl.drawElements, etc...

For example:
```
const maxSizeInBytes = 100;
const buf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
// create a buffer with 100 bytes
gl.bufferData(gl.ARRAY_BUFFER, maxSizeInBytes, gl.DYNAMIC_DRAW);
```
Later on
```
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
const data = new Float32Array([123, 456, 789]);
const offsetInBytes = 20;
// update bytes 20 to 31 of the buffer
gl.bufferSubData(gl.ARRAY_BUFFER, offsetInBytes, data);
```

It's important to note that the value specified at the end of gl.bufferData is merely a hint. The driver may or may not act upon that hint in a meaningful way.

Furthermore, it is worth mentioning that the most common scenario involves buffer data remaining unchanged. Instead, separate buffers are often created for each object you wish to render, such as "tree", "house", "person", "triangle", "square", "circle", "star", and then the buffers are switched to render different items.

I'm not suggesting that updating buffer contents is discouraged. I simply wanted to convey that in WebGL, many applications do not frequently modify buffer contents. In fact, for most objects rendered, buffer updates are often the exception rather than the rule.

PS: You may find these tutorials to be useful.

Answer 2

There are 2 choices available to you

You can utilize the gl.bufferData function and input your new data

By doing this, the buffer will be reallocated and your data will be copied in
Alternatively, you can use the gl.bufferSubData function which allows you to copy data to a specific section of the buffer.

In this scenario, you would first execute gl.bufferData to allocate the buffer, and then use gl.bufferSubData to update the data. If you need to handle varying amounts of data, you can adjust by passing a different count to gl.drawArrays or utilizing different indices with gl.drawElements, etc...

For example:
```
const maxSizeInBytes = 100;
const buf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
// create a buffer with 100 bytes
gl.bufferData(gl.ARRAY_BUFFER, maxSizeInBytes, gl.DYNAMIC_DRAW);
```
Later on
```
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
const data = new Float32Array([123, 456, 789]);
const offsetInBytes = 20;
// update bytes 20 to 31 of the buffer
gl.bufferSubData(gl.ARRAY_BUFFER, offsetInBytes, data);
```

It's important to note that the value specified at the end of gl.bufferData is merely a hint. The driver may or may not act upon that hint in a meaningful way.

Furthermore, it is worth mentioning that the most common scenario involves buffer data remaining unchanged. Instead, separate buffers are often created for each object you wish to render, such as "tree", "house", "person", "triangle", "square", "circle", "star", and then the buffers are switched to render different items.

I'm not suggesting that updating buffer contents is discouraged. I simply wanted to convey that in WebGL, many applications do not frequently modify buffer contents. In fact, for most objects rendered, buffer updates are often the exception rather than the rule.

PS: You may find these tutorials to be useful.

Adding vertices to a vertex buffer that has already been initialized in WebGL

Answer №1

Similar questions

What is the best way to define a variable within a function?

Developing a tool for switching between languages in an internationalization application

What is the best way to transform a JSON object from a remote source into an Array using JavaScript?

How to ensure an object is consistently rendered above all others using Three.js

Passing input parameters from a jQuery dialogue box to a handler file (.ashx) in ASP.NET: A step-by-step guide

What sets apart a React component from a function-as-component in React?

Exploring the intricacies of logic through the interactive features of .hover and .click in tandem with Raphael

How can we customize HTML images without allowing third-party JavaScript to enlarge them?

Is it possible for the ajax url option to accept an array of URLs rather than just one?

The privateroute is throwing an error because it cannot access the property state since

What could be the reason for the absence of 'server' and 'client'?

block the UI when a certain amount of time has passed

Is it feasible to maintain a variable as a reference across views while utilizing ng-view?

Is it possible to verify the versions of node and npm prior to running an npm install command?

What steps should be taken to make mocha utilize the HTTP response?

"Resolving the issue of Django request.FILE returning a null value

React components can be used to dynamically render and display an array of objects through methods like reduce and

Transforming an unordered list to function similarly to a select input

What could be causing my resize event to not trigger?

What is the rationale behind allowing any type in TypeScript, even though it can make it more challenging to detect errors during compile time?