1. 问题

在进行 OpenGL 纹理混合的过程中,遇到一个诡异的现象,两个纹理混合的效果出人所料: 将一个ALPHA渐变的【胡须】加在另一张图片上,这个 【胡须】是由外向里逐渐增加透明度的,也就是最外围的透明度为0,而中心的透明度接近 1,也就是完全不透明,实心。那么预期的效果希望是在底图上加一个朦胧的效果,然而实际得到的效果很让人意外,出现一片淡淡的黑色!(如下图中的胡须旁边的黑色。)

2. 原因

shader:

vec4 main_color = texture(rgbTexture, v_TexCoord);
vec4 huxu_color = texture(huxu_texture, v_TexCoord);
vec4 color_out = mix(main_color, huxu_color, huxu_color.a);

因为【胡须】图片是带有透明度,根据其透明度与原图进行混合,理应能够得到我们想要的结果。在 debug 过程中我尝试不进行混合,直接将【胡须】绘制在图片上,发现【胡须】还是有渐变效果,发现:

【胡须】的 RGB 数据和原始图片的 RGB 不同 此处存在 pre-multiplying.

pre-multiplying:Android 平台在加载一张位图的时候,会自动做一个操作,将 RGB 的值乘上 alpha 值,重新保存。用公式表示如下:

If you use OpenGL ES 2.0, pre-multiplying the output of your fragment shader is extremely simple:
color.rgb *= color.a

回头再看我的混合的方式,在 RGB 数据已经被做过一次 pre-multiplying 的情况下,再乘一个 alpha: RGB_new = RGB * alpha * alpha 然后再和底图的颜色加起来,自然就出错了。比如在白色的透明度为0.5的地方,原来的 RGB 为255,这种奇怪的算法得到的结果就是 63.75,接近黑色。这就是出现黑色的原因。

3. 解决方案

解决思路有2个

不做 pre-multiplying
混合時考虑到前面的情况,不再乘上 alpha

第一种方案:

android 加载方法:加载图片时 设置 BitmapFactory.Options.inPremultiplied  = false;

inPremultiplied
added in API level 19
boolean inPremultiplied If true (which is the default), the resulting bitmap will have its color channels pre-multipled by the alpha channel.
This should NOT be set to false for images to be directly drawn by the view system or through a Canvas. The view system and Canvas assume all drawn images are pre-multiplied to simplify draw-time blending, and will throw a RuntimeException when un-premultiplied are drawn.
This is likely only useful if you want to manipulate raw encoded image data, e.g. with RenderScript or custom OpenGL.
This does not affect bitmaps without an alpha channel.
Setting this flag to false while setting inScaled to true may result in incorrect colors. See also:
hasAlpha()
isPremultiplied()
inScaled
  

IOS 上木有这种接口。

第二种方案:

vec4 main_color = texture(rgbTexture, v_TexCoord);
vec4 huxu_color = texture(huxu_texture, v_TexCoord);
vec4 color_out = main_color * (1.0 - huxu_color.a) + huxu_color;

和原来的相比,用OpenGL 的表述方式,原来做法是:(SRC_ALPHA, ONE_MINUS_SRC_ALPHA) 考虑pre-multiplying的话:(ONE, ONE_MINUS_SRC_ALPHA)

参考资料:

https://plus.google.com/+ChetHaase/posts/ef6Deey6xKA

