Modern OpenGL 3.0+ [GETTING STARTED] Tutorial 1 - Drawing A Triangle

⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. I've been using Kite for 6 months and I love it! www.kite.com/get-kite/?...
Source Code: github.com/SonarSystems/Moder...
Based on the following tutorials:
open.gl/
learnopengl.com/
learnopengl.com/#!Getting-star...
Like our content and want to support us more directly? Help Us, Help You! www.paypal.com/cgi-bin/webscr...
If you like this stuff, as always, show the love through comments, likes, favorites, subscriptions, etc.
Thousands of free videos at
www.sonarlearning.co.uk
If you have any questions feel free to post them at
www.sonarlearning.co.uk/questi...
Our Website
www.sonarsystems.co.uk/
Facebook - / 581403125243822
Twitter - / sonarsystems
Google+ - plus.google.com/+Sonarsystems...
Donate - www.paypal.com/cgi-bin/webscr...
Our games made using Cocos2d-x
------------------------------------------------------
iOS: itunes.apple.com/us/artist/so...
Google Play: play.google.com/store/apps/de...
Check out our Cocos2d-x book to learn how to make games www.packtpub.com/game-develop...

[@TitanGamePlay94]

You are the reason I passed my forth year in college. your cocos2dx videos are a God send.

[@SonarSystemsCoUk]

This comment made me smile, thank you.

[@zhuzhuqing4862]

OMG, you saved my life. I finally found something can work on Mac. OMGOMGOMG, u r a lifesaver!

[@MieysoFelix]

I'm coding this in SFML and C++ (of course) but i couldn't do anything with it in OpenGL and usually i'm a SFML-Pro yk... But after this Video it finally worked i tried out so many tutorials but this one was the ONE! Thank you so much!

[@user-tz5bz4cz9q]

Thank's SonarSystems! Nice video!

[@SonarSystemsCoUk]

Our pleasure! Any questions feel free to post on Discord discord.gg/Qn4tSPD

[@robertnelson6577]

I really like the openGl tuts!!! Thanks man. Looking forward to the other tuts.

[@SonarSystemsCoUk]

Great to hear. If you have any questions feel free to post them on sonarlearning.co.uk

[@ExoContinuum]

Awesome series. I learn everything so much better when it's done procedural like this before it's broken up into proper c++ OO structure. Thanks!

[@SonarSystemsCoUk]

Your very welcome :D

[@edjmanic]

KUDOS! This series is a definite hit!

[@SonarSystemsCoUk]

We hope so :D Spread the word my friend.

[@misterSelly]

YES NEW SONAR OPENGL SERIES

[@SonarSystemsCoUk]

:D Just finished recording a shader files video.

[@misterSelly]

Just like Titan and Friends, one of your series helped me get my head around some pieces of code for class. Keep doing what you do!

[@SonarSystemsCoUk]

ChrisAndJoly Will do. If you ever have any questions any in the future feel free to post them on our education platform sonarlearning.co.uk.

[@marcstephens462]

Totally fun! Any good reason why I get a beautiful white triangle (even when I vary the line:) "color = vec4( 1.0f, 0.5f, 0.2f, 1.0f ); " I know it should not matter but I'm on Windows.

[@adrulb]

I like this tutorial so far. Even though I'm using C# and not C++ it is pretty easy to follow, because I only have to change the code a little bit to make it work. I didn't encounter any problems so far and managed to draw a triangle on the screen!

[@SonarSystemsCoUk]

Awesome to hear this video helped you, really nice to hear.

[@toshii2198]

Hey, is it possible to create multiple cpp files in the same project, each compiling and running separately

[@goldwin838]

Very nice videos. I have also learned a lot from your courses at Udemy.

[@SonarSystemsCoUk]

Great to hear. If you have any questions feel free to post them on our education platform sonarlearning.co.uk

[@walkerdev7566]

this is helping me with my game engine i just need to lern modern opengl im getting use to it a lil more

[@SonarSystemsCoUk]

Awesome, I am actually doing a daily live game engine programming series kzbin.info/aero/PLRtjMdoYXLf5kR3srVgN8sezlMpo57cx- Any questions feel free to post on Discord discord.gg/Qn4tSPD or sonarlearning.co.uk/

