opengl与webgl的layout理解

官网：https://www.khronos.org/opengl/wiki/Layout_Qualifier_(GLSL)

stackoverflow:https://stackoverflow.com/questions/33493709/opengl-layout-qualifier

#version 330 core
layout (location = 0) in vec3 position; // The position variable has attribute position 0

out vec4 vertexColor; // Specify a color output to the fragment shader

void main()
{
    gl_Position = vec4(position, 1.0); // See how we directly give a vec3 to vec4's constructor
    vertexColor = vec4(0.5f, 0.0f, 0.0f, 1.0f); // Set the output variable to a dark-red color
}

上文的vertexColor是输出很好理解。但layout则需要研究一下。

在opengl中，顶点（vertex）由一系列属性（attribute）组成，比如位置，颜色，纹理位置等。

这些attribute信息不会逐个告诉GPU，那样效率就太低了。对于一个顶点来说，它的所有attribute都会放在顶点缓存里，即Vertex Buffer Object，即VBO，封装好后一起告诉给GPU。

桥豆麻袋，如果一个顶点告诉一次的话，三维世界那么顶点，效率又拉低了下来。于是我们把很多个顶点的信息放在一起，即Vertex Array Object，即VAO，把所有顶点的所有信息一次性全部告诉GPU。

当创建VAO时，VAO就会把数据与缓存关联起来，VAO就会告诉CPU："喏，我写的第一个数据就是attribute0，写的第二个数据就是attribute1...."

但VAO并没有说它写的第一个数据到底是什么，这时候就轮到VBO出场了。VBO说："第一个数据的确切值是3.00，第二个数据的确切值是..."

这样CPU就能缓存正确的数据了。