NewsForumsCodeLogsGallerySpecsSearch

Quick OpenGL Vertex Array Tutorial

BlitzMax Forums/BlitzMax Tutorials/Quick OpenGL Vertex Array Tutorial

Leiden(Posted 2007) [#1]
Vertex Arrays are a great way of improving performance in OpenGL applications. By using them you minimise the amount of OpenGL calls necessary to draw an object.

Here is the full code to the tutorial. I'm not really one to comment in my code, I'll leave the commenting to the tutorial.



For users already comfortable with the basics of OpenGL the above code should be fairly familiar. The only additional functions used in place of the usual glBegin/glEnd pair are:

glEnableClientState
glVertexPointer
glColorPointer
glDrawArrays
glDisableClientState

Now lets go into a little depth regarding the gl[Whatever]Pointer. Basically OpenGL gives you 6 different pointers when using glDrawArrays/Elements.

The most commonly used would be glVertexPointer. In my tutorial I am using glVertexPointer and glColorPointer. Documentation for these functions can be found here: http://www.opengl.org/documentation

Lets get back to the code. I will explain what is happening in each step of the code.

GLGraphics 800, 600

The GLGraphics is just initializing an OpenGL context for us. Simple enuf right?

Global Vertices:Float[] = [0.0, 1.0, -10.0, -1.0, -1.0, -10.0, 1.0, -1.0, -10.0]
Global Colors:Float[] = [1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0]

The Vertice and Color arrays are just your standard BlitzMax arrays filled with some vertex co-ords, and some color values respectively. There are a total of 9 values in each array, since we are using GL_TRIANGLES later in the code this would equate to a 3 vertex polygon.

glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluPerspective(45.0, 1.3333, 1, 1000)
glMatrixMode(GL_MODELVIEW)
glLoadIdentity()

The block of code between glMatrixMode() and glLoadIdentity() is just your standard OpenGL view setup. All its doing is setting up proper view perspective and our near/far clipping planes. If you are familiar with OpenGL then you should already understand whats happening.

glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT)

Now here's where it gets to the fun part. The first function in this loop simply clears the color buffer and the depth buffer to our desired color (which we have not set, but can be set with glClearColor)

glEnableClientState(GL_VERTEX_ARRAY)
glEnableClientState(GL_COLOR_ARRAY)

Here we are telling OpenGL to enable certain states required for rendering using Vertex Arrays. Since we are using glVertexPointer and glColorPointer we will need to enable these states in OpenGL to be able to use them. If you are also using glNormalPointer/glIndexPointer etc you will need to enable those states also.

glColorPointer(3, GL_FLOAT, 0, Colors)
glVertexPointer(3, GL_FLOAT, 0, Vertices)

Now it gets really fun. Our first function glColorPointer takes 4 parameters. First is the number of co-ords per vertex. In our case we have 3. Seccond is the type of co-ords. We are using Float Arrays so we will set this to GL_FLOAT. The third is stride, our co-ords are tightly packed into their arrays so we set this to 0. Last is the pointer to our Array. The seccond function glVertexPointer esentially takes the same information as the first. You can find more information about the parameters in the OpenGL documentation.

glDrawArrays(GL_TRIANGLES, 0, 3)

Now we render our triangle to the screen. The first parameter is mode. Remember glBegin()? Well its the same constant. In our case, GL_TRIANGLES. Seccond is the starting index. We want to start at 0. Last is the number of indices to be rendered. Since we have only enough data in our arrays for 3, that's what we'll set it too. It is possible to set this number larger than what our arrays contain, but its probably not advisable.

glDisableClientState(GL_VERTEX_ARRAY)
glDisableClientState(GL_COLOR_ARRAY)

Lastly we disable our client states we set earlier and let OpenGL continue to do whatever. We then Flip our Backbuffer to the Front and gaze in wonder at our beautiful multicolored triangle.

Have a play around with the code, add more co-ords to the arrays, change the colors, primitive modes etc. The best way to learn is to experiment :)

Challenge: See if you can Render a square instead of a triangle.

Have Fun :)

Stuck on the challenge? Here's what the code should look like:




Jesse(Posted 2007) [#2]
Thanks for the Tutorial.
It has helped me to understand some of the basics.
I hope you can make the time to make more like so.
thank you.