shader实战开发 02第一个着色器

第一个着色器

创建项目

• 进入projectGenerator-vs文件夹并运行projectGenerator.exe。
• 输入项目名称和项目存放位置后点击Generate
• 进入一个新的界面，其中包含一个"Open in IDE"的按钮，单击它，将会打开一个visual studio方案，里面包含两个项目一个是openframeworks库，另一个是你的项目

第一个三角形项目

第一个项目mian.cpp

int main()
{
    ofGLWindowSettings glSettings;//自定义的窗口参数(普通 OpenGL)
    //ofGLESWindowSettings glSettings;//自定义的窗口参数(移动端OpenGL ES)
    
    glSettings.setSize(1024,768);//设置窗口大小
    
    glSettings.windowMode=OF_WINDOW;//设置窗口模式
    //glSetting.windowMode=OF_FULLSCREEN; 全屏模式
    //glSetting.windowMode=OF_GAME_MODE;  游戏模式
    
    glSettings.setGLVersion(4,1);//设置OpenGL版本为4.1
    //glSettings.setGLESVersion(4); 设置OpenGL ES的版本
    
    ofCreateWindow(glSettings);//以自定义参数创建窗口
    ofRunApp(new ofApp());//运行窗口
}

创建三角形网格

• 创建三角形网格需要用到ofMesh类，addVertex()来添加顶点，glm数据库来处理向量，Y轴向下为正方向。

• mian函数中我们创建了一个ofApp对象，ofApp包含了一些来自基类ofBaseApp的函数重载，现在我们只需要关心setup(),draw()就可以。

  ofMesh triangle;
  void ofApp::setup()
  {
      //OpenGL中，像素坐标从屏幕左上角开始，Y轴向下为正方向
      triangle.addVertex(glm::vec3(0.0,0.0,0.0));//左上角原点
      triangle.addVertex(glm::vec3(0.0,768.0,0.0));//左下角
      triangle.addVertex(glm::vec3(1024.0,768.0,0.0));//右下角
  }
  void ofApp::draw()
  {
      triangle.draw();
  }
  

  • 运行结果
    

第一个顶点着色器

• GLSL中的顶点着色器存储在.vert文件中，通常放在与存储图像或网格等资源相同的文件夹中，而不是代码文件所在文件夹中。
• 对于openframeworks应用程序，资源目录是bin\data文件夹，在此处建立一个first_vertex.vert文件
• in 关键字为GLSL特有，用来接收着色器从渲染管线的上一步接收那些数据，也就是接收一个数据
• GLSL数据类型：vec3只是3个浮点值的集合，分别为x,y,z，vec4分别为x,y,z,w

#version 410 //声明使用410版本的GLSL对应于OpenGL4.1
in vec3 position;//接收到一个三分量组成顶点并且存放在position变量中
void main()
{
	gl_Postion = vec4(poistion,1.0);//gl_Postion是GLSL内置变量，此时已经接收一个三分量存转为四分量存入gl_Position
}

归一化坐标

• 因为我们使用不同的屏幕大小，可能会改变我们绘画的物品坐标所以采用归一化设备坐标解决屏幕坐标问题，无论屏幕大小如何，归一化的设备坐标都保持不变。
• OpenGL以屏幕中心为原点坐标系，xy区别取值在[-1,1]
  +

ofMesh triangle;//声明一个网格材质
ofShader shader;//声明一个着色器
void ofApp::setup()
{	
	triangle.addVertex(glm::vec3(-1.0,1.0f,0.0f));
	triangle.addVertex(glm::vec3(-1.0,-1.0f,0.0f));
	triangle.addVertex(glm::vec3(1.0,-1.0f,0.0f));
}
void ofApp::draw()
{
	shader.begin();
	triangle.draw();
	shader.end();
}

• 运行结果还是一样的，只不过这次无论屏幕大小怎么样，都不会有变化
  

第一个片元着色器

• GLSL中的顶点着色器存储在.fram文件中 对于openframeworks应用程序，资源目录是bin\data文件夹，在此处建立一个first_fragment.frag文件
• 片元：是计算机图形学术语，指在计算机屏幕上填充1像素所需的信息
• out关键字：使用out限定符声明的变量由当前着色器写入，然后传给管线后期阶段，也就是输出一个数据。

#version 410
out vec4 outColor;//定义一个输出vec4的变量
void main()
{
	outColor = vec4(1.0,0.0,0.0,1.0);//输出红色，此处的vec4前三个参数当做是颜色的RGB值
}

在项目中使用着色器

• 现在我们就可以使用着色器了
• shader.begin()与shader.end()：为了使用一组特定的着色器来渲染网格，需要在这之前发送一个信号，称之为“绑定”，绑定之后就可以随意对每个网格来发送draw()命令，当完成绘制的着色器后就需要告诉GPU停止当前着色器就用end()来完成。

