Vertex Attributes and Layouts in OpenGL

Patreon ► / thecherno
Twitter ► / thecherno
Instagram ► / thecherno
Discord ► thecherno.com/discord
Series Playlist ► thecherno.com/opengl
Thank you to the following Patreon supporters:
- Samuel Egger
- Dominic Pace
- Kevin Gregory Agwaze
- Sébastien Bervoets
- Tobias Humig
Gear I use:
-----------------
BEST laptop for programming! ► geni.us/pakTES
My FAVOURITE keyboard for programming! ► geni.us/zNhB
FAVOURITE monitors for programming! ► geni.us/Ig6KBq
MAIN Camera ► geni.us/t6xyDRO
MAIN Lens ► geni.us/xGoDWT
Second Camera ► geni.us/CYUQ
Microphone ► geni.us/wqO6g7K

[@bgzdevtips3762]

I think what separates cherno vids from others on KZbin are his more in depth explanations of how things actually work at a low level. Sometimes other tutorials try and keep things so high level that, in the end, u really never truly grasp the concepts. Very well done.

[@JasonEwton]

I agree with you, but feel a simple click on a thumbs up isn't enough and that society is losing the complex interactions of actual social interaction... so here's a click and a comment. :D

[@vertigo6982]

Its why I love watching Jason Turner's videos.. he breaks down the machine cold to see what the registers are doing in the various compilers used in production to examine optimization and compiler warnings. (like Cherno does)

[@PixelThorn]

@@vertigo6982 what's his channel?

[@AkhilNairjedi18]

@Abigail Jones Whaaat? Chili is amazing and definitely not hard to listen to.

[@anullptr7496]

Jason Ewton I agree with you.

[@MellowWater]

17mins to explain a function, I have not seen anyone go so in-depth before. You're amazing at teaching.

[@arkemal]

That man is a legend!

[@resantic2256]

17:24 When you realize you typed 2 lines of code for the last 17 minutes lmaoo

[@rcookie5128]

so true.. but that's programming in a nutshell I would say haha.. understanding what the 2 lines do and how they affect the outcome of the programm is the essential key part; even though simply writing or copy pasting the 2 lines would be so much faster.

[@n4rzul]

Programming is 90% problem solving and only about 10% typey-typey.

[@piyushphodu]

Well, i spent money on Udemy for 2 courses [Ben Cook and there was one was by Frahaan Hussain]. Both of them are nowhere as compared to Cherno. They just write and write code for 30 min and explain very little. Ultimately i gave up on their course and now i am using this tutorial and God it is a life saver.

[@mrmastaofdesasta6994]

Cherno: "Now if we had a Shader, we'd be able to see our Triangle." Me: *randomly compiles the program... Giant Triangle on screen. ... Now I'm confused...

[@2001herne]

I guess that OpenGL has some sort of default shader - flat, and useless, but something that is put there to avoid crashes.

[@anonymousgaming911]

@@2001herne no. OpenGL does NOT have a default shader. If you see a triangle on your screen , that means that your graphics drivers have a default shader just for debugging

[@beachforestmountain4269]

@@anonymousgaming911 Cheers

[@ViktorWingqvist]

I think it is undefined behaviour, so you'd get different result on a different machine

[@djukicdev]

@@ViktorWingqvist Yeah, depending on your GPU and its graphics driver.

[@WookieTekkit]

I think the hand motions in the first few seconds tell us why he knows so much about this..... he's really a wizard. I mean, look at the hair.

[@thefallenfool]

Literally came here to comment, is he casting a learning spell on us?

[@yolopolo5783]

I have also started using the same hand motions while explaining others. and people started understanding more about want i am saying. It a jutsu.

[@vertigo6982]

The hands move around the code of the Matrix.

[@xriccardo1831]

I'm italian and we do that a lot xD

[@chendadon7168]

I would prefer sizeof(position[0]) instead of sizeof(float), because if you are changing the type to double for example, it will not affect this functions.

[@bobdagamer640]

