OpenGL ES实践教程(八)blend混合与shader混合

教程

OpenGL ES实践教程1-Demo01-AVPlayer OpenGL ES实践教程2-Demo02-摄像头采集数据和渲染 OpenGL ES实践教程3-Demo03-Mirror OpenGL ES实践教程4-Demo04-VR全景视频播放 OpenGL ES实践教程5-Demo05-多重纹理实现图像混合 OpenGL ES实践教程6-Demo06-全景视频获取焦点 OpenGL ES实践教程7-Demo07-多滤镜叠加处理 其他教程请移步OpenGL ES文集

OpenGL ES实践教程5-Demo05-多重纹理实现图像混合尝试把两个图像用多重纹理的方式进行混合,这次补充介绍其他混合方式--blend混合与shader混合。 不同于多重纹理用一个shader读取两个纹理单元的图像数据; 不同于滤镜链,第一个滤镜以纹理单元0为输入,输出到纹理单元1,第二个再以纹理单元1为输出; blend混合与shader混合是在原来的绘制基础上,接着绘制图形

核心思路

  • blend混合,先绘制图形1,开启blend混合,再绘制图形2;
  • shader混合,先绘制图形1,在绘制图形2的时候读取图形1的颜色值,图形2的颜色值乘以(1 - 图形2alpha)再加到图形2上;

效果展示

上面的图形有透明的效果

具体细节

1、blend混合

blend混合是在绘制图形时,把要绘制的颜色与当前缓冲区里面的颜色按照特定的混合方式进行叠加。blend混合常用在绘制透明的图形,会用到RGBA颜色空间中的alpha值。 混合过程中可以通过glBlendFunc设定对应的混合方式,常见的混合模式如下:

/* BlendingFactorDest */
#define GL_ZERO                                          0
#define GL_ONE                                           1
#define GL_SRC_COLOR                                     0x0300
#define GL_ONE_MINUS_SRC_COLOR                           0x0301
#define GL_SRC_ALPHA                                     0x0302
#define GL_ONE_MINUS_SRC_ALPHA                           0x0303
#define GL_DST_ALPHA                                     0x0304
#define GL_ONE_MINUS_DST_ALPHA                           0x0305
```
其核心函数glBlendFunc的原型是
```
void glBlendFunc(GLenum sfactor,
    GLenum dfactor);
```
 [glBlendFunc](http://www.khronos.org/registry/OpenGL-Refpages/es2.0/xhtml/glBlendFunc.xml)的第两个参数分别是src因子和dst因子;
src颜色指的是当前绘制颜色;
dst颜色指的是当前已有颜色;
使用glBlendFunc,需要通过`glEnable`开启blend功能。
demo中使用的是
```
    glEnable(GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
```
混合方式用数学公式来描述就是:**src \* src.a + dst \* (1.0 - dst.a)**
src的alpha值表示的是src颜色的不透明度。

####2、shader混合
shader的混合,需要用到苹果的非标准扩展`EXT_shader_framebuffer_fetch`。
`EXT_shader_framebuffer_fetch `支持在fragment shader绘制时读取framebuffer中的已有颜色;
非常适合做图像混合或者其他需要以shader输出作为输入的图像组合操作;
但是**不试用于多通道渲染和渲染到纹理操作**。

使用时需要在fragment shader中添加
`#extension GL_EXT_shader_framebuffer_fetch : require`
引入非标准扩展`EXT_shader_framebuffer_fetch`。
通过读取`gl_LastFragData`自建变量,可以读取到framebuffer中的颜色值,整个fragment shader的内容如下:
```
#extension GL_EXT_shader_framebuffer_fetch : require
varying lowp vec2 varyTextCoord;
varying lowp vec2 varyOtherPostion;
uniform sampler2D myTexture1;
void main()
{
    lowp vec4 text = texture2D(myTexture1, 1.0 - varyTextCoord);
    text.a = 0.8;
    lowp vec4 test = gl_LastFragData[0];
    gl_FragColor = (1.0 - text.a) * test + text * text.a;
}
```

###总结
blend混合的优势在于OpenGL标准支持,但是无法支持特定的alpha值;
shader混合的优势在于可以任意操作颜色值,比如demo就是通过读取gl_LastFragData,然后把之前的alpha值修改为0.8,缺点在于非正式标准,且不试用于多通道渲染和渲染到纹理操作。
其他内容见demo,地址在[这里](https://github.com/loyinglin/LearnOpenGLES/tree/master/Demo08-blend%E6%B7%B7%E5%90%88%E4%B8%8Eshader%E6%B7%B7%E5%90%88)。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏MixLab科技+设计实验室

从Storyboard到DIY实现一个漫画生成器-01

用户只需拍摄一段视频并将其加载到 Storyboard 中即可将视频转换为单页漫画的布局。该应用会自动选择有趣的帧,并将其应用于6种视觉样式中的一种。生成的漫画...

1394
来自专栏量子位

谷歌发明图片批量去水印新算法,呼吁素材网站将水印随机化

安妮 编译整理 量子位 出品 | 公众号 QbitAI 图片素材网站为了保护版权,通常要将图片打个水印。 但最近,谷歌的研究人员发现了一种新算法,可以轻松批量将...

4475
来自专栏天天P图攻城狮

iOS多边形马赛克的实现(下)

上一篇里我们详述了多边形马赛克的实现步骤,末尾提出了一个思考:如何在涂抹时让马赛克逐块显示呢? 再回顾一下多边形马赛克的实现。首先进行图片预处理,将原图转成bi...

39813
来自专栏逍遥剑客的游戏开发

溶解效果

1677
来自专栏逍遥剑客的游戏开发

简单的运动模糊效果实现

1864
来自专栏落影的专栏

OpenGL ES实践教程(六)全景视频获取焦点

教程 OpenGL ES实践教程1-Demo01-AVPlayer OpenGL ES实践教程2-Demo02-摄像头采集数据和渲染 OpenGL ES实践...

3195
来自专栏达摩兵的技术空间

css3渐变:linear-gradient

之前的实践中我们了解并熟悉了background-size,以及backgroud-clip,今天我们学习并实践的是线性渐变linear-gradient.

1163
来自专栏我和未来有约会

Silverlight 4 中摄像头的运用—part1

入的视频 摄像头经过一个Video对象就能让你看到视频,而这个对象是一个显示对象,所以显示对象能做得事情,它都能做,比如滤镜,变形,混合模式等等。当然最强大的还...

21210
来自专栏腾讯NEXT学位

这个CSS问题屏幕前的你是否熟悉,然后懵逼,最后放弃

3716
来自专栏哈雷彗星撞地球

iOS动画三板斧(三)--UIDynamic动画介绍实战

终于到了动画三板斧第三篇了,这里用UIDynamic来实现动画。 UIDynamic是iOS 7之后新添加的一些物理仿真动画库,包含在UIKit框架中。

944

扫码关注云+社区

领取腾讯云代金券