[@kirienitram]

Do yourself a favor and put on 2.0 speed. Don't take me wrong it's a great tutorial!

[@SonarSystemsCoUk]

I did go a bit slow TBF LOL

[@irenelangeveldt5620]

do you have any videos that explain what the various codes in opengl do and mean or can u recommend smthing

[@SonarSystemsCoUk]

Which codes?

[@jimcoles5697]

Great vid by the way. I have two issues though. I have no triangle but no errors!! I probably missed typed something along the way. Any thoughts on what it could be. I kinda wish I had an error to help me Thanks

[@SonarSystemsCoUk]

Have you tried the code form the github page? Any questions feel free to post on Discord discord.gg/Qn4tSPD

[@bonbonpony]

How does OpenGL know which output of the fragment shader is the color? (I don't have to name it `color` after all, right?)

[@SonarSystemsCoUk]

Nope

[@raf.nogueira]

Understanding the basics of how modern Opengl works, and finished computer science course is possible to find a job in game programming industry ? especialy graphics ?

[@SonarSystemsCoUk]

Yes it is.

[@bonbonpony]

How is it that you _use_ the `window` pointer in `glfwGetFramebufferSize` BEFORE you checked if the pointer is actually not null? What if it _is_ null? Then the call to `glfwGetFramebufferSize` would query the size of a nonexistent window :q Wouldn't it end up with a crash? :P Shouldn't it be checked first that the window (and its associated framebuffer) exists at all before querying its dimensions?

[@bonbonpony]

If you can post template replies like these, you could as well reply here, if you weren't trying so hard to shill your website :P Thanks, but no thanks. I'll rather go somewhere else. Besides, my question was rather rhetorical anyway, more to point out the error than ask why it's been made, becaue judging by your tutorials and your other answers I can tell you don't really have a clue either, you're just copying code from other people's tutorials (they had the same exact error).

[@laureanosamuelolmoromero5756]

that dude is just a plain idiot, i thought it from the first second.. his momma must have dropped him or something..

[@walkervr5691]

Hey So the triangle worked and im not new to coding all tho im lerning c++ and opengl the triangle showed up but my shaders werent compiled now what could cause this?

[@SonarSystemsCoUk]

Any errors? Any questions feel free to post on Discord discord.gg/Qn4tSPD

[@walkervr5691]

@@SonarSystemsCoUk thank you for sending this but i have already fixed it great video

[@Khal3d00Multimedia]

What's the different between this OpenGL series and the previous one you've made? Thanks anyway though ;)

[@SonarSystemsCoUk]

Hello, The other tutorial used the old OpenGL method which is deprecated and removed. This is the new way of doing things by storing data on the GPU. I hope this helped answer your question. If you have anymore queries feel free to post them on our education platform sonarlearning.co.uk

[@simyhsu9910]

hello～What does "layout (location = 0)" mean? Why we need this in vertex shader source? Could u explain it to me? thanx~

[@SonarSystemsCoUk]

Setting it's position allows us to easily refer to it by that position in the opengl code in C++.

[@simyhsu9910]

oh yes, thank you very much~

[@bonbonpony]

Position in WHAT? What do you mean by "refer"? There's still a lot of unknowns.

[@SonarSystemsCoUk]

???

[@sravankaruturi]

I'm getting an error compiling the Shaders. Error::Shader::Vertex::CompilationFailed ERROR: 0:5: Use of undeclared identifier 'gl_position' Any idea why? A couple of solutions in stackoverflow didn't work.

[@SonarSystemsCoUk]

Please post your shader code so I can take a look, you can post the shader code on our education platform sonarlearning.co.uk

[@sravankaruturi]

It is working now. I used tutorials for Open.gl Thanks for responding.

[@editmergedx6541]

gl_Position, not gl_position

[@martinfultot]

Help, I'm getting the background rendered but not the triangle. No runtime errors .

[@martinfultot]

Solved, I had forgotten to modify a line that I copypasted from glAttachShader. This is AWESOME !

[@SonarSystemsCoUk]