You would need to change the GL_FLOAT parameter anyway. You could possibly use some kind of data structure to store it though

[@rylanjohnson9049]

@@bobdagamer640 it still would be two changes which could add up if you have a lot of code

[@DiffyMC]

Love ur tutorials! You actually teach the concepts and explain everything, instead of just telling the viewer to write this and write that like others do. Not only does this show that you are a great teacher, but also that you actually know what you're talking about

[@user-eh7hy2xn3w]

I would suggest using some kind of drawing application because I would imagine it would probably be easier for viewers to see what you are talking about

[@PratikAnand]

The layout could have really used some illustrations

[@daginganinja4075]

4:15 *long tangent about semantics involving referring to vertices as positions* "...anyway so we have these three vertices..."

[@punktdotcom]

8:40 You explained this SO GOOD! It clearly shows your expertise and deep understanding in all of this. Thank you so much for the videos!

[@Ngserdna]

Hey Cherno! I discovered your videos a loooooong time ago, and I am really happy to see that you have continued to do what you love!

[@viniciusmachado4422]

The depth of your explanation is amazing o/

[@anicsr]

Much love for this series and for you

[@markeyboi6545]

The triangle rendered for me, even without the shader :).

[@prezadent1]

Are you using an Nvidia card?

[@markeyboi6545]

Yes, a GTX 1060 (6GB edition).

[@cloudboysmusic5223]

Same

[@DanielLiljeberg]

Same here

[@mallock8529]

The superiority of NVIDIA proven yet again.

[@TheMonyarm]

I'm loving this series, i'm currently following it on linux with CLion.

[@willecode7062]

same here :D

[@DagreenApple]

i m too late, opengl 2 Xcode on mac :o

[@kasufert]

@@DagreenApple Currently following along with VSCODE on windows, but I am using SFML instead of GLFW

[@IDontWannaSayMyName1995]

Oh my god, stride and pointer JUST clicked for me after months of trying this. Oh my god I'm so excited haha, you are the BEST Cherno!

[@vishwasmane4]

The Cherno.. This is the best, clearly and simply explained tutorial about the Vertex Attributes and Buffer layout required for modern OpenGL. Thank You!!

[@raghavsrivastava2910]

Mind-blowing video as always. Get to learn in so much much much much detail.

[@a1r592]

Great explanation, especially with the stride and pointer parameters from the glVertexAttribPointer function. I was able to understand it quickly, even without visualization. I can imagine some people would need more visualization though. But overall it was very helpful!

[@Brahvim]

I spent 4 hours writing notes in my code to better understand (and remember) what was taught in this _almost_ 19 minute video. Nowhere could I have gotten SO much knowledge! Thank you; Yan, ":D!

[@markelishaev617]

Phenomenal explanation about the vertex attributes. Was struggling with them

[@johanrojassoderman5590]

Very effective and clear in-depth explanations. Watching this I feel like any other attempt at entering OpenGL would have left me so confused that I might not have had the energy to continue. Now however, I feel like I am grounded and on the right track with no concepts or functions (so far) leaving me clueless to their workings or implementations.

[@enderger5308]

9:09 - stride is basically just sizeof(vertex), which I know from encoding it in the Rust type system where Bytemuck is used to just get the plain bytes of any input type (currently, arrays of 2 f32s) as packed raw data. Makes it so much easier than having to compute it yourself.

[@arkemal]

Thanks so much for all these explanations. It's very helpful!

[@GeorgeTsiros]

Generally, vertex means 'point'. It can be the point of an intersection, an extremum of a function, a node in a graph, etcetcetc. The entity named 'vertex' in the context of opengl is just an ordered list of values (ie 1,2,3 is different to 2,3,1 ). It may represent anything, *but* it can *always* represent a point in n-dimensional space where n is the count of values in that vertex. It's probably also a vector, but considering they (might?) not inherently have the properties of vectors, I would avoid calling them as such. It is likely that the name 'vertex' was chosen instead of 'vector' exactly for this reason.