void ofApp::setup(){
	triangle.addVertex(glm::vec3(-1.0f, 1.0f, 0.0f));
	triangle.addVertex(glm::vec3(-1.0f, -1.0f, 0.0f));
	triangle.addVertex(glm::vec3(1.0f, -1.0f, 0.0f));
	shader.load("first_vertex.vert", "first_fragment.frag");
}
void ofApp::draw(){
	shader.begin();
	triangle.draw();
	shader.end();
}

• 运行结果
  

第二个彩色三角形项目

使用顶点属性添加颜色

• 向网格添加顶点颜色:用于向网格中添加颜色的函数addColor()，调用次函数必须要与定义顶点的顺序保持一致。

void ofApp::setup(){
	triangle.addVertex(glm::vec3(-1.0f, 1.0f, 0.0f));
	triangle.addVertex(glm::vec3(-1.0f, -1.0f, 0.0f));
	triangle.addVertex(glm::vec3(1.0f, -1.0f, 0.0f));

	triangle.addColor(ofFloatColor(1.0f, 0.0f, 0.0f, 1.0f));// 给顶点一添加颜色属性，顺序是和上面的顶点顺序相同的
	triangle.addColor(ofFloatColor(0.0f, 1.0f, 0.0f, 1.0f));// 给顶点二添加颜色属性，顺序是和上面的顶点顺序相同的
	triangle.addColor(ofFloatColor(0.0f, 0.0f, 1.0f, 1.0f));// 给顶点三添加颜色属性，顺序是和上面的顶点顺序相同的
	shader.load("first_vertex.vert", "first_fragment.frag");
}

修改顶点着色器与片元着色器

• 布局限定符:主要功能就是通过属性索引来取到对应的数据
  • layout (location=0) 一般这个位置存放的是数据的位置信息
  • layout(location=1)颜色信息
• 顶点着色器

#version 410
layout (location=0) in vec3 pos; //添加网格位置数据
layout (location=1) in vec4 color;//颜色数据

//此处要注意因为顶点着色器在管线较早阶段，因此片元着色器的新变量需要标记为in
//因为该变量数据来自管线的上一个步骤
//所以片元着色器的in数据变量必须与顶点着色器的out变量一样名称
out vec4 fragCol; //输出变量

void main()
{
	gl_Position=vec4(pos,1.0);
	fragCol=color;//将颜色数据给输出变量
}

• 片元着色器

#version 410

in vec4 fragCol; //取得顶点着色器发来的颜色数据
out vec4 outColor;//输出颜色数据

void main()
{
	outColor = fragCol;//将颜色进行输出
}

• 运行结果
  
• fragment interpolation：这和我们想象的不一样，应该是三顶点处颜色不一样，为什么会变成一种彩色的感觉，这是因为在这个过程中GPU使用这3个点生成在屏幕上渲染实现三角形需要的所有片元，由于这些片元位于顶点之间，因此GPU不是只取一个点，导致GPU将这些混合起来所以混合出来的结果就是，越靠近顶点的片元，就越接近我们定义的颜色数据，我们把这个过程称为片元插值

统一变量

• 前面我们已经通过定义顶点来输出一个纯色的三角形，可是这样会很麻烦，我们现在定义一个统一变量来实现将数据传入到管线，从外部来改变一个统一的颜色。
• 统一变量：uniform在网格中的每个顶点和片元保持不变，与in和out不一样（in和out变量取决于从管线的前一个阶段发送的数据）统一变量是相同的，无论从那读取不进行任何插值。
• setUniform():函数以4f结尾就是要写入统一变量vec4,如果是想存储一个vec3就用setUniform3f(),如果需要整数存储就是setUniform3i(),setUnifrom函数永远在shader.begin()之后。
• 顶点着色器：没什么变化，留有一个顶点位置数据信息就行

#version 410
layout (location=0) in vec3 pos;
void main()
{
	gl_Position=vec4(pos,1.0);

}

• 片元着色器

#version 410
//如果这是in vec4 fargCol;的话顶点着色器传来的数据，会受到插值影响
uniform vec4 fragCol;// 统一变量，每个片元的值都是一样不变，可以在代码中自由设置
out vec4 outColor;

void main()
{
	outColor = fragCol;
}

• 渲染代码

void ofApp::draw(){
	shader.begin();
	//直接给fragCol传输值,对于不同的数据类型,可以使用不同的 setUniform 来进行传递,这里我们定义的vec4就用4f
	shader.setUniform4f("fragCol", glm::vec4(0, 1, 1, 1));
	triangle.draw();
	shader.end();
}

• 运行结果