C++和OpenGL实现3D游戏编程【连载17】—

C++和OpenGL实现3D游戏编程【连载17】——着色器进阶

欢迎来到zhooyu的专栏。
主页网址：【zhooyu】
专栏网址：【C++和OpenGL实现3D游戏编程】

🌟🌟🌟这里将通过一个OpenGL实现3D游戏编程实例教程，带大家深入学习OpenGL知识。知识无穷而人力有穷，希望能对您有所帮助。

🌟🌟🌟该教程为系列教程，每一步都有详细的教学和实例，推荐大家通过🔥C++和OpenGL实现3D游戏编程【目录】系统性的了解开发过程，了解怎样一步一步从简单入手，借助C++和OpenGL实现强大的3D效果。

🌟🌟🌟同时您可以在QQ群（群号：739903792）中与大家进行沟通交流，共同解决编程过程中的困惑。

在这里插入图片描述
着色器纹理操作基础演示：

着色器纹理操作基础

🔥C++和OpenGL实现3D游戏编程【目录】

1、本节要实现的内容

在前面着色器初步一节我们了解了着色器的一些初步知识，通过顶点着色器和片段着色器显示出了一个彩色的立方体。我们这节课就来了解一些在着色器中显示纹理等一系列实用操作，同时了解一些进阶的图像渲染技术，比如图像的灰度化处理，像游戏中灵魂状态下世界进行灰度化处理后的效果。使用GLSL渲染纹理是一种非常有用的技术，可以实现高效的图形处理和渲染，并且可以根据具体的应用场景和需求进行更复杂的渲染操作。

在这里插入图片描述

2、着色器显示纹理

我们前面学习了着色器显示立方体方法，但是还没有通过着色器给立方体添加图片纹理，由于纹理在游戏编程中使用非常频繁，而且着色器中对纹理的处理有非常大的扩展性和可操作性，包括各种对纹理图片的高级渲染方法，因此紧接着我们需要了解着色器显示纹理的方法。我们此前已经学习了VBO、VAO和EBO模式，以及着色器的初步知识，以上知识这里都会用到，如果有不了解的可以翻看一下以前对应章节的知识，我们这节主要了解一下着色器显示纹理的方法以及与传统的立即渲染默认显示纹理方法的相同与不同之处，需要注意的一些问题以及对着色器的理解。那我们来看一下着色器是操作并显示纹理的过程。

在这里插入图片描述

3、纹理与颜色的混合

首先，我们看一下没有添加纹理，只是使用自定义定点颜色的正方形显示的颜色，我们直接在片段着色器中将最终输出颜色变量FragColor设置为输入的顶点颜色，就可以得到一个彩色的正方形。

在这里插入图片描述

我们现在改变一下片段着色器最终显示颜色的内容，使用mix函数进行颜色的线性混合，并可以手动添加线性混合因子的数值。

在这里插入图片描述
我们可以看到，纹理和原本颜色进行了融合，形成了非常自然过渡的颜色效果。

4、纹理和纹理的融合

既然可以进行颜色和纹理的融合，那肯定也可以进行纹理和纹理的融合，本质上就是对纹理颜色使用mix进行融合。那么，我们首先需要在启用两个纹理单元（GL_TEXTURE0和GL_TEXTURE1），并在各自的纹理单元中绑定不同的纹理，这里我们绑定了texExampleSimpleBox和texExampleSmile两个纹理到各自的纹理单元。然后，通过glUniform1i函数将纹理单元编号传递给着色器，交给着色器处理后续的融合效果。

在这里插入图片描述

5、着色器纹理渲染实例——纹理灰度渲染

我们刚刚介绍了着色器的一些原理和功能实现，现在我们来做一个简单又实用的功能。当我以前玩游戏的时候，当人物角色死亡后，我们就会立即处于灵魂状态，然后我们在灵魂状态下会经过很长一段路途，在此过程中我们看到的世界所有都是灰白色的，就好像只能够看到整个世界的轮廓一样，整个世界都失去了原本的颜色，变成了黑白颜色。当时我在玩游戏的时候就感觉这个功能很不错，让人能明显的感受到灵魂状态与现实美丽世界的区别，那么这个功能要怎么能实现？答案来了现在就可以在着色器中实现，而且是很容易的实现。那么我们现用一个实例来表现一下它的效果。下面是一张彩色的图片纹理。我们先将它用着色器整个的输出到屏幕上。显示的效果如下：

在这里插入图片描述

我们刚刚讲过，我们通过着色器的片段着色器，可以控制整个模型输出的最终颜色。如果我们在模型的片段着色器中不对颜色进行灰度化的处理，那么最终显示出来的就是我们漂亮的世界，拥有各种漂亮的纹理颜色。那么我们现在需要做的就是对各种漂亮的纹理颜色进行灰度化处理。也就是在片段着色器中将输入的颜色，手工转化成灰白颜色，将灰白颜色作为输出变量即可。那么我们来看一下将一个颜色转换成灰白颜色有多么的简单。

彩色图像转化为灰度图像的过程称之为图像灰度化处理。对于灰度图像处理一般有四种方法：平均值法、加权平均值法、最大值、分量法。我们这里采用一种简单，效果又比较柔和的平均值方法，就是将原来输入的颜色RGB分量相加的和除以3，就能简单的将彩色颜色转换成为了灰度颜色。一个公式就搞定了！现在我们来看一下最终的灰度图效果。我们可以看到灰度颜色的效果非常完美。

在这里插入图片描述

当然我们现在实例中只有一个模型的着色体。当我们后期建的模型越来越多，我们需要灵魂状态的灰度界面时，我们就可以通过Uniform变量传递着色器一个是否进行灰白显示的标志，这样我们游戏里头所有的的模型都变成了灰白颜色，达到了我们所需要的灵魂状态灰度效果。等我们后期整个三维世界创建差不多的时候，我们可以试验一下它的效果。

6、着色器纹理坐标处理

有一点要注意，顶点着色器中处理的大多都是我们用户输入的顶点信息。就比如说你在自定义正方形数组时，共传递了4个顶点数据。那顶点着色器中我们主要的就是对这4个顶点的数据进行编程，我们可以对顶点的数据直接进行操作。而片段着色器的操作对象就比顶点着色器要多得多，片段着色器中可以控制整个正方形的颜色，不仅仅是4个顶点的颜色，我们可以对整个正方形的颜色进行处理，就比如说我们在下面这个例子中，将整个纹理坐标进行划分成3份，第1部分显示纹理原本的颜色，中间部分显示出纹理和原本顶点颜色的融合结果，最后一部分我们显示经过灰度化处理的纹理颜色。通过这个示例，我们明显可以感觉到，片段着色器对整个纹理输出的操作方式。

在这里插入图片描述