OpenGL学习笔记 第二周:2D

几个概念

  • glutInitWindowPosition(int x, int y) // 定义窗口位置

  • glViewport(GLint x, GLint y, GLsizei width, GLsizei height) // 定义视口大小

  • glutInitWindowSize(int width, int height) // 定义窗口大小

1
2
3
4
5
6
// 截取图像大小
void APIENTRY gluOrtho2D (
GLdouble left,
GLdouble right,
GLdouble bottom,
GLdouble top);
  • 窗口可以近似理解为我们电脑或手机的屏幕
  • 截取图像是指一个矩形,只有在其中的UI元素才会被截取用于显示
  • 截图不会适配窗口,不能在窗口中直接显示,而是需要在视口中拉伸并显示。视口则是截图在窗口中显示的区域,即,图像只在视口中显示。视口用于把截图和窗口联系起来。
  • glViewport 定义截取的图像在窗口的哪一部分显示。(x, y)是视口左下角在窗口里位置的坐标;(0, 0)是窗口左下角;w、h是视口的宽和高。截图就在这一部分显示。
  • 也就是说截图可以自定显示在窗口的任意位置,我们可以按照(800,600)的规格来制作UI,但是可以只显示在屏幕的右上角的位置,而且可以伸缩大小。

2D和3D摄像机的转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
void Camera::SwitchTo3D()
{
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(50.0f, mViewportWidth / mViewportHeight, 0.1f, 1000.0f);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
}

void Camera::SwitchTo2D()
{
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(-mViewportWidth / 2, mViewportWidth / 2, -mViewportHeight / 2, mViewportHeight / 2);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
}

使用PNG图片和alpha测试、alpha混合

  • 利用SOIL库来创建texture

  • 图片的使用本质还是个QUAD使用了texture,与BMP没区别

  • alpha test:

1
2
3
   glEnable(GL_ALPHA_TEST);
// glAlphaFunc配合GL_ALPHA_TEST使用,大于指定值的像素就显示
glAlphaFunc(GL_GREATER, 0.0f);
  • alphe blend:
1
2
3
4
5
   glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
...
glEnd();
glDisable(GL_BLEND);

image

  • 图中清晰的说明了glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)的含义,在做混合时,如果SRC的alpha是1,那么得到的颜色就完全是SRC的。随着SRC alpha的变小,得到的颜色值趋近于DST的颜色。
  • 使用alpha blend可以有效的处理图片边际的锯齿,效果非常的明显。
# OpenGL
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×