Great to hear you solved it. That feeling you get when you solve it yourself, it's amazing :D If you have anymore questions feel free to post them on our education platform sonarlearning.co.uk

[@TheVolticIdiot]

Is this the same for SDL? Plus i'm glad i've found these tutorials

[@SonarSystemsCoUk]

Yes, only the setup process is different which is covered in a separate video.

[@tomgu5158]

Hi, I'm following your opengl tutorial, but i had a problem which is After running the opengl program, the window doesn't display properly, I need to drag the window to display properly. Have you had this problem before? I'm using mac

[@SonarSystemsCoUk]

Are you referring to the position of the window or something else?

[@tomgu5158]

Sonar Systems Yeah, after I run the c++ program, the graphics in the window will have some offset, I have to drag the window move a little bit then the offset will be cleared

[@SonarSystemsCoUk]

Can you show me a video of the problem.

[@tomgu5158]

sure, i uploaded it in this link:vimeo.com/284582551

[@SonarSystemsCoUk]

This will be solved in a later video.

[@animeshtimsina3660]

I am basically a newbie . This video wrecks the hell out of me! Can you please suggest some pdfs or tutorial videos from the scratch that will explain all the terms and syntaxes. I have learnt C and C++ fully and all I want is to learn OpenGL from the beginning so that I can build some basic games like car racing or so (2D).

[@SonarSystemsCoUk]

These links will help: www.opengl-tutorial.org/beginners-tutorials/ open.gl/ www.cs.cmu.edu/afs/cs/academic/class/15462-s09/www/lec/02/lec02a.pdf duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Chapter-1:-The-Graphics-Pipeline.html

[@amberb9701]

I know this is a bit late but if you are making 2D games I recommend starting with a 2D graphics library such as SDL or SFML.

[@CodeRedsGames]

The problem I had with the tutorials on the linked websites was that they never told you where to put the code bricks they gave you. Sure there is always a sourcecode reference at the end of each page but I think you can learn much more efficient if you get the hint where to put something and don't need to search the whole code.

[@SonarSystemsCoUk]

:D

[@dogdogdogdogdog2546]

Ikr that is why i came here, cus i got confused where to put the code. Thx to Sonar Systems, i now know

[@kirillbalandin2897]

