OpenGL学习笔记（立方体贴图、高级数据、高级GLSL）

GitHub主页：https://github.com/sdpyy1
OpenGL学习仓库:https://github.com/sdpyy1/CppLearn/tree/main/OpenGLtree/main/OpenGL):https://github.com/sdpyy1/CppLearn/tree/main/OpenGL

立方体贴图

相当于6个2D纹理，通过一个方向向量来进行采样

创建立方体贴图

unsigned int textureID;
glGenTextures(1, &textureID);
glBindTexture(GL_TEXTURE_CUBE_MAP, textureID);

因为立方体贴图包含有6个纹理，每个面一个，我们需要调用glTexImage2D函数6次

天空盒

用提供好的纹理制作3D纹理

    float skyboxVertices[] = {// positions-1.0f,  1.0f, -1.0f,-1.0f, -1.0f, -1.0f,1.0f, -1.0f, -1.0f,1.0f, -1.0f, -1.0f,1.0f,  1.0f, -1.0f,-1.0f,  1.0f, -1.0f,-1.0f, -1.0f,  1.0f,-1.0f, -1.0f, -1.0f,-1.0f,  1.0f, -1.0f,-1.0f,  1.0f, -1.0f,-1.0f,  1.0f,  1.0f,-1.0f, -1.0f,  1.0f,1.0f, -1.0f, -1.0f,1.0f, -1.0f,  1.0f,1.0f,  1.0f,  1.0f,1.0f,  1.0f,  1.0f,1.0f,  1.0f, -1.0f,1.0f, -1.0f, -1.0f,-1.0f, -1.0f,  1.0f,-1.0f,  1.0f,  1.0f,1.0f,  1.0f,  1.0f,1.0f,  1.0f,  1.0f,1.0f, -1.0f,  1.0f,-1.0f, -1.0f,  1.0f,-1.0f,  1.0f, -1.0f,1.0f,  1.0f, -1.0f,1.0f,  1.0f,  1.0f,1.0f,  1.0f,  1.0f,-1.0f,  1.0f,  1.0f,-1.0f,  1.0f, -1.0f,-1.0f, -1.0f, -1.0f,-1.0f, -1.0f,  1.0f,1.0f, -1.0f, -1.0f,1.0f, -1.0f, -1.0f,-1.0f, -1.0f,  1.0f,1.0f, -1.0f,  1.0f};// sky的VAOGLuint skyVAO, skyVBO;glGenVertexArrays(1, &skyVAO);glBindVertexArray(skyVAO);glGenBuffers(1, &skyVBO);glBindBuffer(GL_ARRAY_BUFFER, skyVBO);glBufferData(GL_ARRAY_BUFFER, sizeof(skyboxVertices), &skyboxVertices, GL_STATIC_DRAW);glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);glEnableVertexAttribArray(0);glBindVertexArray(0);

#version 330 core
layout (location = 0) in vec3 aPos;out vec3 TexCoords;uniform mat4 projection;
uniform mat4 view;void main()
{TexCoords = aPos;gl_Position = projection * view * vec4(aPos, 1.0);
}

#version 330 core
out vec4 FragColor;in vec3 TexCoords;uniform samplerCube skybox;void main()
{FragColor = texture(skybox, TexCoords);
}

渲染时应该先渲染天空盒，这里要注意一点，对View矩阵的设置（全局坐标转视图坐标）的平移操作，是通过平移场景中所有的物体实现的，如果我们希望我们摄像机始终在天空盒中，就要取消View矩阵的平移部分。

        glm::mat4 view = glm::mat4(glm::mat3(camera.GetViewMatrix()));

在渲染时，要先渲染天空盒，渲染前要关闭深度缓存的写入，这是因为天空盒z最远就是1，

        glDepthMask(GL_FALSE);skyShader.use();glm::mat4 projection = glm::perspective(glm::radians(camera.Zoom), (float)SCR_WIDTH / (float)SCR_HEIGHT, 0.1f, 100.0f);glm::mat4 view = glm::mat4(glm::mat3(camera.GetViewMatrix()));skyShader.setMat4("projection", projection);skyShader.setMat4("view", view);glBindVertexArray(skyVAO);glBindTexture(GL_TEXTURE_CUBE_MAP, cubemapTexture);glDrawArrays(GL_TRIANGLES, 0, 36);glDepthMask(GL_TRUE);

这样就是先了摄像机移动时，只是相当于内部的物体移动了，而天空盒不会移动，所以摄像机逃不出天空盒

另外在渲染天空盒之前要关闭深度缓冲的写入，因为盒子最远z值只有-1，当一个物体Model变换放在一个靠后的位置，就会因深度缓冲中写入了-1，而不会渲染，如下图的情况

当渲染天空盒时关闭深度缓存，那别的物体的渲染不会受到天空盒距离而被遮挡，但是仍会因为超出裁剪空间F面而消失
但这种做法并不是最优，下面进行优化，如果先渲染天空盒，其实没必要的，因为天空盒是放在最后的，所以肯定是有一部分被模型挡住的。所以改为最后渲染天空盒。

在坐标系统小节中我们说过，透视除法是在顶点着色器运行之后执行的，将gl_Position的xyz坐标除以w分量。我们又从深度测试小节中知道，相除结果的z分量等于顶点的深度值。使用这些信息，我们可以将输出位置的z分量等于它的w分量，让z分量永远等于1.0，这样子的话，当透视除法执行之后，z分量会变为w / w = 1.0。
这样做的目的是让天空盒的深度值永远等于1

void main()
{TexCoords = aPos;vec4 pos = projection * view * vec4(aPos, 1.0);gl_Position = pos.xyww;
}

通过把天空盒的z值设置为最大，也就是只要有其他物体渲染，那他的z值一定小于等于1，那么它就会被渲染，从而让天空盒不会挡住比较远的物体
现在渲染天空就放在了最后一步，因为他的z是最大，只要有物体已经渲染了，那对应的像素就不会再渲染天空盒（如果先渲染天空盒，那每个像素都需要渲染一遍天空盒才继续下一步）

        // 渲染天空glDepthFunc(GL_LEQUAL);skyShader.use();glm::mat4 projection = glm::perspective(glm::radians(camera.Zoom), (float)SCR_WIDTH / (float)SCR_HEIGHT, 0.1f, 100.0f);glm::mat4 view = glm::mat4(glm::mat3(camera.GetViewMatrix()));skyShader.setMat4("projection", projection);skyShader.setMat4("view", view);glBindVertexArray(skyVAO);glBindTexture(GL_TEXTURE_CUBE_MAP, cubemapTexture);glDrawArrays(GL_TRIANGLES, 0, 36);glDepthFunc(GL_LESS);

    glDepthFunc(GL_LEQUAL);是为了让小于等于深度缓冲就通过测试，因为深度缓冲默认就是1，天空盒也是1，如果是GL_LESS，那永远都不会通过，场景全黑了。

环境映射

进一步还可以把3D纹理利用在模型的纹理上，一张图就解释了

通过摄像机与物体表面反射的方向向量，去3D贴图找颜色，就得到一种反光的效果

#version 330 core
out vec4 FragColor;in vec3 Normal;
in vec3 Position;uniform vec3 cameraPos;
uniform samplerCube skybox;void main()
{vec3 I = normalize(Position - cameraPos);vec3 R = reflect(I, normalize(Normal));FragColor = vec4(texture(skybox, R).rgb, 1.0);
}

来点小创新，外部用反射效果，而内部用其他的采样器

void main()
{vec3 I = normalize(Position - cameraPos);vec3 R = reflect(I, normalize(Normal));if(dot(-I, Normal)<0){FragColor = vec4(mix(texture(texture1,texCoords), texture(texture2,texCoords),0.5));}else{FragColor = vec4(texture(skybox, R).rgb, 1.0);}
}

用方块演示

斯涅尔定律（Snell’s Law）

当光波从一种介质传播到另一种具有不同折射率的介质时，会发生折射现象，其入射角与折射角之间的关系，可以用斯涅尔定律（Snell’s Law）来描述。
折射定律表明，当光波从介质1传播到介质2时，假若两种介质的折射率不同，则会发生折射现像，其入射光和折射光都处于同一平面，称为“入射平面”，并且与界面法线的夹角满足如下关系：

该公式指出如果进入一个高折射率的介质中，与法线的夹角就会变小

菲涅尔效应（Fresnel Effect）

描述光线在介质表面‌反射与透射比例‌随入射角变化的物理现象：
‌反射率（R）‌：入射光被反射的比例。
‌透射率（T）‌：入射光进入介质的比例

这张图就能看出，近处可以看到水下的东西，但是远处就只能看到倒影了。其原理就在于，当光线入射角大的时候，反射效果强；光线入射角小的时候，反射效果弱。

动态环境贴图

通过使用帧缓冲，我们能够为物体的6个不同角度创建出场景的纹理，并在每个渲染迭代中将它们储存到一个立方体贴图中。之后我们就可以使用这个（动态生成的）立方体贴图来创建出更真实的，包含其它物体的，反射和折射表面了。这就叫做动态环境映射(Dynamic Environment Mapping)，因为我们动态创建了物体周围的立方体贴图，并将其用作环境贴图。
这句话就是说在一个物体6个角度上安排摄像机进行渲染，渲染完成放在6张纹理上，贴到物体上，就能完美模拟镜面效果，但一听就计算量巨大~

高级数据

OpenGL中的缓冲只是一个管理特定内存块的对象，没有其它更多的功能了。在我们将它绑定到一个缓冲目标(Buffer Target)时，我们才赋予了其意义。当我们绑定一个缓冲到GL_ARRAY_BUFFER时，它就是一个顶点数组缓冲，但我们也可以很容易地将其绑定到GL_ELEMENT_ARRAY_BUFFER。OpenGL内部会为每个目标储存一个缓冲，并且会根据目标的不同，以不同的方式处理缓冲。

到目前为止，我们一直是调用glBufferData函数来填充缓冲对象所管理的内存，这个函数会分配一块GPU内存，并将数据添加到这块内存中。如果我们将它的data参数设置为NULL，那么这个函数将只会分配内存，但不进行填充。这在我们需要预留(Reserve)特定大小的内存，之后回到这个缓冲一点一点填充的时候会很有用。

    glBufferData(GL_ARRAY_BUFFER, sizeof(cubeVs), &cubeVs, GL_STATIC_DRAW);

还有更进阶的填充方法，就是glBufferSubData，它用来填充缓冲的特定区域

glBufferSubData(GL_ARRAY_BUFFER, 24, sizeof(data), &data); // 范围： [24, 24 + sizeof(data)]

在调用glBufferSubData之前必须先调用glBufferData分配足够的空间。

将数据导入缓冲的另外一种方法是，请求缓冲内存的指针，直接将数据复制到缓冲当中。通过调用glMapBuffer函数，OpenGL会返回当前绑定缓冲的内存指针，供我们操作：

float data[] = {0.5f, 1.0f, -0.35f...
};
glBindBuffer(GL_ARRAY_BUFFER, buffer);
// 获取指针
void *ptr = glMapBuffer(GL_ARRAY_BUFFER, GL_WRITE_ONLY);
// 复制数据到内存
memcpy(ptr, data, sizeof(data));
// 记得告诉OpenGL我们不再需要这个指针了
glUnmapBuffer(GL_ARRAY_BUFFER);

如果要直接映射数据到缓冲，而不事先将其存储到临时内存中，glMapBuffer这个函数会很有用。比如说，你可以从文件中读取数据，并直接将它们复制到缓冲内存中。

分批顶点属性

在之前我们都是把一个点的不同属性精密排列并在VAO中进行定义

    float cubeVs[] = {// positions          // normals           // texture coords-0.5f, -0.5f, -0.5f,  0.0f,  0.0f, -1.0f,  0.0f,  0.0f,0.5f, -0.5f, -0.5f,  0.0f,  0.0f, -1.0f,  1.0f,  0.0f,

这里可以尝试不同的方式。我们将采用分批(Batched)的方式111122223333。很好理解，就是顶点数据放一起，全部存完之后才开始法线。
用刚才的指定位置存放来批量存放

float positions[] = { ... };
float normals[] = { ... };
float tex[] = { ... };
// 填充缓冲
glBufferSubData(GL_ARRAY_BUFFER, 0, sizeof(positions), &positions);
glBufferSubData(GL_ARRAY_BUFFER, sizeof(positions), sizeof(normals), &normals);
glBufferSubData(GL_ARRAY_BUFFER, sizeof(positions) + sizeof(normals), sizeof(tex), &tex);

之后在设置VAO时，主要就是要调整步长

glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), 0);  
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)(sizeof(positions)));  
glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 2 * sizeof(float), (void*)(sizeof(positions) + sizeof(normals)));

