本文是关于OpenGL ES的系统性学习过程，记录了自己在学习OpenGL ES时的收获。
这篇文章的作用是学习的OpenGL ES 中的混合技术。物体透明技术通常被叫做混合(Blending)。
环境是Xcode8.1+OpenGL ES 2.0
目前代码已经放到github上面，OpenGL ES入门13-混合
欢迎关注我的 OpenGL ES入门专题
概述
混合技术在某些情况下特别有用。比如在iOS中做音乐播放器的时候，我们希望歌词当前的播放进度与整句歌词具有明显的颜色区分。我们可以这样做：
@interface MVMusicView : UILabel
@property (nonatomic, assign) CGFloat progress;
@end
@implementation MVMusicView
- (void)setProgress:(CGFloat)progress
{
_progress = progress;
[self setNeedsDisplay];
}
- (void)drawRect:(CGRect)rect
{
[super drawRect:rect];
[[UIColor greenColor] setFill];
CGRect lyricRect = CGRectMake(0, 0, self.frame.size.width * _progress, self.frame.size.height);
UIRectFillUsingBlendMode(lyricRect, kCGBlendModeSourceIn);
}
@end
Blend效果：
效果.png
在OpenGL ES 中物体透明技术通常被叫做混合(Blending)。透明是非纯色而是混合色，这种颜色来自于不同浓度的自身颜色和它后面的物体颜色。一个物体的透明度，被定义为它的颜色的alpha值，alpha颜色值是一个颜色向量的第四个元素。
实现效果
接下来我们用OpenGL ES 实现类似的效果，效果图如下所示：
效果图.png
基础知识
片段着色器运行完成并且所有的测试都通过以后，混合方程才能自由执行片段的颜色输出，当前它在颜色缓冲中（前面片段的颜色在当前片段之前储存）。源和目标颜色会自动被OpenGL设置，而源和目标因子可以让我们自由设置。
- 开启混合
glEnable(GL_BLEND);
- 关闭混合
glDisable(GL_BLEND);
- 混合因子计算公式
result = source * Fsource + destination * Fdestination
参数 source：源颜色向量。这是来自纹理的本来的颜色向量。
参数 destination：目标颜色向量。这是储存在颜色缓冲中当前位置的颜色向量。
参数 Fsource：源因子。设置了对源颜色的alpha值影响。
参数 Fdestination：目标因子。设置了对目标颜色的alpha影响。
- 混合因子设置函数
void glBlendFunc (GLenum sfactor, GLenum dfactor);
- 源（source）和目标（destination）因子相关设置选项：
| 选项 | 值 |
|---|---|
| GL_ZERO | 0 |
| GL_ONE | 1 |
| GL_SRC_COLOR | 源颜色向量 |
| GL_ONE_MINUS_SRC_COLOR | 1 − 源颜色向量 |
| GL_SRC_ALPHA | 源的alpha值 |
| GL_ONE_MINUS_SRC_ALPHA | 1 − 源的alpha值 |
| GL_DST_ALPHA | 目标的alpha值 |
| GL_ONE_MINUS_DST_ALPHA | 1 − 目标的alpha值 |
实现过程
- 加载png图片。在这里主要是用到了两张png的纹理，加载的时候分别加载，并生成纹理对象。
- (void)setupTexure
{
NSString *path = [[NSBundle mainBundle] pathForResource:@"text" ofType:@"png"];
pic_data pngData;
read_png_file(path.UTF8String, &pngData);
// 创建纹理
if (pngData.flag > 0) {
_texture = createTexture2D(GL_RGBA, pngData.width, pngData.height, pngData.rgba);
}else {
_texture = createTexture2D(GL_RGB, pngData.width, pngData.height, pngData.rgba);
}
if (pngData.rgba) {
free(pngData.rgba);
pngData.rgba = NULL;
}
}
- (void)setupTexure1
{
NSString *path = [[NSBundle mainBundle] pathForResource:@"wood" ofType:@"png"];
pic_data pngData;
read_png_file(path.UTF8String, &pngData);
// 创建纹理
if (pngData.flag > 0) {
_texture1 = createTexture2D(GL_RGBA, pngData.width, pngData.height, pngData.rgba);
}else {
_texture1 = createTexture2D(GL_RGB, pngData.width, pngData.height, pngData.rgba);
}
if (pngData.rgba) {
free(pngData.rgba);
pngData.rgba = NULL;
}
}
- 开启混合测试。这个测试主要是测试开启混合以及相应的混合因子对结果的影响。
- (void)render
{
glClearColor(1.0, 1.0, 1.0, 1.0);
glClear(GL_COLOR_BUFFER_BIT);
glViewport(0, 0, self.frame.size.width, self.frame.size.height);
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
// 激活纹理
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, _texture);
glUniform1i(glGetUniformLocation(_program, "image"), 0);
glDrawArrays(GL_TRIANGLES, 0, _vertCount);
//将指定 renderbuffer 呈现在屏幕上，在这里我们指定的是前面已经绑定为当前 renderbuffer 的那个，在 renderbuffer 可以被呈现之前，必须调用renderbufferStorage:fromDrawable: 为之分配存储空间。
[_context presentRenderbuffer:GL_RENDERBUFFER];
}
顶点着色器
attribute vec3 position;
attribute vec2 texcoord;
varying vec2 vTexcoord;
void main()
{
gl_Position = vec4(position, 1.0);
vTexcoord = texcoord;
}
片源着色器
precision mediump float;
uniform sampler2D image;
uniform sampler2D image1;
varying vec2 vTexcoord;
void main()
{
gl_FragColor = texture2D(image, vTexcoord);
}
效果图
开启混合.png
- 两张图片进行混合测试。一张图片先渲染到帧缓存中，然后再渲染另一张，并与帧缓存中的图像混合。
- (void)render
{
glClearColor(1.0, 1.0, 1.0, 1.0);
glClear(GL_COLOR_BUFFER_BIT);
glViewport(0, 0, self.frame.size.width, self.frame.size.height);
// 第一个纹理关闭混合
glDisable(GL_BLEND);
// 激活纹理
glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_2D, _texture1);
glUniform1i(glGetUniformLocation(_program, "image"), 1);
glDrawArrays(GL_TRIANGLES, 0, _vertCount);
// 渲染的时候开启混合
glEnable(GL_BLEND);
glBlendFunc(GL_ONE, GL_ONE);
// 激活纹理
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, _texture);
glUniform1i(glGetUniformLocation(_program, "image"), 0);
glDrawArrays(GL_TRIANGLES, 0, _vertCount);
//将指定 renderbuffer 呈现在屏幕上，在这里我们指定的是前面已经绑定为当前 renderbuffer 的那个，在 renderbuffer 可以被呈现之前，必须调用renderbufferStorage:fromDrawable: 为之分配存储空间。
[_context presentRenderbuffer:GL_RENDERBUFFER];
}
顶点着色器
attribute vec3 position;
attribute vec2 texcoord;
varying vec2 vTexcoord;
void main()
{
gl_Position = vec4(position, 1.0);
vTexcoord = texcoord;
}
片源着色器
precision mediump float;
uniform sampler2D image;
uniform sampler2D image1;
varying vec2 vTexcoord;
void main()
{
gl_FragColor = texture2D(image, vTexcoord);
}
效果图：
两张纹理混合.png
- 歌词显示效果测试。自己通过编写着色器进行相关混合。在这里由于文字的渲染比较复杂（如果想渲染文字可以使用FreeType2，它是一个免费、开源、可移植且高质量的字体引擎，被广泛使用着。），因此用透明的png字体图代替文字的渲染，即工程中的
text.png。
- (void)render
{
glClearColor(1.0, 1.0, 1.0, 1.0);
glClear(GL_COLOR_BUFFER_BIT);
glViewport(0, 0, self.frame.size.width, self.frame.size.height);
// 激活纹理
glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_2D, _texture1);
glUniform1i(glGetUniformLocation(_program, "image"), 1);
// 激活纹理
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, _texture);
glUniform1i(glGetUniformLocation(_program, "image1"), 0);
glDrawArrays(GL_TRIANGLES, 0, _vertCount);
//将指定 renderbuffer 呈现在屏幕上，在这里我们指定的是前面已经绑定为当前 renderbuffer 的那个，在 renderbuffer 可以被呈现之前，必须调用renderbufferStorage:fromDrawable: 为之分配存储空间。
[_context presentRenderbuffer:GL_RENDERBUFFER];
}
顶点着色器
attribute vec3 position;
attribute vec2 texcoord;
varying vec2 vTexcoord;
void main()
{
gl_Position = vec4(position, 1.0);
vTexcoord = texcoord;
}
片源着色器。利用纹理坐标，使纹理坐标s轴0.43左边的为红色字体，右边的保持原来的颜色。
precision mediump float;
uniform sampler2D image;
uniform sampler2D image1;
varying vec2 vTexcoord;
void main()
{
vec4 des = vec4(1.0, 0.0, 0.0, 1.0);
vec4 src = texture2D(image1, vTexcoord);
vec4 bld;
if (vTexcoord.x <= 0.43) {
bld = vec4(vec3(des), src.a);
}else {
bld = src;
}
gl_FragColor = bld * bld.a + vec4(1.0) * (1.0 - bld.a);
}
效果图：
效果图.png
常见问题
- 由于Xcode在打包的时候会对png图片进行优化处理，因此我们在使用libpng读取读片的时候可能出现以下错误：
libpng error: CgBI: unhandled critical chunk
解决办法是关闭Xcode对png的优化处理
解决办法.png