[@philtype-r810]

On the Point Information. Thank you very much! *subscribed*

[@Enanelloor12]

Hey Cherno, your explanations are simply awesome. I would like learn D-bus communication from you. can you make a video on that or please suggest some online stuffs.

[@laurentiubistrian6372]

Thank you very much for this explanation! :D

[@hidayatrzayev6603]

Man, you have a serious power of boiling down complex concepts into something very simple and on top of that explaining it in simple words to a person who has absolutely zero clue about graphics programming. This is amazing!

[@tickletickle8561]

Damn, Yan explains stuff even better than my paid Udemy course (at least till this point), this vid came out at the time where I haven't realized my passion for coding and still does incredible job at the time it is needed. Thanks the Cherno !!!

[@lupinedreamexpress]

I can see so plainly how OpenGL became very useful for hardware accelerated data processing. Passing data through vertex buffers, telling OpenGL what that data is by defining its attributes, enabling those attributes...then using a shader to process that buffer on the GPU, with a backbuffer as the output area. Say I wanted to perform some really complicated math that's slow on my CPU... I can send the data to be processed through my GPU's OpenGL implimenetation over a buffer, to a shader that I wrote, and it would come back to the GPU's backbuffer, and I could read my results from the backbuffer. The trick sort of voids OpenGL's intended use to display graphics, to blit raw data using a shader. This reminds me very much of what nvidia's CUDA does, and helps me to see why it works so cleanly with OpenGL. You get control over everything. Which is really really useful to make OpenGL do stuff it really wasn't intended to do, like perform physics or finish your calculus homework fast. :^)

[@altermetax]

How great is this series? All other OpenGL tutorials I followed didn't explain so well.

[@karanjathoul8895]

Brilliant. Thankyou.

[@supertonyxd]

Thank you so much!

[@cybisz2883]

Your videos are absolutely fantastic. Have you ever thought about making courses for Pluralsight?

[@user-vc2pm5xv7s]

In Houdini, a vertex can contain any attribute you throw at it, like position, normal, tangent, color, ID, size, group, and many custom ones you give it.

[@aprithul]

I'd like to add that if you are on Mac you can't create your openGL context with compatibility profile, you have to use the core profile. And if you do that, the code will cause a GL_INVALID_OPERATION error. You will find this error if you poll it using the glGetError() function. To resolve that you also need a vertex array object and you need to bind it as well. A simple example would be the following after you bind your vertex buffer (found this snippet on stackoverflow) : GLuint vao; glGenVertexArrays(1, &vao); glBindVertexArray(vao);

[@tek1234]

Best videos ! Thank you

[@ImRiz1]

Bruh, U deserve Nobel in teaching...

[@samarthtandale9121]

You are Awesome !!!

[@10monthspregnant]

You forgot to build and render the triangle to the screen! That's the best part!

[@bdinh3130]

This video really cleared a lot of things up for me. I am a little unsure of why Vertex Array Objects (VAOs) are used now though. In a lot of tutorials attributes are split up in to their own VBO which gave me a big misconception of how memory is handled and works. I was under the assumption that each attribute (color, normal, etc.) had to be in their own VBO. After watching this video I can only assume that VAOs are used when you want to draw multiple objects in a scene that have their own VBOs. If this is wrong please correct my understanding.

[@ninjamonkey4135]

Just curious as to the second call to glBindBuffers() underneath the glVertexAttribPointer call. I remember you typing it to explain that the binding of the vertex array tells the call to glDrawArrays where to look for data to draw but idk why it was left in there a second time. I read the page on it in gl.docs and understand it frees the buffer memory when calling it with 0, but I just don't understand it's placement. Anyway I know this comment is quite late but you have such a good teaching style and I love your Programming videos. Thanks a ton for this awesome resource!

[@Theawesomeking4444]

for some reason when i debug from visual studio it just opens a white window and doesnt work but when i run it from the exe file it works?

[@SeamusTW]

Check your configurations, see if it is on release or debug