OPENGLES 绘制纹理带黑圈pre-multiplying的更多相关文章

  1. 2.x最终照着教程,成功使用OpenGL ES 绘制纹理贴图,添加了灰度图

    在之前成功绘制变色的几何图形之后,今天利用Openg ES的可编程管线绘制出第一张纹理. 学校时候不知道OpenGL的重要性,怕晦涩的语法.没有跟老师学习OpenGL的环境配置,现在仅仅能利用coco ...

  2. Cocos2D绘制纹理的一般方法

    如果你想在通常情况下绘制纹理,最简单的方法是在CCSprite的子类中实现.否则你将不得不自己创建一个CCRenderState对象传递给blend模式,着色器以及(可选的)纹理给CCRenderer ...

  3. android openGL ES2 一切从绘制纹理開始

    纹理.在openGL中,能够理解为载入到显卡显存中的图片.Android设备在2.2開始支持openGL ES2.0.从前都是ES1.0 和 ES1.1的版本号.简单来说,openGL ES是为了嵌入 ...

  4. Unity3D学习笔记2——绘制一个带纹理的面

    目录 1. 概述 2. 详论 2.1. 网格(Mesh) 2.1.1. 顶点 2.1.2. 顶点索引 2.2. 材质(Material) 2.2.1. 创建材质 2.2.2. 使用材质 2.3. 光照 ...

  5. 【百度地图API】批量地址解析与批量反地址解析(带商圈数据)

    原文:[百度地图API]批量地址解析与批量反地址解析(带商圈数据) 摘要:因为地址解析的webserives方式还没有开通,所以先用JS版本的地址解析接口来批量获取地址解析数据吧,同时还能得到商圈的数 ...

  6. iOS OpenGL ES简单绘制纹理

    OpenGL 中任何复杂的图形都是由点,线 和三角形组成的. 那么一个矩形 就需要有两个三角形组成. 纹理, 可以理解为一张图片, 我么可以将整张or部分图片绘制到圆形, 矩形等目标图形中. 下图表示 ...

  7. 解决 cocos2dx iOS/mac 设置纹理寻址模式后纹理变黑的问题

    sprite:getTexture():setTexParameters(gl.LINEAR,gl.LINEAR,gl.REPEAT,gl.REPEAT) 在安卓设备上,设置了纹理自定义寻址模式,纹理 ...

  8. 用NetworkX生成并绘制(带权)无向图

    NetworkX是一个非常强大的网络科学工具,它封装了图的数据结构和许多经典图算法,也内置了许多可视化函数可供调用. 1. 随机图生成 最经典的随机图当属我们在上一篇博客<Erdos-Renyi ...

  9. 带A圈的秘密

    真嗒安全策略的罗罗,,害的我和其他的不一样.

随机推荐

  1. 机器学习技法:01 Linear Support Vector Machine

    Roadmap Course Introduction Large-Margin Separating Hyperplane Standard Large-Margin Problem Support ...

  2. nodejs项目管理之supervisor||pm2||forever

    supervisor 是开发环境用. forever 管理多个站点,每个站访问量不大,不需要监控. pm2 网站访问量比较大,需要完整的监控界面. supervisor 特点: 代码修改,实时重启 安 ...

  3. Spring读书笔记——bean创建(上)

    通过<Spring读书笔记--bean加载>和<Spring读书笔记--bean解析>,我们明白了两件事. Spring如何加载消化一个xml配置文件 Spring如何将xml ...

  4. 【NOIP模拟】LCS及方案数(DP)

    Description 对于一个序列

  5. MyBatis 笔记总结

    1.MyBatis中的一些要点: 1.1 SqlMapConfig.xml:mybatis的全局配置文件,配置mybatis的运行环境等信息,包括mapper.xml文件 1.2 mapper.xml ...

  6. 使用Aspose.Cells利用模板导出Excel(C#)

    前言 随着互联网的流行,web项目逐渐占据主流.我相信大部分人开发项目的过程中都写过上传以及导出Excel和Word的功能,本文仅讨论导出Excel.C#中有很多第三方组件支持导出Excel,比如:N ...

  7. Jquery的树插件jqxTreeGrid的使用小结

    一.引入相应的js <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" t ...

  8. Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile (default-compile) 解决方案

    1.命令行用maven编译项目失败,提示 Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compi ...

  9. 项目swift的一些问题

    在用swift做项目的时候,总会把之前oc的思想转过来. 1. 对Alamofire的再次封装,之前使用AFNetwork进行了在次封装,这样做的好处就是可以用一个全局的类来管理全部的网络请求,这样就 ...

  10. Matrices and Vectors

    Matrices and Vectors Matrices are 2-dimensional arrays: A vector is a matrix with one column and man ...