本文主要解决2个问题:
- 不同格式的图片,如何作为纹理使用(png、bmp)?
- 两张纹理如何进行融合操作,并且通过融合因子去调整显示效果?
一、不同格式的图片,如何作为纹理使用(png、bmp)?
1.1 png格式
不管三七二十一,直接把图片替换掉,看看效果。
嗯?这诡异的显示是啥?
第一反应,某些参数设置出错,尤其是glTexImage2D函数。直接瞄准参数GL_RGB,png图片有度的信息,所以格式应该设置为GL_RGBA才对。想明白了,马上修改试试。
不出所料!
1.2 bmp格式
还是那样,先直接改文件看效果
不对啊,bmp格式不是有透明通道吗?怎么回事?来检查一下图片的属性。
哦,原来位深度只有24,也就是只有RGB三个通道了。把格式换回GL_RGB应该没问题了。
对的,我们分析地没错。那么问题来了,难道我们需要一张张查看图片的属性来设置这个格式吗?这也太复杂了,或者根据图片的后缀确定用什么参数。要是相同后缀的图片有不同格式咋办?
没有开玩笑哦,这样的图片还是很常见的。
仔细看看代码,原来我们在加载图片的时候已经读取出通道数量了,保存在nrChannels变量中。这样就方便多了!我们完全可以根据通道数量来设置格式。简单点,直接用一行代码搞定:
GLint format = nrChannels == 3 ? GL_RGB : GL_RGBA;
然后在调用的时候就可以用format变量了。
glTexImage2D(GL_TEXTURE_2D, 0, format, width, height, 0, format, GL_UNSIGNED_BYTE, data);
效果图:
参考工程源码:
https://gitee.com/pengrui2009/open-gl-study/blob/master/chapter6/square_6_1.cc
二、两张纹理如何进行融合操作,并且通过融合因子去调整显示效果?
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);
好了,非常简单,但是一定要自己实现才行。编译运行,这下我们可以通过按钮来控制了!(没法放视频,就不截图了。)
本章节工程源码:
https://gitee.com/pengrui2009/open-gl-study/tree/master/chapter6
原文链接:
作者:闪电的蓝熊猫
链接:https://www.jianshu.com/p/cffca3e3f872
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。