复制缓冲

当你的缓冲已经填充好数据之后，你可能会想与其它的缓冲共享其中的数据，或者想要将缓冲的内容复制到另一个缓冲当中。glCopyBufferSubData能够让我们相对容易地从一个缓冲中复制数据到另一个缓冲中。这个函数的原型如下：

void glCopyBufferSubData(GLenum readtarget, GLenum writetarget, GLintptr readoffset,GLintptr writeoffset, GLsizeiptr size);

readtarget和writetarget参数需要填入复制源和复制目标的缓冲目标。比如说，我们可以将VERTEX_ARRAY_BUFFER缓冲复制到VERTEX_ELEMENT_ARRAY_BUFFER缓冲，分别将这些缓冲目标设置为读和写的目标。当前绑定到这些缓冲目标的缓冲将会被影响到。

但是如果从一个VBO复制到另外一个VBO呢，OpenGL每次只能绑定一个VBO呀。OpenGL提供给我们另外两个缓冲目标，叫做GL_COPY_READ_BUFFER和GL_COPY_WRITE_BUFFER。
等于是把两个VBO绑到了其他地方

glBindBuffer(GL_COPY_READ_BUFFER, vbo1);
glBindBuffer(GL_COPY_WRITE_BUFFER, vbo2);
glCopyBufferSubData(GL_COPY_READ_BUFFER, GL_COPY_WRITE_BUFFER, 0, 0, sizeof(vertexData));

