前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >OpenGL ES实践教程(八)blend混合与shader混合

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

作者头像
落影
发布2018-04-27 17:48:09
3.1K0
发布2018-04-27 17:48:09
举报
文章被收录于专栏:落影的专栏落影的专栏

教程

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设定对应的混合方式,常见的混合模式如下:

代码语言:javascript
复制
/* 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的原型是

代码语言:txt
复制
void glBlendFunc(GLenum sfactor,
    GLenum dfactor);

glBlendFunc的第两个参数分别是src因子和dst因子;

src颜色指的是当前绘制颜色;

dst颜色指的是当前已有颜色;

使用glBlendFunc,需要通过glEnable开启blend功能。

demo中使用的是

代码语言:txt
复制
    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的内容如下:

代码语言:txt
复制
#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,地址在这里

代码语言:txt
复制
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.02.04 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 教程
  • 核心思路
  • 效果展示
  • 具体细节
    • 1、blend混合
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档