Why do you don`t use file stream for shaders?

[@SonarSystemsCoUk]

No particular reason, that is defo an option as well

[@bonbonpony]

It would introduce another level of complexity, making it more difficult for beginners to understand the key conepts.

[@Gernatch]

Didn't know shaders were so full of code. That's insane. Made me want to get out a marker and some colored pencils...

[@SonarSystemsCoUk]

LOL

[@_daniel.w]

glBindBuffer(GL_ARRAY_BUFFER, VBO); glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW); I just clicked a random selection of code and it was this. If I'm right, this is a guess... Does this selection of code get all the vertices and get ready to draw the shape?

[@SonarSystemsCoUk]

Yes

[@_daniel.w]

:)

[@slap_my_hand]

Why do i still get a white triangle when the shader compilation fails?

[@SonarSystemsCoUk]

Do you get any errors or warnings in the console?

[@slap_my_hand]

I got an error and i could fix it. I'm just wondering why it still renders a white triangle when the shader didn't get compiled.

[@SonarSystemsCoUk]

What was the error though, this will help me explain why it still partially worked.

[@slap_my_hand]

I forgot to add the line "out vec4 color;" in the fragment shader. I just tried replicating the error and i get the same result every time, even when i don't specify any shader code at all. The type of error doesn't matter. btw, i'm running windows 10 and i have an AMD GPU. Driver version: 17.4.4

[@SonarSystemsCoUk]

Is it working now?

[@SinKiatta]

What libraries do i need for shaders?

[@SonarSystemsCoUk]

Have you watched the setup videos?

[@SinKiatta]

@@SonarSystemsCoUk Yeah i have glm, GLFW, GLEW AND GLAD installed

[@SonarSystemsCoUk]

@@SinKiatta You don't need GLAD if you have the others, which videos did you watch?

[@SinKiatta]

@@SonarSystemsCoUk i watched a whole bunch each using different ones which is probably why i installed so many. If i use your source code i can only make a white triangle

[@SonarSystemsCoUk]

@@SinKiatta Keep following the tutorials in this series and it will show you everything needed,

[@widherayoza5825]

how to make it 3d, i try to input number in z but not change anything

[@SonarSystemsCoUk]

3D is covered in a later tutorial, first we cover the basics which will form the skills required for 3D?

[@widherayoza5825]

okay thnks for ur response. nice chanel btw :D

[@SonarSystemsCoUk]

Your welcome and thank you. If you have anymore questions feel free to post them on our education platform sonarlearning.co.uk

[@bonbonpony]

Your screen is 2D anyway, so any 3D is just an illusion made by drawing the triangles in a certain way ;) Like the buildings drawn in a sheet of paper with perspective - they may look 3D, but they're still 2D. So the trick is to draw the triangles in perspective, and they will look like 3D. There are many ways of doing that - you can either set the position of their vertices in perspective yourself, or use OpenGL's vertex shaders to transform 3D positions of vertices to a flat 2D image with perspective, calculating where should they go on a flat projection. The usual way of calculating that is to begin with a set of points defined in 3D space, represented as vectors that point from the origin to these vertices, and then multiply them through a _projection matrix_ that would calculate their corresponding positions in a 2D plane. The way it does it is by checking its distance from the screen in that virtual 3D space, and the farther it is from the screen, the smaller and closer together their positions should be. Then it squishes all their Z coordinates to the screen, so that they're now 2D.

[@ubuntulearndev2938]

What about EBO's? Element Buffer Objects

[@SonarSystemsCoUk]

What about them?

[@ubuntulearndev2938]

In the learnopengl.com they come before the textures and i think they are pretty useful to know early on. But great tutorial anyways!

[@SonarSystemsCoUk]

OK.

[@ubuntulearndev2938]

lol

[@SonarSystemsCoUk]

:D

[@MrLimetto]

Is there a special reason why you write "if ( nullptr == window )" instead of "if ( window == nullptr )" ?

[@SonarSystemsCoUk]

It's called a Yoda Condition. Helps prevent accidental assignment. Check this out for more information en.wikipedia.org/wiki/Yoda_conditions

[@MrLimetto]

Alright thanks :)

[@SonarSystemsCoUk]

Vector , Your welcome bro. If you have anymore questions feel free to post them on our education platform sonarlearning.co.uk

[@bonbonpony]

When you use crappy language that sets traps on you with as simple stuff as comparisons, you need crappy workarounds to avoid those traps :q

[@legendarygamer7886]

OMG 172 lines for a triangle

[@SonarSystemsCoUk]

Tell me about it.

[@legendarygamer7886]

Sonar Systems you know a Engine based on OpenGL?

[@SonarSystemsCoUk]

Here is a comprehensive list of game engines en.wikipedia.org/wiki/List_of_game_engines

[@wal10er]

The most known, the idTech 6 engine use OpenGL 4.x api.

[@wal10er]

Hey man in Win32 with Directx/Direct3d you need many more lines than that.

[@cboyslim5490]

"getting started tutorial 1" what where did all that code at the beginning come from? how is this tutorial 1?

[@KallMeChris]

I dont have any errors, my triangle is not loading went back and watched the video over and made sure i had everything and still its wont show up :(

[@KallMeChris]

I fixed it, Im happy that i found my errors :)

[@FunnyFailFrenzy]

Same issue! What did you do to fix it?

[@KallMeChris]

inside the gl char method the gl_position = vec4 (position.x, position.y, position.z, 1.0 ); I had forgotten to put a comma after the position.z and when i did i rand my code again and the triangle showed up :)

[@FunnyFailFrenzy]

Awesome! Thank you!!!

[@KallMeChris]

ManWithGod no problem :)

[@gage2560]

is this beginner friendly ?

[@SonarSystemsCoUk]

Yes it is, you just need to have C++ experience. I have a course on C++ as well www.sonarlearning.co.uk/coursepage.php?topic=desktop&course=cplusplus

[@marcstephens462]

Please disregard my previous comment. I found a typo in the two lines above! Color triangles now. Woot!

[@SonarSystemsCoUk]

:D Great to hear. If you have anymore questions feel free to post them on our education platform sonarlearning.co.uk

[@whitedeath9]

I'm getting a white triangle, even after copying the entire code from git. I'm on windows.

[@whitedeath9]

Also getting the VERTEX, FRAGMENT and PROGRAM errors that we asked it to output. Along with ERROR: 0:2: 'location' : syntax error parse error

[@SonarSystemsCoUk]

Print the shaders to the console and see what output you get.

[@whitedeath9]

Solved it, had to remove the "layout (location = 0)" bit. Also forgot to compile the fragment shader. I'm currently on projections and coordinate systems - great tutorials man :)

[@SonarSystemsCoUk]

Good to hear you solved it. If you have anymore questions feel free to post them on our education platform sonarlearning.co.uk

[@elgunlee]

Video version of learnopengl.com . Your codes are very similar to that site's code, even error reporting string are exactly same :) lol

[@bonbonpony]

A usual tutorial food chain ;) Some company makes an API and writes a documentation for it, then some other dude makes it simpler by writing a tutorial, and then other dudes use that tutorial to learn that stuff themselves and they write their own tutorials, then others learn from their tutorials and write their own, and so on... Then eventually KZbin videos start to appear, and copies of those videos, and copies of copies... (and the same with books). The farther from the original source of knowledge, the crappier it usually is, as one might expect from a food chain :q so it's usually better to learn from the sources, unless the sources are crappy to begin with (Garbage In, Garbage Out) :q Then our only hope is in good teachers who understand the subject thoroughly and have the talent of making things simpler for their students. There's not many of them, so they should be valued as gems in the rough.

[@TheVolticIdiot]

okay nevermind i got it to work but my triangle is black

[@SonarSystemsCoUk]

Lets see your code

[@TheVolticIdiot]

I managed to fix it. I was using namespace std; Didn't realise it would mess it up. Thank you for the quick reply though!

[@SonarSystemsCoUk]

No problem. Guessing there was a class with the same name in std

[@bonbonpony]

This is not a _tutorial_ , it's just a copy-pastorial from another tutorial, because it lacks any explanations of what's being done and why. Dude just basically types the code in and repeats it aloud. If anyone wants to learn anything form that, then they're out of luck, and I would rather recommend go somewhere else.

[@henrivanlaere4780]

I feel like I’m coding the matrix

[@SonarSystemsCoUk]

Same :D

[@jacobsieckman3455]

Excellent job with the video and setup instructions. Very helpful. At this address -- github.com/SonarSystems/Modern-OpenGL-Tutorials/blob/master/%5BGETTING%20STARTED%5D/%5B2%5D%20Shaders/main.cpp#L66 -- lines 66 and 67 do not match what you have in your .cpp in this video. On line 66 it should read as follows: -0.5f, -0.5f, 0.0f, However, at the address above it reads as follows: 0.5f, -0.5f, 0.0f, The triangle does not appear when it is 0.5f, -0.5f, 0.0f Also, line 67 reads as follows: 0.5f, -0.5f, 0.0f It should be the following: -0.5f, 0.5f, 0.0f Thank you for your videos. Keep them comin'!

[@LiberatedMind1]

Homie you ain't heard of R string literals?

[@SonarSystemsCoUk]

:D

[@CallMeMantou]

I think you should have just drawn the triangle here and spent less time with the shaders. Couldn't you have split this into two tutorials?

[@SonarSystemsCoUk]

That is a good suggestion. It is something we will take on board for future videos.

[@CJBurkey]

You have to have the shaders to see the triangle (on most systems). You wouldn't know if you'd screwed something up or not until next video.

[@cunijoeme]

i turned off at "lienux"

[@SonarSystemsCoUk]

LOL

[@furciorifa]

I bought this tutorial in Udemy, the worst mistake, no theory, no good explanation, just copy paste :(

[@SonarSystemsCoUk]

.

[@jagadeeshakanihal]

It's weird that you put spaces in the paranthesis, There is clear coding style rules that says not to do it. infosoure.blogspot.in/2011/12/linux-kernel-indent-rule.html -nprs, --no-space-after-parentheses Do not put a space after every '(' and before every ')'. See STATEMENTS.