高级GLSL

我们将会讨论一些有趣的内建变量(Built-in Variable)，管理着色器输入和输出的新方式以及一个叫做Uniform缓冲对象(Uniform Buffer Object)的有用工具。

顶点着色器变量

GLSL还定义了另外几个以gl_为前缀的变量，它们能提供给我们更多的方式来读取/写入数据。我们已经在前面教程中接触过其中的两个了：顶点着色器的输出向量gl_Position，和片段着色器的gl_FragCoord。
gl_Position就是接收MVP变换后的裁剪空间坐标位置（后续进行透视除法后才是NDC空间）

gl_PointSize
我们能够选用的其中一个图元是GL_POINTS，如果使用它的话，每一个顶点都是一个图元，都会被渲染为一个点。我们可以通过OpenGL的glPointSize函数来设置渲染出来的点的大小，但我们也可以在顶点着色器中修改这个值。

GLSL定义了一个叫做gl_PointSize输出变量，它是一个float变量，你可以使用它来设置点的宽高（像素）。在顶点着色器中修改点的大小的话，你就能对每个顶点设置不同的值了
它需要开启

glEnable(GL_PROGRAM_POINT_SIZE);

设置点的大小

gl_VertexID
他是顶点着色器的输入。整型变量gl_VertexID储存了正在绘制顶点的当前ID。当（使用glDrawElements）进行索引渲染的时候，这个变量会存储正在绘制顶点的当前索引。当（使用glDrawArrays）不使用索引进行绘制的时候，这个变量会储存从渲染调用开始的已处理顶点数量。

