【笔记】《计算机图形学》(17)——使用图形硬件

// 启用深度测试
glEnable(GL_DEPTH_TEST);    
// 设置深度绘制的判断函数为: GL_LESS, 当目标像素z值小于当前像素时才进行绘制
glDepthFunc(GL_LESS);   

while (!glfwWindowShouldClose(window)) {
{
  // 清空前缓冲区的颜色缓冲和深度缓冲
  glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
  // 交换前后显示缓冲区指针, 这样后缓冲区成为新的前缓冲区, 被清空的前缓冲区则又可使用
  glfwSwapBuffers(window);
  // 处理各种事件
  glfwPollEvents();

  // 判断是否退出循环
  if (glfwGetKey( window, GLFW_KEY_ESCAPE ) == GLFW_PRESS)
    glfwSetWindowShouldClose(window, 1);
}

// 指明此着色器使用的GLSL版本
#version 330 core
// layout指明了当前顶点着色器的此项元素是从外部传入的顶点数据的哪个索引取出的
// layout这里的location设定得和17.9顶点数据传入一起理解
// in关键词表明这一项是输入的数据, 相对应的有关键词out
// vec3是用于解析的GLSL自带数据类型, 后面的变量名则可以自己定义
layout(location=0) in vec3 in_Position;
void main(void) {
  // gl_Position是内置的变量
  // 一旦我们将数据赋值给gl_Position, 数据就会传递到后面的片元着色器中
  // 着色器中也使用xyzw表示法对顶点和向量进行区分
  // 因此这个顶点着色器没有进行任何工作, 仅仅是读入了传入的vec3, 设置顶点(w=1)然后传出
  gl_Position = vec4(in_Position, 1.0);
}

#version 330 core
// 这里变为了设置传出的变量out, layout同样指明了索引位置, 要和后面的内容一起理解
// 从这里可以看出和顶点着色器不同, 片元着色器可以输出多份缓冲数据, 具体需要自学
layout(location=0) out vec4 out_FragmentColor;
void main(void) {
  // 注意到此处是赋值给上面自定义的传出变量out_FragmentColor
  // 因此这个片元着色器就是将所有传入的片元都设置为同一个颜色然后输出
  out_FragmentColor = vec4(0.49, 0.87, 0.59, 1.0);
}

// 假设三角形顶点数据以数组形式保存在vertices中
GLfloat vertices[] = {-3.0f, -3.0f, 0.0f, 3.0f, -3.0f, 0.0f, 0.0f, 3.0f, 0.0f}
// 创建保存句柄的ID标识triangleVBO
GLuint triangleVBO[1];
// 从GPU上得到一个缓冲区的句柄(仅仅是一个名称, 可以理解为指针), 保存在triangleVBO中
glGenBuffers(1, triangleVBO);
// GL_ARRAY_BUFFER是缓冲对象的类型, 也可以理解为一个状态
// 此后对GL_ARRAY_BUFFER的操作都会对名为triangleVBO的缓冲对象进行
glBindBuffer(GL_ARRAY_BUFFER, triangleVBO[0]);
// 将vertices的数据从CPU复制到GPU上, 每个顶点的数据量是9 * sizeof(GLfloat)
// GL_STATIC_DRAW提示GPU这些顶点在程序中几乎不会改变. 所以GPU会进行最大程度的优化
glBufferData(GL_ARRAY_BUFFER, 9 * sizeof(GLfloat), vertices, GL_STATIC_DRAW);
// 令GL_ARRAY_BUFFER与VBO解绑(0默认就是解绑), 此后可以绑定新的VBO名称
glBindBuffer(GL_ARRAY_BUFFER, 0)

// 和VBO类似的初始化一个句柄
GLuint VAO;
glGenVertexArrays(1, &VAO);
// 牢记OpenGL的状态机特性, 将当前的OpenGL绑定到这个VAO状态上
// 从此以后对顶点数组的改变都将影响这个VAO
glBindVertexArray(VAO);
// 打开下标为0的VAO属性, 这里就是在指定前面"layout(location=0)"所指的位置location
// 因此这个状态的修改就是在控制数据与着色器的沟通, VAO的下标0和接下来的数据绑定了
glEnableVertexAttribArray(0);
// 和前面一样, 绑定VBO到顶点缓冲, 由于前面调用了glBindVertexArray, 因此也会影响VAO
// 也即表示这个VAO和三角形VBO和对应的缓冲区完成了绑定
glBindBuffer(GL_ARRAY_BUFFER, triangleVBO[0]);
// 这个函数控制了如何将当前绑定的缓冲区中的数据与VAO的顶点属性映射起来
// 第一个参数指明现在设置的是location为0的属性, 第二个参数表示每个属性由三个元素组成
// 这三个元素是GL_FLOAT浮点数, 并且数据不进行归一化(GL_FALSE)
// 第五个参数值是数据读取的步长, 这里步长和要读取的变量大小是一样的3个浮点数
// 最后一个参数指明此数据从绑定的缓冲区的下标0开始读取, 至此就完成了VBO到VAO的映射
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(GLfloat), 0);
// 解绑当前OpenGL的顶点数组对象, 此后可以绑定新的VAO进行操作
glBindVertexArray(0);

