Tutorials
Articles
OpenGL Demos
Games
OpenGL Misc
MSG Board
About
Donate
Links
Home
Megabyte Softworks
C++, OpenGL, Algorithms




Current series: OpenGL 3.3
(Return to list of OpenGL 3.3 tutorials)

Download (120 KB)
5962 downloads. 20 comments
2.) First Triangle

Changelog

7.3.2013 - Now compiled with glew version 1.9.0 and the executable is in bin folder now. Also all function names begin with uppercase letter.

</Changelog>

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.

- Vertex Buffer Object (VBO):

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:

Edit on 21.01.2012

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.



Download (120 KB)
5962 downloads. 20 comments
 
Name:

E-mail:
(Optional)
Entry:

Enter the text from image:



Smileys




Thomasgerm (abmh16348@catch@rng.marvsz.com) on 25.02.2017 04:07:14
asegxwx

http://www.leserlichundhoerich.de/nike-air-max-1-grauweiß-orange-370.php
http://www.12deliver.nl/696-saucony-guide-10-review.php
http://www.baby-tshirt.nl/ralph-lauren-polo-pet-sale.html
http://www.gasthofbahra.de/ray-ban-sonnenbrille-mit-sehstärke-damen-914.html
http://www.hannover-cms.de/795-abercrombie--fitch-parka-damen

<a href=http://www.o-ton-frankfurt.de/adidas-herrenschuhe-2016-052.html>Adidas Herrenschuhe 2016</a>
<a href=http://www.leserlichundhoerich.de/nike-air-max-1-ultra-new-york-für-damen-273.php>Nike Air Max 1 Ultra New York Für Damen</a>
<a href=http://www.ausbildung-in-pflegeberufen.de/nike-huarache-snipes-900.html>Nike Huarache Snipes</a>
<a href=http://www.hipcatclub.de/vans-sk8-hi-blau-337.htm>Vans Sk8 Hi Blau</a>
<a href=http://www.gasthofbahra.de/ray-ban-schwarz-türkis-558.html>Ray Ban Schwarz Türkis</a>
Richarddync (rzyy65740@rng.marvsz.com) on 24.02.2017 00:33:45
zfexvgh

http://www.mis-printed.se/005-timberland-svarta.html
http://www.freiberufler-netzwerk.de/779-adidas-zx-700.php
http://www.alcius.es/adidas-zapatillas-mujer-neo-005.html
http://www.jonsvensdesign.se/613-nike-hypervenom.php
http://www.vecchiaarena.it/nike-air-jordan-4-816.html

<a href=http://www.itcigarrilloelectronico.es/423-adidas-zapatillas-duramo-nova-2.html>Adidas Zapatillas Duramo Nova 2</a>
<a href=http://www.laluna-rouen.fr/653-nike-2017-femme-grise.html>Nike 2017 Femme Grise</a>
<a href=http://www.pferdebedarf-fuge.de/785-kobe-2-adidas-yellow.html>Kobe 2 Adidas Yellow</a>
<a href=http://www.c-p-c.fr/432-adidas-tubular-doom-blanche.htm>Adidas Tubular Doom Blanche</a>
<a href=http://www.super8-ilfilm.it/755-adidas-primeknit>Adidas Primeknit</a>
Richarddync (vhvo44515@rng.marvsz.com) on 23.02.2017 16:40:40
ttiqpxm

http://www.cdoviaplata.es/zapatos-mbt-para-mujeres-086.html
http://www.rcaraumo.es/nike-cortez-en-ebay-241.html
http://www.sanjuandelamata.es/420-nike-roshe-aliexpress-youtube.html
http://www.adidasnmdcomprar.nu/adidas-nmd-5-901
http://www.younes.es/273-nike-air-force-tumblr-boy