片段着色器变量

gl_FragCoord 存储着当前像素在窗口下的坐标和深度
利用这个变量可以做一个有趣的效果，窗口左右两边用不同的着色方式

void main()
{vec3 I = normalize(Position - cameraPos);if(gl_FragCoord.x < 400){FragColor = vec4(mix(texture(texture1,texCoords), texture(texture2,texCoords),0.5));}else{vec3 R = reflect(I, normalize(Normal));FragColor = texture(skybox, R);}
}

gl_FrontFacing
gl_FrontFacing将会告诉我们当前片段是属于正向面的一部分还是背向面的一部分
也可以将正面和背面用不同的渲染

gl_FragDepth
gl_FragDepth的输出变量，我们可以使用它来在着色器内设置片段的深度值。然而，由我们自己设置深度值有一个很大的缺点，只要我们在片段着色器中对

gl_FragDepth进行写入，OpenGL就会（像深度测试小节中讨论的那样）禁用所有的提前深度测试(Early Depth Testing)。它被禁用的原因是，OpenGL无法在片段着色器运行之前得知片段将拥有的深度值，因为片段着色器可能会完全修改这个深度值。

通过在片段着色器顶部声明，来让OpenGL更好的提高性能（注意这个特性只在OpenGL 4.2版本或以上才提供）