[@soiyodkamal1040]

I really like that dark black guitar in the background. I wonder which guitar is that

[@aqua123670]

This is so clear and concise, thank you so much

[@dudeperforming4188]

Nice one keep it

[@Killerkraft975]

Great video. Although I did have to make notes to visualize what you were explaining, maybe include a diagram of the structure of the vertices and a vertex and then the explanation of the parameters of glVertexAttribpointer may be easier for others to understand.

[@azizas9366]

BTW: Why do you have the line of code on line 44? You already bounded the buffer and stored data in it. Or Are you freeing the buffer?

[@MattJohno2]

How the hell did you make the like button glow when you pointed to it? Genius!

[@yolopolo5783]

I used attrib pointer location 1 in place of 0 and it didn't worked. Why? ( is it because attrib pointer 0 is empty? )

[@frednginger44]

Excellent explanation! Very hard to interpret what’s going on using just the OpenGL documentation.

[@jeypav1961]

Hi i have a quick question regarding your code. You said to select or “bind” the buffer you created you must use the glBindBuffer() function and pass in your buffer id variable. You wrote: glBindBuffer(GL_ARRAY_BUFFER, buffer); But later you wrote: glBindBuffer(GL_ARRAY_BUFFER, 0); And I want to know why you wrote 0? I printed out the buffer variable into my console when i run the application and it return 1. So i am a bit confused as to why you put 0 there. Furthermore, when i compile and run the code after i added the vertex attributes, I saw the triangle and that confuses me even more because i followed what you wrote in your code. Thanks anyways!

[@IndellableHatesHandles]

I've used OpenGL in many forms, from PyOpenGL to OpenTK to LWJGL, but there's just something magical about the original thing.

[@TheBrianRuss]

I'm sure my 3 weeks of openGL helps, but finally I now understand stride and offset lol.

[@slipperywitcher3724]

Other programming videos: 3 separate translation units each having classes and methods. Cherno videos: 2 lines of code in 19 minutes /s

[@ynsam]

I am new xcode user. I am not getting automatic opengl function definitions as when I am typing as Cherno is getting in his visual studio. How can I enable them? I am do getting glew functions. My builds and running and I am able to generate triangle as I have Nvidia graphics. Any help here?

[@donsaad]

13:20 how did you make Visual Assist show the complete parameter list instead of the macro? anyone knows?

[@insideouteyes5572]

Awesome

[@ruben7420]

So fun fact if you run it like it is at the end of the video it actually already render a white triangle :)

[@yuansizhu6271]

if you are using iOS GLKit based on OpenGL ES, use GLKBaseEffect so that you dont have to write shaders to see the triangle.

[@loctite417]

How did you get your function autocomplete to show up at 12:51? Mine does not show that

[@9Blurke9]

Why is my triangle rendered even though it is unbounded? It says glBindBuffer(GL_ARRAY_BUFFER, 0). You said that by unbinding it, it would not be rendered.

[@ayushbhardwas]

Am I missing something or that second call to glBindBuffer occurred magically where you are binding it to some buffer having 0 as its id. What is that?

[@abacaabaca8131]

@14:33 how about if we want to specify other vertex's attribute like color, can we just insert the color into the array mixed together with other vertex's attribute like position and texture coordinate ,and normal in one single float array? Later when we have the buffer in the GPU, we can read the buffer by using glvertexattribpointer() ?🎉😢

[@vertigo6982]

05:30 how did you box select that? Normally the selection will carry over to the beginning of the next line highlighting the values to the left as well.. Is that a Vi keybind?

[@huseyindinc1931]

Hold Ctrl+Alt while pressing the up or down arrow keys to add cursors and hold Shift while pressing left or right arrow keys to select.

[@vertigo6982]

Ctrl+Alt just brings up a little window to the upper right of the screen with the option to switch to the different project tabs, but from your reply I figured out I just hold Alt while pressing up and down and Shift for left and right so thanks!

[@vishal1635]