// 给当前OpenGL绑定属性为VAO的顶点数组
glBindVertexArray(VAO);
// 以三角形图元的形式渲染这个数组中的元素, 从VAO绑定的缓冲的0下标开始, 渲染3个元素
glDrawArrays(GL_TRIANGLES, 0, 3);
// 解绑以供后面别的VAO
glBindVertexArray(0);

#version 330 core
layout(location=0) in vec3 in_Position;
// uniform数据, 这里从外部传入了投影矩阵, projMatrix是Uniform数据的名称, 在外部指定
uniform mat4 projMatrix;
void main(void) {
  // 按照矩阵乘法来对顶点进行矩阵变换
  gl_Position = projMatrix * vec4(in_Position, 1.0);
}

// 利用glm生成一个正交投影矩阵
glm::mat4 projMatrix = glm::ortho(-5.0f, 5.0f, -5.0, 5.0, -10.0f, 10.0f);
// 当前的着色器程序绑定名称为projMatrix的Uniform变量句柄
GLint pMatID = glGetUniformLocation(shaderProgram, "projMatrix");
// 切换当前OpenGL到需要这个变量的着色器状态
// 着色器由各自的shaderID标识, 多个着色器链接得到着色器程序shaderProgram
glUseProgram(shaderID);
// 将projMatrix的指针和对应句柄pMatID绑定, 此后这个着色器就能读取到外部的矩阵
// 函数glUniformMatrix4fv表示目标是Uniform变量, 是矩阵, 四个float元素, 传入的是指针v
glUniformMatrix4fv(pMatID, 1, GL_FALSE, glm::value_ptr(projMatrix));

// 假设现在三角形数据数组增加了各个顶点的颜色信息, 从下面可以看出,分别为连续的6个数据:
// 每个顶点都是x, y, z, r, g, b, 所以所有数据一共是3*6=18个浮点数
GLfloat vertexData[] = {0.0f, 3.0f, 0.0f, 1.0f, 1.0f, 0.0f, -3.0f,
  -3.0f, 0.0f, 0.0f, 1.0f, 1.0f, 3.0f, -3.0f, 0.0f, 1.0f, 0.0f, 1.0f};
// 同样是VBO绑定
glBindBuffer(GL_ARRAY_BUFFER, m_triangleVBO[0]);
// 设置0号位的属性
glEnableVertexAttribArray(0);
// 仍然是读取3个GL_FOLAT数据, 但是步长变为了6 * sizeof(GLfloat)
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), 0);
glEnableVertexAttribArray(1);
// 最后一个参数是数据读取的开始下标, 也就是从顶点缓冲区的(const GLvoid *)12位置开始
// 这里的(const GLvoid *)12和3 * sizeof(GLfloat)是等价的, 也就是从颜色出现的位置开始
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), 
  (const GLvoid *)12);

#version 330 core
layout(location=0) in vec3 in_Position;
// 新增的颜色属性
layout(location=1) in vec3 in_Color;
// 这里设置了一个属于顶点着色器的out变量, 用来返回顶点的颜色
// 当名称匹配时, 顶点着色器的out变量会传递到后面片元着色器对应的in变量中
out vec3 vColor;
uniform mat4 projMatrix;
void main(void) {
  // 赋值颜色给out从而传递给片元着色器
  vColor = in_Color;
  gl_Position = projMatrix * vec4(in_Position, 1.0);
}

// 用结构体代替顶点属性数组
struct vertexData
{
  glm::vec3 pos;
  glm::vec3 color;
};
// 用标准库的vector(动态数组)来组织多个顶点
std::vector<vertexData> modelData;
// 用自带的函数来轻松计算出数组所占的真实空间
int numBytes = modelData.size() * sizeof(vertexData);
// 用vector.data()来得到指向真正数据的指针, 如何就可以和前面一样传入GPU了
glBufferData(GL_ARRAY_BUFFER, numBytes, modelData.data(), GL_STATIC_DRAW);
glBindBuffer(GL_ARRAY_BUFFER, 0);

#version 330 core
// 输入时除了顶点的位置外还需要顶点对应的法向信息
layout(location=0) in vec3 in_Position;
layout(location=1) in vec3 in_Normal;
// 传递给片元着色器的相机空间中的顶点法线
out vec4 normal;
// 视线和光照方向之间的平分线
out vec3 half;
// 光照方向, 也需要是相机空间的
out vec3 lightdir;
struct LightData {
  vec3 position;
  vec3 intensity;
};
// 传入的光照和各种变换矩阵
uniform LightData light;
uniform mat4 projMatrix;
uniform mat4 viewMatrix;
// 模型变换矩阵
uniform mat4 modelMatrix;
// 法线矩阵通常是模型变换矩阵的逆矩阵
uniform mat4 normalMatrix;