layout (depth_<condition>) out float gl_FragDepth;

接口块

到目前为止，每当我们希望从顶点着色器向片段着色器发送数据时，我们都声明了几个对应的输入/输出变量。将它们一个一个声明是着色器间发送数据最简单的方式了，但当程序变得更大时，你希望发送的可能就不只是几个变量了，它还可能包括数组和结构体。

为了帮助我们管理这些变量，GLSL为我们提供了一个叫做接口块(Interface Block)的东西，来方便我们组合这些变量。接口块的声明和struct的声明有点相像，不同的是，现在根据它是一个输入还是输出块(Block)，使用in或out关键字来定义的。

out VS_OUT
{vec2 TexCoords;
} vs_out;

在使用时

vs_out.TexCoords = aTexCoords;

同样，片段着色器需要定义一样名字的接口块来接收

in VS_OUT
{vec2 TexCoords;
} fs_in;

Uniform缓冲对象

当多个shader程序需要的uniform是一致的情况，那理论上只需要存储一次即可

OpenGL为我们提供了一个叫做Uniform缓冲对象(Uniform Buffer Object)的工具，它允许我们定义一系列在多个着色器程序中相同的全局Uniform变量。当使用Uniform缓冲对象的时候，我们只需要设置相关的uniform一次。当然，我们仍需要手动设置每个着色器中不同的uniform。并且创建和配置Uniform缓冲对象会有一点繁琐。

uniform快定义如下，对于同一个场景，视图矩阵和投影矩阵应该是相同的，这时候就可以使用缓冲，使用时直接使用，不需要xx.xx

layout (std140) uniform Matrices
{mat4 projection;mat4 view;
};
void main()
{gl_Position = projection * view * model * vec4(aPos, 1.0);
}

其中layout (std140)是说当前定义的Uniform块对它的内容使用一个特定的内存布局。这个语句设置了Uniform块布局(Uniform Block Layout)。

Uniform块布局

块只是一块预留内存，我们还需要告诉OpenGL内存的哪一部分对应着着色器中的哪一个uniform变量。

假设着色器中有以下的这个Uniform块：

layout (std140) uniform ExampleBlock
{float value;vec3  vector;mat4  matrix;float values[3];bool  boolean;int   integer;
};

GLSL默认的Uniform内存布局是Shared（共享），当使用 layout(shared)（或省略布局声明，因为这是默认行为）时，OpenGL ‌允许硬件厂商‌ 根据自身架构特点决定变量在内存中的排列方式（如对齐、填充规则）。但是一旦换了硬件他的优化方式不一样。就会出问题。这种内存布局主要是针对该shader只会运行在同一个平台的情况（比如任天堂独占游戏）。
使用共享布局时，GLSL是可以为了优化而对uniform变量的位置进行变动的，只要变量的顺序保持不变。因为我们无法知道每个uniform变量的偏移量，我们也就不知道如何准确地填充我们的Uniform缓冲了。我们能够使用像是glGetUniformIndices这样的函数来查询这个信息，但这超出本节的范围了。虽然共享布局给了我们很多节省空间的优化，但是我们需要查询每个uniform变量的偏移量，这会产生非常多的工作量。

解决跨平台的方法就是使用std140布局。std140布局声明了每个变量的偏移量都是由一系列规则所决定的，这显式地声明了每个变量类型的内存布局。由于这是显式提及的，我们可以手动计算出每个变量的偏移量。

也就是说我们规定了每种类型占据的空间，并且都可以通过整数倍N（每4个字节将会用一个N来表示）来计算偏移量

在这种布局下，我们就可以自己计算偏移量来将数据存入uniform缓冲中

使用Uniform缓冲

经典缓冲对象的创建与内存分配

