从0开始的OpenGL学习-显示不同的纹理

2023-10-12 09:48:58

本文主要解决2个问题：

1、不同格式的图片，如何作为纹理使用（png、bmp）？
2、两张纹理如何进行融合操作，并且通过融合因子去调整显示效果？

一、不同格式的图片，如何作为纹理使用（png、bmp）？

1.1 png格式

不管三七二十一，直接把图片替换掉，看看效果。

直接把图替换为png图片

嗯？这诡异的显示是啥？

第一反应，某些参数设置出错，尤其是glTexImage2D函数。直接瞄准参数GL_RGB，png图片有度的信息，所以格式应该设置为GL_RGBA才对。想明白了，马上修改试试。

修改成GL_RGBA之后

不出所料！

1.2 bmp格式

还是那样，先直接改文件看效果。

换成bmp格式的文件

不对啊，bmp格式不是有透明通道吗？怎么回事？来检查一下图片的属性。

图片属性

哦，原来位深度只有24，也就是只有RGB三个通道了。把格式换回GL_RGB应该没问题了。

换回GL_RGB格式之后的显示

对的，我们分析地没错。那么问题来了，难道我们需要一张张查看图片的属性来设置这个格式吗？这也太复杂了，或者根据图片的后缀确定用什么参数。要是相同后缀的图片有不同格式咋办？

4通道bmp图片

没有开玩笑哦，这样的图片还是很常见的。

仔细看看代码，原来我们在加载图片的时候已经读取出通道数量了，保存在nrChannels变量中。这样就方便多了！我们完全可以根据通道数量来设置格式。简单点，直接用一行代码搞定：

GLint format = nrChannels == 3 ? GL_RGB : GL_RGBA;

然后在调用的时候就可以用format变量了。

glTexImage2D(GL_TEXTURE_2D, 0, format, width, height, 0, format, GL_UNSIGNED_BYTE, data);

效果图：

效果图

工程源码：http://pan.baidu.com/s/1mh6oQMW

二、两张纹理如何进行融合操作，并且通过融合因子去调整显示效果？

2.1 纹理单元

细心的你可能早就发现了，我们之前的使用纹理采样的时候，并没有对片元着色器中的采样器进行赋值，但显示的效果确实正确的。为什么呢？

这里就要引出一个纹理单元的概念。什么是纹理单元，说实话，笔者也没有找到确切的定义，只知道纹理是通过纹理单元这个东西绑定到OpenGL环境中的。根据笔者的理解，纹理单元应该是OpenGL中内置的关于纹理的一些配置，OpenGL会根据这些配置来操作纹理。在OpenGL中，纹理单元的数量至少有16个，我们可以通过GL_TEXTURE0...GL_TEXTURE15来激活使用。默认激活的是GL_TEXTURE0，所以我们之前的操作都是针对GL_TEXTURE0的。

让我们来激活另一个纹理单元并且对它进行一些操作。

首先，我们用glActiveTexture(GL_TEXTURE1)来激活纹理单元1，使之可操作。

然后，将一个新的纹理ID绑定到这个纹理对象上，我们不妨将这个新ID定义成texture2，调用glBindTexture(GL_TEXTURE_2D,texture2)进行绑定。

接下来，如同之前一样，设置好环绕和过滤方式。

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

再接着，我们把图片加载进去，绑定到当前的纹理单元上：

//加载图片
stbi_set_flip_vertically_on_load(true);
unsigned char* data2 = stbi_load("awesomeface.png", &width, &height, &nrChannels, 0);
if (data2) {
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, data2);
    glGenerateMipmap(GL_TEXTURE_2D);
}
else
    std::cout << "无法加载问题，请检查代码或资源是否有误。" << std::endl;
stbi_image_free(data2);

最后，非常重要的一个步骤是，我们需要告诉OpenGL着色器采样器和纹理单元之间的对应关系。

//告诉OpenGL哪个采样器属于哪个纹理单元
shader.use();  //着色器要使用之后才能操作
shader.setInt("texture1", 0);  //采样器1对应编号0的纹理单元
shader.setInt("texture2", 1);  //采样器2对应编号1的纹理单元

我们的片元着色器中，也需要做相应的改动：

uniform sampler2D texture1;
uniform sampler2D texture2;

void main()
{
    FragColor = mix(texture(texture1, TexCoord), texture(texture2, TexCoord), 0.2);

}

mix函数是对某个点的纹理进行混合运算，0.2表示该点的颜色20%来自采样器2,80%来自采样器1。好了，编译运行我们的程序。

混合效果

效果很赞，但是还没达到我们想要的状态。别忘了，我们还要通过融合因子对其进行控制！

2.2 融合因子控制

直觉上的，我们需要三步走：

第一步：定义一个全局的融合因子
第二步：点击上下箭头的时候设置这个值
第三步：设置这个融合因子变量值

第一步：定义一个全局的融合因子

float factor = 0.2f;

第二步：点击上下箭头的时候设置这个值

查找上箭头和下箭头的按钮值：GLFW_KEY_UP和GLFW_KEY_DOWN，在处理输入的函数(processInput)中，添加对其的处理。每次按向上箭头时融合因子增加0.01（最大为1.0），每次按向下箭头时融合因子减少0.01,（最小为0.0）。

if (glfwGetKey(window, GLFW_KEY_UP) == GLFW_PRESS) {
    factor += 0.01f;
    if (factor > 1.0f)
        factor = 1.0f;
}

if (glfwGetKey(window, GLFW_KEY_DOWN) == GLFW_PRESS) {
    factor -= 0.01f;
    if (factor < 0.0f)
        factor = 0.0f;
}

第三步：设置这个融合因子变量值

在使用了着色器之后，设置其值。

shader.setFloat("factor", factor);

好了，非常简单，但是一定要自己实现才行。编译运行，这下我们可以通过按钮来控制了！（没法放视频，就不截图了。）

整个工程的源码可以在这里找到：http://pan.baidu.com/s/1eRWj7kY

参考资料：
www.learningopengl.com（非常好的网站，建议学习）

作者：闪电的蓝熊猫
链接：https://www.jianshu.com/p/cffca3e3f872
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

码农公寓

一、不同格式的图片，如何作为纹理使用（png、bmp）？

二、两张纹理如何进行融合操作，并且通过融合因子去调整显示效果？

相关文章