Vertigo Studios, use Alt+Shift and drag from the top left corner to the bottom right.@@vertigo6982

[@user-pf8of8eu5j]

how does opengl understand that we bind this attributes to the current buffer, or we bind that for the all buffers?

[@loganabel9321]

if the array of data representing the vertices has equal columns and rows, which are prime, then it is technically possible to know what each vertex is.

[@adam-markgheczi4577]

How can I toggle VS showing the arguments of a function while typing? Like at 13:24

[@marcovalentinoalvarado3290]

Vertex is a buffer that can contain a *LOT* of different types of data stored in the VRAM, but it is used by the GPU so it can be understood by a shader?

[@DaftHacker]

Not sure what video to post this on but you other tutorials that you've had with open gl use: glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3); glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3); glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE); glfwWindowHint(GLFW_RESIZABLE, GL_FALSE); How come we haven't done that in this one ?

[@nepp9574]

"A vertex has nothing to do with a position", meanwhile "float positions[6]" Made me laugh although explained later. Nothing to remark on the playlist tho, awesome series :)

[@TheKingoftheriff]

Your style would a massive bore for anything else, but for learning stuff that's actually above my level, I love how you explain the same thing in a lot of different ways. (I'm the type who takes a few lines of code and then runs with it, until I truly understand what each field is doing).

[@iIO_OIi]

Oh, now uv makes a lot more sense to me lol. I guess ARB or whoever didn't want them to be mistaken for 3D space or screen coordinates.

[@jixs4v]

Me: Wait it's all attributes? TheCherno: Always has been

[@kamilkaya5367]

Can anyone explain me the last argument of glVertexAttribPointer() function? What it does actually? I couldn't understand it properly.

[@ivanjansevanrensburg5377]

Getting error on mac? Thread 1: EXC_BAD_ACCESS (code=1, address=0x0)?

[@tricky778]

In future videos, when you're explaining the API (here I noticed the problem when explaining pointer) can you leave the function documentation up, and maybe also the relevent bit of code in splitscreen because that would be easier to follow while you talk than watching your hands - their degrees of freedom are too few to model the API concept well.

[@SkylerAk]

For anyone who gets error 1282 GL_INVALID_OPERATION with glVertexAttribPointer(); There is a simple fix you must generate and bind a vertex array the required code is: glGenVertexArrays(1, &buffer); glBindVertexArray(buffer);

[@andrew1958]

i didnt understand why the value of the pointer is 0 and if we add 1 float (4 bytes), it become 8 , can anyone explain?

[@VivekYadav-ds8oz]

I had no idea what I just saw... I really didn't understand much, it's so weird! Please make another video with different attributes within a vertex. (I'm not even sure if to call that buffer a vertex, but it doesn't represent like, the "situation" at a single point, the buffer defines a whole freaking triangle)

[@Byynx]

From the previous video to this one you added the line "glBindBuffer(GL_ARRAY_BUFFER, 0)" in the end without showing or explaining it in the video. Why we have to use again this function?

[@jangronowski8180]

If the stride is the distance between vertecies than shouldn't it be 0 because their all next to each other? If it's 2 floats shouldn't it jump over the middle vertex? Can someone explain?

[@paulzupan3732]

Right? That was my understanding as well. Very confusing, the docs aren't really that helpful either.

[@suap4694]

there is no link up there if I haven't seen the video. :(

[@billypersistent6127]

I can see the triangle when I build at this stage.

[@tunAliUTube]

I dont understand "glBindBuffer(GL_ARRAY_BUFFER, 0);" statement. Cherno said in his last video if buffer is set to zero, the glDrawArrays() would not able to draw the triangle because nothing is selected to be draw and yet I still see the triangle when building the code.

[@shubhamjain1328]

at this point the cherno should be called the offical beginner's guide to OpenGL.

[@yuchen3587]

Could anyone tell me please why he wrote glBindBuffer(GL_ARRAY_BUFFER, 0) again after he set the vertex attributes? I tried adding this line and removing this, and I got the same triangle..Thanks

