At what point is it necessary to generate a new vertex array object when sketching numerous objects?

Question

At what point is it necessary to generate a new vertex array object when sketching numerous objects?

I'm embarking on a game development project using WebGL.

Currently, I have three textures in my arsenal- one for letters used in the font, another for character sprites, and a tilemap texture for the world. With these large textures at hand, I find myself needing to draw small portions of them repeatedly.

What could be the most effective way to go about this task?

My initial strategy involves utilizing a VAO (Vertex Array Object) for each individual element such as letters, map squares, character poses, etc. This would mean managing over 150 VAOs. While I initially believed that VAOs offered simplicity and improved performance, some sources like this and this suggest otherwise.

Another method I am considering is maintaining only three VAOs and adjusting the starting position within the buffer in order to access the necessary letter or element. This approach would involve having fewer but larger VAOs instead of numerous VAOs with smaller arrays. In case this turns out to be the preferred approach, would I need to call gl.vertexAttribPointer() after gl.enablevertexAttribArray() every time I draw something, or simply modify the count parameter in gl.drawArrays()?

Given that gl.getParameter( gl.MAX_TEXTURE_IMAGE_UNITS ) indicates either 16 or 32, dividing the textures into smaller sections doesn't seem viable either.

What would be the most advantageous conceptual method to adopt in this scenario?

javascript vertex-buffer webgl2 vertex-array-object

Answer 1

Answer №1

When it comes to the number of VAOs, the decision is in your hands. There are various tradeoffs to consider. Typically, when dealing with text, a common approach is to place glyphs in a texture atlas and create a buffer containing vertices for all the letters that need to be drawn.

In simpler terms.

for each frame
   for each string
      for each letter in string
         append vertices for letter to buffer

drawArray/drawElements(gl.TRIANGLES, ... totalOfAllLettersInAllStrings * 6);

This means there could potentially be just one draw call for all the letters (such as for a user interface), rather than one draw call per letter, which would be significantly slower.

Check out this article for more information

Your mention of MAX_TEXTURE_IMAGE_UNITS seems like it might be a misunderstanding. Texture Units refer to the maximum number of textures a shader can utilize in a single draw call, not the overall limit of textures available. You can have thousands of textures, but you can only use a certain amount of them in each draw call.

For basic text rendering, typically only one texture per font style is needed. ^{However, if you aim to support the entire Unicode range instead of just ASCII, things can get complex quickly.}

Answer 2

When it comes to the number of VAOs, the decision is in your hands. There are various tradeoffs to consider. Typically, when dealing with text, a common approach is to place glyphs in a texture atlas and create a buffer containing vertices for all the letters that need to be drawn.

In simpler terms.

for each frame
   for each string
      for each letter in string
         append vertices for letter to buffer

drawArray/drawElements(gl.TRIANGLES, ... totalOfAllLettersInAllStrings * 6);

This means there could potentially be just one draw call for all the letters (such as for a user interface), rather than one draw call per letter, which would be significantly slower.

Check out this article for more information

Your mention of MAX_TEXTURE_IMAGE_UNITS seems like it might be a misunderstanding. Texture Units refer to the maximum number of textures a shader can utilize in a single draw call, not the overall limit of textures available. You can have thousands of textures, but you can only use a certain amount of them in each draw call.

For basic text rendering, typically only one texture per font style is needed. ^{However, if you aim to support the entire Unicode range instead of just ASCII, things can get complex quickly.}

At what point is it necessary to generate a new vertex array object when sketching numerous objects?

Answer №1

Similar questions

When using Thunderbird Webextensions, calling .messages.getFull() may result in the Exception 0x80004005 being raised, specifically indicating

Is there a way to implement jquery (or other external libraries) within Typescript?

Node.js: The REST client delivers the response even before it has been officially returned

Validating image dimensions with the data-parsley plugin

What is the best way to access the front camera on both Android and iOS devices in order to capture a photo using Vue.J

Dynamically adjust the gage value

What options are available for managing state in angularjs, similar to Redux?

Troubleshooting error handling in Node.js using Express and MongoDB

Obtain the query response time/duration using react-query

What is the best way to update an array in TypeScript when the elements are of different types and the secondary array has a different type as

Navigate through the DOM to return an image

objects bound to knockout binding effects

Calculating the frequency of a variable within a nested object in an Angular application

Mastering the ng-submit directive for AngularJS

"Mastering the art of data retrieval in ReactJS: A guide to utilizing hooks in functional

What could be causing my JavaScript loop to only display the final value?

What is the best way to retrieve the value of a specific textfield using the map function with a collection of

Error encountered while trying to retrieve Instagram JSON data via request due to an abrupt end of input

Guide to designing a unique shape in JointJs by combining multiple basic shapes together

The flow of browsing the web and executing scripts in a web browser