OpenGL Demos
OpenGL Misc
MSG Board
Megabyte Softworks
C++, OpenGL, Algorithms

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

Download (120 KB)
6121 downloads. 29 comments
2.) First Triangle


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.


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

   // 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);


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)
6121 downloads. 29 comments


Enter the text from image:


Curtisst (kpmd87056@rng.marvsz.com) on 22.04.2017 19:01:22


<a href=http://www.lesfeesbouledeneige.fr/puma-chaussure-2017-femme-gros-lacet-552.html>Puma Chaussure 2017 Femme Gros Lacet</a>
<a href=http://www.graysands.co.uk/nike-janoski-max-navy-722.asp>Nike Janoski Max Navy</a>
<a href=http://www.ideelle.fr/955-asics-gel-lyte-3-blanche-et-noir.html>Asics Gel Lyte 3 Blanche Et Noir</a>
<a href=http://www.imprimerieexpress.fr/puma-suede-femme-porté-640.php>Puma Suede Femme Porté</a>
<a href=http://www.los-granados-apartment.co.uk/430-adidas-superstar-shoes-for-kids.html>Adidas Superstar Shoes For Kids</a>
Curtisst (scmt38105@rng.marvsz.com) on 14.04.2017 13:36:14


<a href=http://www.photo-pele-mele.fr/396-birkenstock-homme-noir-madrid.htm>Birkenstock Homme Noir Madrid</a>
<a href=http://www.institut-beautyboop.fr/escarpins-talons-hauts-carrés-151.php>Escarpins Talons Hauts Carrés</a>
<a href=http://www.lajeannelelivre.fr/381-chaussures-de-foot-patrick.html>Chaussures De Foot Patrick</a>
<a href=http://www.toutoumiaou.fr/585-escarpins-noir-original.html>Escarpins Noir Original</a>
<a href=http://www.presenteisme.fr/401-basket-burberry-femme-solde.php>Basket Burberry Femme Solde</a>
XRumerTest (yourmail@gmail.com) on 01.04.2017 10:59:25
Hello. And Bye.
Richarddync (cxxd60516@rng.marvsz.com) on 31.03.2017 07:33:41


<a href=http://www.lesdroles.fr/287-basket-lacoste-homme-soldes.php>Basket Lacoste Homme Soldes</a>
<a href=http://www.thierryobadia.fr/659-palladium-garcon-solde.html>Palladium Garcon Solde</a>
<a href=http://www.dany-multi-services.fr/186-basket-under-armour-avis.php>Basket Under Armour Avis</a>
<a href=http://www.forge-delours.fr/085-le-coq-sportif-lcs-r800-outdoor.html>Le Coq Sportif Lcs R800 Outdoor</a>
<a href=http://www.lessoinsdemariemassageenergetique.fr/258-hugo-boss-vert-chaussure.php>Hugo Boss Vert Chaussure</a>
Eugenetup (dvvb89378@rng.marvsz.com) on 16.03.2017 23:39:06


<a href=http://www.vba-excel.fr/338-lunette-ray-ban-aviator-degradé>Lunette Ray Ban Aviator Degradé</a>
<a href=http://www.itworks-wrap-france.fr/abercrombie-gilet-bas>Abercrombie Gilet Bas</a>
<a href=http://www.piezography.fr/adidas-tubular-defiant-zalando-971.php>Adidas Tubular Defiant Zalando</a>
<a href=http://www.mag3.fr/chemise-ralph-lauren-femme-solde-733>Chemise Ralph Lauren Femme Solde</a>
<a href=http://www.mag3.fr/polo-ralph-lauren-homme-solde-646>Polo Ralph Lauren Homme Solde</a>
Thomasgerm (wxbc12078@catch@rng.marvsz.com) on 10.03.2017 05:03:53


<a href=http://www.alcius.es/adidas-zx-flux-hombre-761.html>Adidas Zx Flux Hombre</a>
<a href=http://www.ljungkyrkan.nu/727-tenisky-reebok-the-pump-red.htm>Tenisky Reebok The Pump Red</a>
<a href=http://www.teenie-dancer.de/462-nike-lebron-14-low.html>Nike Lebron 14 Low</a>
<a href=http://www.bliv-ergoterapeut.nu/timberland-branco-534.php>Timberland Branco</a>
<a href=http://www.herz-jesu-huellen.de/nike-sb-schuhe-stefan-janoski-404.html>Nike Sb Schuhe Stefan Janoski</a>
Richarddync (nhvo32959@rng.marvsz.com) on 08.03.2017 20:47:42


<a href=http://www.slojdakademin.se/400-puma-suede-classic-dam.php>Puma Suede Classic Dam</a>
<a href=http://www.itcigarrilloelectronico.es/454-adidas-rose.html>Adidas Rose</a>
<a href=http://www.fiashosting.se/reebok-vinterskor-081.php>Reebok Vinterskor</a>
<a href=http://www.vecchiaarena.it/nike-air-max-90-white-536.html>Nike Air Max 90 White</a>
<a href=http://www.kristiinakoskentola.nl/432-nike-huarache-nieuw.html>Nike Huarache Nieuw</a>
Curtisst (ifac57348@rng.marvsz.com) on 01.03.2017 18:02:57


<a href=http://www.jonsvensdesign.se/365-nike-metcon-3-sverige.php>Nike Metcon 3 Sverige</a>
<a href=http://www.pferdebedarf-fuge.de/353-adidas-harden-vol-1.html>Adidas Harden Vol 1</a>
<a href=http://www.zonnigemuziek.nl/305-nike-hyperdunk-08-retro-review.htm>Nike Hyperdunk 08 Retro Review</a>
<a href=http://www.koupelny-hed.cz/new-balance-yellow.aspx>New Balance Yellow</a>
<a href=http://www.teenie-dancer.de/318-nike-dunk-sky-hi-essential.html>Nike Dunk Sky Hi Essential</a>
Curtisst (bsyu10358@rng.marvsz.com) on 27.02.2017 08:47:37


<a href=http://www.elsass-computer.fr/871-adidas-kanye-west.html>Adidas Kanye West</a>
<a href=http://www.mis-printed.se/430-skor-timberland-rea.html>Skor Timberland Rea</a>
<a href=http://www.hollybushwitney.co.uk/710-primeknit-adidas-stan-smith.html>Primeknit Adidas Stan Smith</a>
<a href=http://www.mis-printed.se/901-timberland-boots-outfit.html>Timberland Boots Outfit</a>
<a href=http://www.hollybushwitney.co.uk/359-adidas-sl-loop-runner-black-and-white.html>Adidas Sl Loop Runner Black And White</a>
Thomasgerm (abmh16348@catch@rng.marvsz.com) on 25.02.2017 04:07:14


<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


<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


<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.
Jump to page:
1 2