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();
}
  • 运行结果
    在这里插入图片描述
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 我可以提供基于HLSL的PBR着色器的示例代码: // HLSL Shader // PBR Shader float4 PS_PBR(VertexShaderOutput input) : SV_Target { // Albedo Color float3 albedo = tex2D(albedoMap, input.uv).rgb; // Normal Map float3 normal = tex2D(normalMap, input.uv).rgb * 2.0 - 1.0; // Metallic Map float metallic = tex2D(metallicMap, input.uv).r; // Roughness Map float roughness = tex2D(roughnessMap, input.uv).r; // Ambient Occlusion Map float ao = tex2D(aoMap, input.uv).r; // Convert normal map to world space normal = mul(normal, (float3x3)input.tangentToWorld); // Calculate PBR float4 pbr = CalculatePBR(albedo, normal, metallic, roughness, ao); return pbr; } ### 回答2: PBR(PBR, Physically Based Rendering)是一种基于物理原理的渲染技术,可以实现更加逼真的光照效果。在编写PBR着色器时,我们可以使用HLSL(高级着色语言)来描述着色器的计算逻辑。 首先,我们需要定义一些常量和变量,用来存储PBR着色器中的参数和数据。常见的PBR参数包括:环境光照强度、漫反射光照强度、粗糙度、金属度等。在HLSL中,我们可以使用常量缓冲区来定义这些参数。 接下来,我们需要在像素着色器中进行PBR计算。像素着色器可以接收几个输入参数,包括:法线向量、视线向量和光线向量。我们可以使用这些向量来计算当前像素的PBR光照结果。 在进行计算之前,我们需要根据法线贴图获得每个像素的法线向量。接着,我们可以计算出来自每个光源的直接光照贡献。 PBR光照模型通常包含两个部分:漫反射和镜面反射。对于漫反射,我们可以使用标准的Lambertian光照模型。对于镜面反射,我们可以使用Cook-Torrance BRDF模型。 在计算完直接光照贡献后,我们可以结合环境光照来计算最终的颜色值。在这个过程中,我们使用漫反射和镜面反射的结果加权求和。 最后,根据计算出的颜色值,我们可以在输出的像素中返回最终的颜色。这样,我们就完成了一个基本的PBR着色器。 需要注意的是,以上只是PBR着色器的基本框架,在实际应用中,我们还需要添加其他优化和特性,如预过滤环境贴图、BRDF近似等。 总结起来,通过使用HLSL编写PBR着色器,我们可以实现基于物理原理的光照渲染效果。这种着色器由漫反射和镜面反射组成,并利用各种参数和计算公式来模拟光照对物体的影响,从而实现更加逼真的渲染效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值