OpenGL 着色器学习笔记

https://learnopengl-cn.readthedocs.io/zh/latest/01%20Getting%20started/04%20Hello%20Triangle/

iOS OpenGL

iOS Demo

着色器(Shader)

图形渲染管线接受一组3D坐标,然后把它们转变为你屏幕上的有色2D像素输出。图形渲染管线可以被划分为几个阶段,每个阶段将会把前一个阶段的输出作为输入。所有这些阶段都是高度专门化的(它们都有一个特定的函数),并且很容易并行执行。正是由于它们具有并行执行的特性,当今大多数显卡都有成千上万的小处理核心,它们在GPU上为每一个(渲染管线)阶段运行各自的小程序,从而在图形渲染管线中快速处理你的数据。这些小程序叫做着色器(Shader)。
OpenGL着色器是用OpenGL着色器语言(OpenGL Shading Language, GLSL)写成的

image.png

一个顶点(Vertex)是一个3D坐标的数据的集合
顶点数据是用顶点属性(Vertex Attribute)表示的
想把数据绘制成什么类型,由OpenGL用图元(Primitive)属性来表示把数据绘制成点线面。(GL_POINTS、GL_TRIANGLES、GL_LINE_STRIP。)

顶点渲染流程

image.png

image.png

image.png

image.png

顶点着色器(Vertex Shader) ->图元装配(Primitive Assembly) -> 几何着色器(Geometry Shader) ->光栅化阶段(Rasterization Stage) ->供片段着色器(Fragment Shader)使用的片段(Fragment) -> 裁切(Clipping) -> Alpha测试和混合(Blending)阶段
OpenGL中的一个片段是OpenGL渲染一个像素所需的所有数据。

片段着色器的主要目的是计算一个像素的最终颜色,这也是所有OpenGL高级效果产生的地方。通常,片段着色器包含3D场景的数据(比如光照、阴影、光的颜色等等),这些数据可以被用来计算最终像素的颜色。

对于大多数场合,我们只需要配置顶点和片段着色器就行了

顶点输入

image.png

顶点着色器

  • 作为渲染管线的第一个处理阶段
  • 在GPU创建内存储存顶点数据
  • 处理指定数量顶点

顶点缓冲对象(Vertex Buffer Objects, VBO)

  • 通过它管理上面创建的内存。使用它的好处是可以使用CPU一次发送大批数据到显卡
  • 在OpenGl中有一个独一无二的ID

可以使用glGenBuffers函数和一个缓冲ID生成一个VBO对象:

GLuint VBO;
glGenBuffers(1, &VBO);  

顶点着色器(Vertex Shader)

一个着色器最简单的程序

layout (location = 0) in vec3 position;

void main()
{
    gl_Position = vec4(position.x, position.y, position.z, 1.0);
}

gl_Position设置的值会成为该顶点着色器的输出
在真实的程序里输入数据通常都不是标准化设备坐标,所以我们首先必须先把它们转换至OpenGL的可视区域内。

编译顶点着色器

GLuint vertexShader;
vertexShader = glCreateShader(GL_VERTEX_SHADER);
我们把需要创建的着色器类型以参数形式提供给glCreateShader。由于我们正在创建一个顶点着色器,传递的参数是GL_VERTEX_SHADER。

下一步我们把这个着色器源码附加到着色器对象上,然后编译它:

glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
glCompileShader(vertexShader);

glShaderSource函数把要编译的着色器对象作为第一个参数。第二参数指定了传递的源码字符串数量,这里只有一个。第三个参数是顶点着色器真正的源码,第四个参数我们先设置为NULL。

片段着色器(Vertex Shader)

片段着色器全是关于计算你的像素最后的颜色输出

#version 330 core

out vec4 color;

void main()
{
    color = vec4(1.0f, 0.5f, 0.2f, 1.0f);
}

编译片段着色器

GLuint fragmentShader;
fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader, 1, &fragmentShaderSource, null);
glCompileShader(fragmentShader);

着色器程序(Shader Program Object)

着色器程序对象(Shader Program Object)是多个着色器合并之后并最终链接完成的版本。如果要使用刚才编译的着色器我们必须把它们链接为一个着色器程序对象,然后在渲染对象的时候激活这个着色器程序。已激活着色器程序的着色器将在我们发送渲染调用的时候被使用。

创建
GLuint shaderProgram;
shaderProgram = glCreateProgram();
glAttachShader(shaderProgram, vertexShader);
glAttachShader(shaderProgram, fragmentShader);
glLinkProgram(shaderProgram);
激活

glUseProgram(shaderProgram);

销毁

glDeleteShader(vertexShader);
glDeleteShader(fragmentShader);

链接顶点属性

链接顶点属性,意思是在VBO上的储存的顶点内存怎么被顶点着色器解析

上面所有步骤,已经把输入顶点数据发送给了GPU,并指示了GPU如何在顶点和片段着色器中处理它。但是OpenGL还不知道它该如何解释内存中的顶点数据,以及它该如何将顶点数据链接到顶点着色器的属性上。我们需要告诉OpenGL怎么做。

顶点着色器允许我们指定任何以顶点属性为形式的输入。这使其具有很强的灵活性的同时,它还的确意味着我们必须手动指定输入数据的哪一个部分对应顶点着色器的哪一个顶点属性。所以,我们必须在渲染前指定OpenGL该如何解释顶点数据。


image.png
有了这些信息我们就可以使用glVertexAttribPointer函数告诉OpenGL该如何解析顶点数据(应用到逐个顶点属性上)了:

glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(GLfloat), (GLvoid*)0);
glEnableVertexAttribArray(0);
  • 第一个参数,指定我们要配置的顶点属性,即上面顶点着色器程序的layout(location = 0)
  • 第二个参数,顶点属性的大小。顶点属性是一个vec3。
  • 第三个参数,GL_FLOAT,(GLSL中vec*都是由浮点数值组成的)
  • 第四个参数,数据被标准化(Normalize)
  • 第五个参数,表示位置数据在缓冲中起始位置的偏移量(Offset)

每个顶点属性从一个VBO管理的内存中获得它的数据,而具体是从哪个VBO(程序中可以有多个VBO)获取则是通过在调用glVetexAttribPointer时绑定到GL_ARRAY_BUFFER的VBO决定的。由于在调用glVetexAttribPointer之前绑定的是先前定义的VBO对象,顶点属性0现在会链接到它的顶点数据。

用一个顶点缓冲对象将顶点数据初始化至缓冲中,建立了一个顶点和一个片段着色器,并告诉了OpenGL如何把顶点数据链接到顶点着色器的顶点属性上

// 0. 复制顶点数组到缓冲中供OpenGL使用
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
// 1. 设置顶点属性指针
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(GLfloat), (GLvoid*)0);
glEnableVertexAttribArray(0);
// 2. 当我们渲染一个物体时要使用着色器程序
glUseProgram(shaderProgram);
// 3. 绘制物体
someOpenGLFunctionThatDrawsOurTriangle();

顶点数组对象(Vertex Array Object, VAO)

VAO就是保存 “VBO和顶点属性链接关系状态”的一个状态,在glBindVertexArray(VAO)和glBindVertexArray(0)之间创建的VBO和顶点属性链,会保存为一个VAO。

参考

解析顶点着色器和片元着色器
OpenGL/OpenGL ES入门: 顶点着色器与片元着色器(OpenGL过渡OpenGL ES