<a href=http://www.younes.es/778-nike-huarache-2016-baseball>Nike Huarache 2016 Baseball</a>
<a href=http://www.luismesacastilla.es/396-nike-roshe-flyknit-red.php>Nike Roshe Flyknit Red</a>
<a href=http://www.rcaraumo.es/nike-roshe-baratas-madrid-931.html>Nike Roshe Baratas Madrid</a>
<a href=http://www.el-codigo-promocional.es/966-reebok-zapatos-azules.aspx>Reebok Zapatos Azules</a>
<a href=http://www.rcaraumo.es/nike-shox-2016-615.html>Nike Shox 2016</a>
HunsGellylola (hunsgelly2017@mail.ru) on 14.01.2017 20:34:39
Adderall Ambien Identifier Xanax And Adderall . Mix Percocet And Adderall Phentermine Tour De France Adderall Does Adderall Help With Depression Taking Klonopin And Adderall Emsam Adderall Generalized Anxiety Disorder Adderall Vs Strattera . Generic Adderall Xr Adderall High Cholesterol Cheapest Diflucan Over The Counter Adderall <a href=http://www.netvibes.com/stratteraonline>order adderall online</a>. Amaryl Adderall Adderall And Selegiline Together Flagyl With Adderall Side Effects md weight loss medication adderall .
keeseecycle (maclaurinvu@hotmail.com) on 12.01.2017 08:16:38
<a href="http://www.tiffanycooutlets.us.com">tiffany and co jewelry</a> countless the them. across still shoes hours there, you shoes worst made overall you your <a href="http://www.tiffanyjewelrysoutlet.us.com">tiffany jewelry outlet</a> types mind health own. bones a some is very absolutely authentic wish for evolved display gray. features heel stay toes <a href="http://www.retrojordans.us.com">air jordan shoes</a> foot.These when names. the no outfit during they a Hooked Pediped They he/she it pair . http://www.scarpeshogan-outlet.it
Carlos (car-bdlc-1214@hotmail.es) on 20.09.2015 17:59:09
It's been reported that some cards draw only blank blue screen. That's because Z = 0.0f. Change it to 0.1f
tomhere (869761299@qq.com) on 17.09.2015 12:01:25
thank u first. i can see the no results except the blue screen, do u know why?
tomhere (869761299@qq.com) on 17.09.2015 12:00:05
thank u first. i can see the results except the blue screen, do u know why?
Evgeniy (sherbakov_eugene@mail.ru) on 19.03.2013 21:49:27
How to use VBO (without VAO) with shaders on Nvidia cards. On ATI/AMD card its OK
Even if i add shaders on the program nothing is changing.
Please help.


Peter Petrov [PeterSvP] (petersvp@gmail.com) on 15.01.2013 14:20:16
Shaders are REQUIRED on Shader Model 4.0 based GPUs! Expected blue screen here, on nVidia 8800 GTs.
hanst99 on 20.04.2012 23:25:12
You should mention that you need to delete buffers after use.
Paulo Filho (pcf.feat@gmail.com) on 24.10.2013 14:45:09
May I ask why?
SomeGuy on 25.10.2013 23:57:28
It's a mandatory cleanup, like deleting dynamic objects or reseting pointers to null
for example: glDeleteBuffers(1, vertexbuffer)
Paulo Filho (pcf.feat@gmail.com) on 26.10.2013 16:29:50
Oh, like deallocating pointers in C++? Cool to know, I actually didn't think about managing GPU in that sense.
Colin (cooldudes202@gmail.com) on 24.02.2012 09:16:22
Thank you for the tutorial. Been working on some graphic assignments and all we were told were to not use immediate mode. I think your the first tutorial to actually explain the what why and how to use of Vertex Buffers.

Sincerely, "Another Raging College Student"

p.s. Do you have a tutorial on how to reuse as much code as possible while being able to work with the variety of opengl versions?
Michal Bubnar (michalbb1@gmail.com) on 15.03.2012 11:57:44
Replying after almost a month I read that comment, then put to TODO list to reply it, and then I forgot

No, I don't have such tutorial, but I can't exactly imagine how to use OpenGL code across OpenGL versions <= 2.1, and OpenGL versions >= 3.3, since they are completely different concepts. But if I were to create some super-class that would wrap both old and new functionalities, I would probably try to create some VBO rendering to fixed rendering converting class.

Probably not much help, but it's not a trivial task to do this.
hanst99 on 21.04.2012 00:40:18
You can use VBO's in OpenGL 2 though. Intermediate mode just wasn't deprecated there yet.
_aspx_ on 12.02.2012 15:33:37
Just for info: I see just a blue window too, on Intel HD3000
Nice on 19.01.2012 13:29:26
I see only light blue screen (videocard NVIDIA).
Michal Bubnar (michalbb1@gmail.com) on 20.01.2012 11:49:55
Yeah, you're right - it seems that it's card dependant whether this code works - for me it works at home, but in my workplace, it does not. Thank you for reporting that, today I should upload new tutorial, and I will repair this one as well.
Jump to page:
1