This tutorial has been reviewed on 12.2.2013, now it's compiled with glew version 1.9.0 and the executable is in bin folder now.Also all function names begin with uppercase letter.

This is the second OpenGL 3.3 (and later) tutorial. Here you can learn how to render a triangle the new way. It also explains what VBOs and VAOs are.

You've probably already heard of it. It's one of the most important thing when it comes to learning new OpenGL (even though they were introduced in OpenGL 1.5, which is pretty old). VBOs are nothing but an arbitrary data stored on GPU Ram, so they can be accessed quickly and thus they speed up rendering. They can be whatever, but it is up to you to tell OpenGL how to interpret them. For example, you can have one VBO that stores vertices, three floats per each vertex, x, y and z coordinates, respectively. Then you can have another VBO, that stores colors of vertices. Another VBO can store texture coordinates and so on. You simply set the vertex attributes with each VBO (and vertex attributes can be really whatever, but generally, you need vertex position, texture coordinates and maybe color of vertex). If you have many VBOs, you can combine them into VAOs (Vertex Array Object), and then you can quickly switch between whole objects (more on VAOs in later tutorials).

The problem with older OpenGL was, that rendering using glBegin() and glEnd() was just creating a bottleneck on CPU, that had to pass every parameter to GPU. But now, we just load data of our object (or our scene) into GPU, tell OpenGL how to interpret them, and then we can finally start rendering. In this example, we render one triangle and one quad (using triangle strips). We won't use colors, they will come in next tutorial, along with shaders. So in initScene, we setup our vertex data (now it is only vertex positions, nothing more), and then we create two VBOs from them:

float fTriangle[9]; // Data to render triangle (3 vertices, each has 3 floats)
float fQuad[12]; // Data to render quad using triangle strips (4 vertices, each has 3 floats)

UINT uiVBO[2];

void initScene(LPVOID lpParam)
{
	glClearColor(0.0f, 0.5f, 1.0f, 1.0f);

	// Setup triangle vertices
	fTriangle[0] = -0.4f; fTriangle[1] = 0.1f; fTriangle[2] = 0.0f;
	fTriangle[3] = 0.4f; fTriangle[4] = 0.1f; fTriangle[5] = 0.0f;
	fTriangle[6] = 0.0f; fTriangle[7] = 0.7f; fTriangle[8] = 0.0f;
 
	// Setup quad vertices
 
	fQuad[0] = -0.2f; fQuad[1] = -0.1f; fQuad[2] = 0.0f;
	fQuad[3] = -0.2f; fQuad[4] = -0.6f; fQuad[5] = 0.0f;
	fQuad[6] = 0.2f; fQuad[7] = -0.1f; fQuad[8] = 0.0f;
	fQuad[9] = 0.2f; fQuad[10] = -0.6f; fQuad[11] = 0.0f;

	// Now we create two VBOs
	glGenBuffers(2, uiVBO);
 
	glBindBuffer(GL_ARRAY_BUFFER, uiVBO[0]);
	glBufferData(GL_ARRAY_BUFFER, 9*sizeof(float), fTriangle, GL_STATIC_DRAW);

	glBindBuffer(GL_ARRAY_BUFFER, uiVBO[1]);
	glBufferData(GL_ARRAY_BUFFER, 12*sizeof(float), fQuad, GL_STATIC_DRAW);
}

OK, let's have a look at important parts. After setting color and initializing vertices data, we call function glGenBuffers. The first parameter is number of VBOs we want (in our case, 2). Second parameter is pointer where to store them (in our case, store it in uiVBO). Now in uiVBO, we have two IDs of buffers. With them we can access and manipulate them. After that, we tell OpenGL that we're gonna work with first buffer (that has name stored in uiVBO[0]) with function glBindBuffer. First parameter is target to which buffer is bound (in out case it is GL_ARRAY_BUFFER, other possible values are for pixel buffer objects for example, more on them in later tutorials). Second parameter is buffer ID. After that we call glBufferData. With that function, we load data into GPU. First parameter is buffer type, then it's number of bytes to be transferred to buffer, third parameter is source of data in client memory and with last parameter we tell OpenGL how is the buffer intended to be used. In our case, we will not change data (they're static), so we set it to GL_STATIC_DRAW. Other possible values are for example GL_DYNAMIC_DRAW, or GL_STREAM_DRAW for example. OpenGL somehow optimizes performance using this hint.

We call these two functions also for our quad. Now we have data set, let's look and analyze rendering function:

void renderScene(LPVOID lpParam)
{
	// Typecast lpParam to COpenGLControl pointer
	COpenGLControl* oglControl = (COpenGLControl*)lpParam;

	// We just clear color
	glClear(GL_COLOR_BUFFER_BIT);

	glEnableVertexAttribArray(0);
	// Triangle render
	glBindBuffer(GL_ARRAY_BUFFER, uiVBO[0]);
	glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, 0);
	glDrawArrays(GL_TRIANGLES, 0, 3);

	// Quad render using triangle strip
	glBindBuffer(GL_ARRAY_BUFFER, uiVBO[1]);
	glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, 0);
	glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

	oglControl->swapBuffers();
}

We are interested in two functions. First is glVertexAttribPointer(). With it, we set attributes of vertices. As I mentioned in previous tutorial, vertices can have multiple attributes, like position, color and so on (in shaders, we can tell OpenGL how to treat attributes). The first parameter is index of vertex attributes. In our case, it's 0 and it will be a vertex position. Since we are not using shaders yet, vertices go through rendering pipeline without any change, and are output with same values as they came in (notice that we don't tell OpenGL that attribute with index 0 is position, but it seems that somehow it's the default behavior that it will treat it as position). So parameters of this functions are in order: index of attribute set (in our case 0), number of components per vertex attribute (in our case it's 3, as one position consists of X, Y and Z values), then there is data type (we have floats, so GL_FLOAT is used), fourth parameter is whether data should be normalized (no, they shouldn't, that's why GL_FALSE), fifth parameter (stride) is byte offset between two attributes (but we have data tightly packed in memory, so it's 0, and in most cases, this parameter will be 0), and the last parameter is a pointer to the first component (we begin where the array starts, so it's 0).

Now we have set up what to render, and we can call glDrawArrays to actually render something. First parameter is render mode (ol' good GL_TRIANGLES, GL_TRIANGLE_STRIP, GL_LINES... but some have been deprecated, like GL_QUADS, now you cannot render quads this way, you must replace it with for example triangle strips). Second parameter is starting index (again, we want to render all data, in our case send down 3 vertices, so it's 0). Third is number of indices to be rendered (and in our case one index consists of 3 floats [X,Y,Z] position, as we told it with glVertexAttribPointer). We call the same set of functions for quad as well (and we render it using GL_TRIANGLE_STRIP, if you don't know how triangle strips work, it can be found anywhere on Internet). And hurray, the result:

It's been reported that some cards draw only blank blue screen. That's because of different implementations of OpenGL on them probably. I tested this tutorial on ATI Radeon HD 5870 (triangles were drawn), GTX 550 (triangles were drawn) and GTX 220 (nothing was drawn, only blue screen). Problem is that we're not using shaders and not telling OpenGL how to treat incoming data. Some implementations treat them as vertices, and some don't know what to do with them, so they rather do nothing. If this doesn't work for you, move on to third tutorial with shaders, and all later tutorials should work (learn just important stuff from here).

So that's it for today. Hope this tutorial helped you a little. In next tutorial, we will start using shaders and will add colors to our triangle and quad, to make the scene nicer.