OpenGL工程实现实用教程4---freeglut库图片显示

简易方法

使用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