[@yuchen3587]

I just checked the previous episode. He added this line glBindBuffer(GL_ARRAY_BUFFER, 0) because he wanted to justify that this will unbind our vertex buffer. If doing so, we cannot draw our triangle on the screen anymore(because OpenGL is a state machine). But when I added this line, I still can draw the triangle which I don't understand...

[@user-nf9tj6lb3n]

@@yuchen3587 same. Kinda confusing for me as a begginer.

[@asdasd-vj3jr]

i cant find the part where he add vertexarrayobject to make the program functional

[@Chris-cs7nv]

If the triangle shows anyway at this point, what does that mean?

[@Mitchinator1]

If I want to add more vertices positions to a VAO with another buffer, do I need to redo glVertexAttribPointer? Or is that a one time set-up for each index in a VAO?

[@KayVerbruggen]

Mitchinator1 You only need to redo glVertexAttribPointer if you add another type of data, so normals or uv coordinates. If you want extra positions, just make sure you have enough bytes when using glBufferData, and you should be good

[@Mitchinator1]

Kay Verbruggen How do I make sure my buffer has enough bytes? I was making a 16*16 grid of quads, and it ran out about halfway through.

[@KayVerbruggen]

Mitchinator1 Right now it says 6 * sizeof(float), you should replace the 6 with the number of floats you have. Or just replace it altogether with sizeof(yourArray).

[@Mitchinator1]

Kay Verbruggen I have replaced it with the size of my array, however it still caps out around half.

[@KayVerbruggen]

Mitchinator1 How did you specify the quads, as two triangles or just four points? If you did the four points method, replace GL_TRIANGLES with GL_QUADS. If this doesn’t solve it, I don’t know what does. edit: GL_QUADS is no longer a thing in modern OpenGL, it used to be a thing when we still used glBegin(from previous epidodes). So you need to specify two triangles to make one quad. Right now that means you need 6 positions for one quad. But I’m sure in later episodes were going to use and index buffer to fix that and only use 4 positions.

[@omri1324]

what a genius

[@ceskehry]

14:50 missing link

[@johnclasing4627]

One thing that's kinda funny is that he goes "oh em gee documentation" and goes to read it and is like "yeah this is confusing, yeah idk why they worded it this way, yeah I dont even want to read this"

[@jeroenkoffeman9402]

For me it shows a white triangle already, even without adding a shader

[@bloodwolf8307]

cool

[@h.hristov]

13:20 What was that hotkey shortcut? Does anyone know?

[@happypixls]

I know it's quite late, but it's Ctrl+Shift+Space

[@siddharthgpta]

I didn't understand the part where you set 8 as the pointer. How does OpenGL tell the data you just gave is the position of the vertex or the texture of the vertex? EDIT: Could someone tell me if this is correct? glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, sizeof(float) * 3, 0); //Specifies that index 0 corresponds to position, but OpenGL can use this only if the shader tells it so. glVertexAttribPointer(1, 1, GL_FLOAT, GL_FALSE, sizeof(float) * 3, 8); //Specifies that index 1 corresponds to texture, but again OpenGL can only use this with the shader.

[@Knuckler]

Not necessarily. The 0 index in glVertexAttribPointer corresponds to the attribute assigned index 0 in the shader. You're specifying the layout and properties of the attribute in the buffer you're passing to opengl. It "may" be position data, it "may" be texture coordinate data, it "may" be normal vector data, it "may" be color data. It's up to you, the programmer, to decide what any particular index is for. By convention, I use 0 for position data, 1 for texture, 2 for normal and 3 for color. Someone else may have their indexes arranged in another way.

[@Byynx]

When i use the function glEnableVertexAttribArray() i get an Access Violation error but if i remove it i have no errors. Can someone help me ?

[@Byynx]

I've found a solution. I added these 3 functions and now it's fine. glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 4); glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 4); glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

[@diverseprogrammer18]

I'm glad I wasn't thinking that vertex is a position.