简易方法
使用OpenGL进行图片显示有多种方法,首先介绍最简单的一种,代码如下:
#include <gl/freeglut.h>
#include <opencv2/opencv.hpp>
using namespace cv;
Mat imgbgr;
Mat imgbgra;
void display(void)
{
//绘图,GL_BGRA_EXT表示输入图像格式为BGRA,也可是GL_BGR_EXT,则表示输入图像为BGR
//GL_UNSIGNED_BYTE表示数据区格式为unsigned byte
glDrawPixels(imgbgra.cols, imgbgra.rows, GL_BGRA_EXT, GL_UNSIGNED_BYTE, imgbgra.data);
//填充缓冲区表面
glFlush();
//缓冲区翻转显示图像
glutSwapBuffers();
}
int main(int argc, char* argv[])
{
imgbgr = imread("1.jpg");
cvtColor(imgbgr, imgbgra, COLOR_BGR2BGRA);
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA);
glutInitWindowPosition(0, 0);
glutInitWindowSize(imgbgr.cols, imgbgr.rows);
glutCreateWindow("imgshow");
glutDisplayFunc(&display);
glutMainLoop();//这里进入了消息循环,也可以直接注释掉本句和上一句代码,然后写一个while(true)一直去绘图,但会导致界面卡死,在多线程中这样操作应该比较靠谱
imgbgr.release();
imgbgra.release();
return 0;
}
该方法优点明显,简单易懂。不过缺点也明显,不能调整位置和大小,给多少画多少,超出屏幕则不画。
2D纹理贴图方法
生成2D纹理
下面这种方法的自由度则更高。首先,使用glTexImage2D根据图像数据生成一个2D纹理,函数原型如下:
API void glTexImage2D(GLenum target, GLint level, GLint internalFormat, GLsizei width, GLsizei height, GLint border, GLenum format, GLenum type, const GLvoid * data);
target:指定设置的纹理目标,必须是GL_TEXTURE_2D, GL_PROXY_TEXTURE_2D等参数
level:指定纹理等级,0代表原始纹理,其余等级对应Mipmap纹理等级
internalFormat:指定OpenGL存储纹理的格式,我们读取的图片格式包含RGBA颜色,因此这里也是用RGBA颜色
width\height:指定存储的纹理大小
border:参数为历史遗留参数,设置为0
最后三个参数指定原始图片数据的格式、数据类型以及数据的内存地址。
设置纹理插值方式
随后,使用glTexParameterf设置纹理的放大和缩小插值方式:
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);//线性插值
启用2D纹理
glEnable(GL_TEXTURE_2D);
绘制纹理
将纹理映射到四边形顶点上,绘制出来
//将纹理映射到四边形上
glBegin(GL_QUADS);
//纹理的坐标和四边形顶点的对应,可以通过设置四边形的位置调整图像在窗体的位置
glTexCoord2f(0.0, 0.0); glVertex3f(-1.0, 1.0, 0.0);
glTexCoord2f(0.0, 1.0); glVertex3f(-1.0, -1.0, 0.0);
glTexCoord2f(1.0, 1.0); glVertex3f(1.0, -1.0, 0.0);
glTexCoord2f(1.0, 0.0); glVertex3f(1.0, 1.0, 0.0);
glEnd();
glFlush();
glutSwapBuffers();
全部代码如下:
#include<gl/glut.h>
#include <opencv2/opencv.hpp>
using namespace cv;
Mat imgbgr;
Mat imgbgra;
void myInit(void)
{
//根据图像数据生成一个2D纹理
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, imgbgra.cols, imgbgra.rows, 0, GL_RGBA, GL_UNSIGNED_BYTE, imgbgra.data);
//设置纹理参数,放大和缩小采取的插值方式为线性插值
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
//启用一个2D纹理
glEnable(GL_TEXTURE_2D);
}
void myDisplay(void)
{
//glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
//将纹理映射到四边形上
glBegin(GL_QUADS);
//纹理的坐标和四边形顶点的对应,可以通过设置四边形的位置调整图像在窗体的位置
glTexCoord2f(0.0, 0.0); glVertex3f(-1.0, 1.0, 0.0);
glTexCoord2f(0.0, 1.0); glVertex3f(-1.0, -1.0, 0.0);
glTexCoord2f(1.0, 1.0); glVertex3f(1.0, -1.0, 0.0);
glTexCoord2f(1.0, 0.0); glVertex3f(1.0, 1.0, 0.0);
glEnd();
glFlush();
glutSwapBuffers();
}
int main(int argc, char** argv)
{
imgbgr = imread("1.jpg");
cvtColor(imgbgr, imgbgra, COLOR_BGR2RGBA);
//初始化
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB);
glutInitWindowSize(720, 720);
glutInitWindowPosition(200, 200);
//创建窗口
glutCreateWindow("imgshow");
//绘制与显示
myInit();
glutDisplayFunc(myDisplay);
glutMainLoop();
return 0;
}
2D纹理贴图方法(带透明度)
在一些场景中(比如做不规则的按钮UI这一场景),要求贴图的时候需要带有透明度,这个时候可以通过启用混合模型来实现,该实现就是在绘图之前加入如下代码:
//启用混合
glEnable(GL_BLEND);
//计算透明色
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
当然,图像原本也需要是带透明度信息的,因此在读取图像时需要保证图像带透明信息(一般为png格式),另外如果使用OpenCV进行读取的话需要设置读取的格式如下:
imgbgra = imread("1.png", IMREAD_UNCHANGED);
全部代码如下:
#include <gl/freeglut.h>
#include <opencv2/opencv.hpp>
using namespace cv;
Mat imgbgr;
Mat imgbgra;
void myInit(void)
{
//根据图像数据生成一个2D纹理
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, imgbgra.cols, imgbgra.rows, 0, GL_RGBA, GL_UNSIGNED_BYTE, imgbgra.data);
//设置纹理参数,放大和缩小采取的插值方式为线性插值
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
}
void myDisplay(void)
{
glClear(GL_COLOR_BUFFER_BIT);//清空颜色缓冲池
glClearColor(0.0f,0.0f,1.0f,1.0f);
//启用混合
glEnable(GL_BLEND);
//计算透明色
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
//启用一个2D纹理
glEnable(GL_TEXTURE_2D);
//将纹理映射到四边形上
glBegin(GL_QUADS);
//纹理的坐标和四边形顶点的对应,可以通过设置四边形的位置调整图像在窗体的位置
glTexCoord2f(0.0, 0.0); glVertex3f(-1.0, 1.0, 0.0);
glTexCoord2f(0.0, 1.0); glVertex3f(-1.0, -1.0, 0.0);
glTexCoord2f(1.0, 1.0); glVertex3f(1.0, -1.0, 0.0);
glTexCoord2f(1.0, 0.0); glVertex3f(1.0, 1.0, 0.0);
glEnd();
//关闭融合模式和2D纹理
glDisable(GL_BLEND);
glDisable(GL_TEXTURE_2D);
glFlush();
glutSwapBuffers();
}
int main(int argc, char** argv)
{
imgbgra = imread("1.png", IMREAD_UNCHANGED);
//cvtColor(imgbgr, imgbgra, COLOR_BGR2RGBA);
//初始化
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB);
glutInitWindowSize(720, 720);
glutInitWindowPosition(200, 200);
//创建窗口
glutCreateWindow("imgshow");
glClearColor(0.0f, 0.0f, 1.0f, 1.0f);
//绘制与显示
myInit();
glutDisplayFunc(myDisplay);
glutMainLoop();
return 0;
}
参考文章:https://github.com/wangdingqiao/noteForOpenGL/tree/master/textures