void main(void) {
  // 将顶点位置进行模视变换, 先进行对应的模型变换再变换到相机空间
  vec4 pos = viewMatrix * modelMatrix * vec4(in_Position, 1.0);
  // 计算相机空间中的光源位置
  vec4 lightPos = viewMatrix * vec4(light.position, 1.0);
  // 计算相机空间中的法线表示
  normal = normalMatrix * vec4(in_Normal, 0.0);
  // 由于视点(相机)必在原点(0,0)处, 所以原点到顶点的差向量就是视线向量
  vec3 v = normalize( -pos.xyz );
  // 光源位置与顶点位置的差向量就是对应的光照方向
  lightdir = normalize( lightPos.xyz - pos.xyz );
  // 视线向量与光线向量的平分线也需要返回
  half = normalize( v + lightdir );
  // 最后将顶点进行对应的投影后传递下去
  gl_Position = projMatrix * pos;
}

#version 330 core
in vec4 normal;
in vec3 half;
in vec3 lightdir;
// 要返回的片元的颜色
layout(location=0) out vec4 fragmentColor;
struct LightData {
  vec3 position;
  vec3 intensity;
};
uniform LightData light;
uniform vec3 Ia;
uniform vec3 ka, kd, ks;
// 控制反射聚光强度的指数值
uniform float phongExp;
void main(void) {
  // 三个向量先化为单位向量
  vec3 n = normalize(normal.xyz);
  vec3 h = normalize(half);
  vec3 l = normalize(lightdir);
  // 直接按照公式进行着色计算即可
  vec3 intensity = ka * Ia
    + kd * light.intensity * max( 0.0, dot(n, l) )
    + ks * light.intensity
    * pow( max( 0.0, dot(n, h) ), phongExp );
  fragmentColor = vec4( intensity, 1.0 );
}

#version 330 core
in vec4 normal;
layout(location=0) out vec4 fragmentColor;
void main(void) {
  // 核心就是这里将法线从(-1,1)转换到(0,1)然后用RGB进行显示
  // 尽管这是个很简单的着色器但是由于法线信息在渲染中非常重要因此专门完整写出此着色器
  vec3 intensity = normalize(normal.xyz) * 0.5 + 0.5;
  fragmentColor = vec4( intensity, 1.0 );
}

// 通过某种方法读取材质数据到动态数组imgData中
float *imgData = new float[ imgHeight * imgWidth * 3 ];
...
// 类似绑定顶点数据的形式绑定材质数据
GLuint texID;
glGenTextures(1, &texID);
glBindTexture(GL_TEXTURE_2D, texID);
// 这里展示了四种不同的材质参数化方式, 会影响后面材质查找的效果
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
// 将数据从CPU复制到GPU上, 其中第二个参数指示了第十一章提到的mipmap级别
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, imgWidth, imgHeight, 0,
  GL_RGB, GL_FLOAT, imgData);
// 解绑
glBindTexture(GL_TEXTURE_2D, 0);
delete [] imgData;

// 选择当前着色器程序
glUseProgram(shaderID);
// 设置当前OpenGL所要激活的材质单元(texture unit), 这里只激活了0号单元但可以有多个单元
glActiveTexture(GL_TEXTURE0);
// 绑定材质ID到GL_TEXTURE_2D采样器中, 这是最基本的材质采样器
// 除了GL_TEXTURE_2D外, 还有例如GL_TEXTURE_RECTANGLE的其它采样器可供选择
glBindTexture(GL_TEXTURE_2D, texID);
// 由于同一上下文中可以有多个材质单元被激活, 因此需要设置当前绑定的材质单元以供查找
glUniform1i(texUnitID, 0);
// 和前面一样, 绑定VAO
glBindVertexArray(VAO);
// 绘制三角形
glDrawArrays(GL_TRIANGLES, 0, 3);
// 解绑
glBindVertexArray(0);
glBindTexture(GL_TEXTURE_2D, 0);
glUseProgram(0);

...
// 从顶点着色器传来的对应顶点的材质坐标
in vec2 tCoord;
// 绑定了材质数据的材质单元如上面代码以Uniform传入
uniform sampler2D textureUnit;
...
// texture函数会从材质单元中按照给定的材质坐标进行查找并返回颜色值
// 由于texture函数返回的颜色值是带有透明度通道的vec4, 因此使用.rgb得到前三个通道
vec3 kdTexel = texture(textureUnit, tCoord).rgb;
// 将得到的颜色值附加在Phong着色的漫反射项上就能完成材质着色
vec3 intensity = ka * Ia + kdTexel * light.intensity
  * max( 0.0, dot(n, l) ) + ks * light.intensity
  * pow( max( 0.0, dot(n, h) ), phongExp );
...