How to display a loading bar (2021)

Related to this 2002 thread:

I’m also trying to make a progress bar using OpenGL/GLEW/GLFW/GLUT. I didn’t get your logic can u explain that. or maybe share a full code to get the idea. And how to make progress bar animation using OpenGL?

Hello !

Well it depends on what you’re loading. I’m not an expert on these libraries, but if it’s images and that this task is done OUTSIDE of the rendering (which should be the case, loading from the hard drive is usually performed by the CPU) then the way I usually go around it is to load the images in a different thread, so that they may be loaded while the main visual program is still running in parallel.

You may then, on your loading thread, keep track of the fact that the program is currently loading something and the loading progress amount (by any metric you see fit, the quantity of data loaded, or the number of images if there are a certain number of them…) and then the rendering program could check in this thread if loading is currently happening, in which case a “loading bar” is displayed with the advancement specified in the other thread.

If multi threading is not an option, it may also be possible to load a few images at each frame, not so much that it lags, but this solution seems pretty ugly haha.

This is only architectural and I’ll leave it to someone who knows more about these library help you with the specifics !

Hope it helped a bit :slight_smile:

The “logic” is the you don’t respond to a key press by loading all of the textures. You respond by creating a data structure which records which textures are to be loaded and the progress of each texture. Each frame, you check whether there are any textures which need to be loaded but haven’t been, and perform some portion of the loading process for one texture. Depending upon the library used for loading images, you might be able to load it in chunks (e.g. rows or tiles) or you might have to load it in one go. For the latter, load the image on one frame, call glTexImage2D with the loaded data for level 0 on the next frame, generate the next mipmap level and call glTexImage2D for that on the following frame, repeat until you’ve loaded one image. Then start loading the next image on the following frame. The smaller the chunks, the more smoothly the loading process will run.

A progress bar is typically just a filled rectangle where the position of the right-most vertices varies according to the proportion of the loading process which has completed.

Ideally, you’d use separate threads for loading the image data, but if you’re asking how to implement a loading bar I’m going to guess that you don’t have any experience with multi-threaded programming, and it isn’t something you want to try learning if you barely know how to program.

Thanks for your help, it’s helped.
I make the perfectly specific (red) color progress bar but, I don’t know how to display increasing percentage in-display parallelly. how to display percentage using glew or glfw.

The simplest solution is probably to use a graphics program to create an image containing the characters 0-9 and %, then use that to texture rectangles.

If you want more flexible text facilities, use the FreeType library to render characters, then use those to generate a texture.