unsigned int uboExampleBlock;
glGenBuffers(1, &uboExampleBlock);
glBindBuffer(GL_UNIFORM_BUFFER, uboExampleBlock);
glBufferData(GL_UNIFORM_BUFFER, 152, NULL, GL_STATIC_DRAW); // 分配152字节的内存
glBindBuffer(GL_UNIFORM_BUFFER, 0);

只会就可以通过glBufferSubData来更新每个偏移量下的变量了。同时我们还需要将该缓冲连接到具体的uniform块上
做法就是shader和缓冲连接到同一个绑定点上（类似于纹理的绑定）

glUniformBlockBinding用于shader，第一个参数是一个程序对象，之后是一个Uniform块索引和链接到的绑定点。Uniform块索引(Uniform Block Index)是着色器中已定义Uniform块的位置值索引。这可以通过调用glGetUniformBlockIndex来获取（就是定义的uniform块在shader的位置）

unsigned int lights_index = glGetUniformBlockIndex(shaderA.ID, "Lights");   
glUniformBlockBinding(shaderA.ID, lights_index, 2);

注意我们需要对每个着色器重复这一步骤。
在新版本中有简化版

接下来还需要绑定缓冲到相同的绑定点

glBindBufferBase(GL_UNIFORM_BUFFER, 2, uboExampleBlock); 
// 这种方式可以选取缓冲的一部分进行绑定，更加灵活
glBindBufferRange(GL_UNIFORM_BUFFER, 2, uboExampleBlock, 0, 152);

测试

天空盒和物体使用的同一套投影变换矩阵，所以可以进行绑定
首先来创建一个缓冲区

    // 创建uboGLuint ubo;glGenBuffers(1, &ubo);glBindBuffer(GL_UNIFORM_BUFFER, ubo);glBufferData(GL_UNIFORM_BUFFER, sizeof(glm::mat4) * 2, NULL, GL_DYNAMIC_DRAW);

绑定UBO到一个绑定点上

    // 这个绑定点包含ubo所有内容（2个mat4）glBindBufferBase(GL_UNIFORM_BUFFER, 1, ubo);// 这个绑定点只有1个mat，他就是用来表示天空盒的透视矩阵，因为view矩阵，天空盒和别人不一样glBindBufferRange(GL_UNIFORM_BUFFER, 2, ubo, 0, sizeof(glm::mat4));

加载完shader，并将shader绑定到绑定点上

// 着色器设置Shader cubeShader("./shader/bag.vert", "./shader/bag.frag");Shader skyShader("./shader/sky.vert", "./shader/sky.frag");// shader的uniform块绑定到绑定点unsigned int projectionMatIndexInCubeShader = glGetUniformBlockIndex(cubeShader.ID, "projectionMat");unsigned int projectionMatIndexInSkyShader = glGetUniformBlockIndex(skyShader.ID, "projectionMat");glUniformBlockBinding(cubeShader.ID,    projectionMatIndexInCubeShader, 1);glUniformBlockBinding(skyShader.ID,    projectionMatIndexInSkyShader, 2);

因为投影矩阵是公用的，所以只需要设置一次即可

    // 把投影矩阵插入缓冲中glm::mat4 projection = glm::perspective(glm::radians(camera.Zoom), (float)SCR_WIDTH / (float)SCR_HEIGHT, 0.1f, 100.0f);glBufferSubData(GL_UNIFORM_BUFFER, 0, sizeof(glm::mat4), &projection[0][0]);

在每轮循环中，view矩阵需要修改一次，但只需要修改缓存中的矩阵，程序就不需要修改了

        // 设置视角矩阵的缓冲glm::mat4 view = camera.GetViewMatrix();glBindBuffer(GL_UNIFORM_BUFFER, ubo);glBufferSubData(GL_UNIFORM_BUFFER, sizeof(glm::mat4), sizeof(glm::mat4), &view[0][0]);glBindBuffer(GL_UNIFORM_BUFFER, 0);

另外天空盒的view需要单独设置，因为它与别人不一样，它不能进行位移

最后在shader中添加uniform块

layout (std140) uniform projectionMat
{mat4 projection;mat4 view;
};

layout (std140) uniform projectionMat
{mat4 projection;
};

最终程序正常运行，并且摄像机移动也正常，并且天空盒也没有出现移动，一切正常。