纹理混合遇到的问题 pre-multiplying OpenGL Android iOS
纹理混合遇到的问题 pre-multiplying OpenGL Android iOS
Alpha-blending pre-multiplying of texture OpenGL Android iOS
问题
在进行 OpenGL 纹理混合的过程中,遇到樂一个诡异的现象,两个纹理混合的效果出人所料: 将一个白色渐变的 logo 加在另一张图片上,这个 logo 是由外向里逐渐增加透明度的,也就是最外围的透明度为0,而中心的透明度接近 1,也就是完全不透明,实心。那么预期的效果希望是在底图上加一个白色的朦胧的效果,然而实际得到的效果很让人意外,出现樂一片淡淡的黑色!
考察纹理混合的做法,在 shader 中编码如下:
vec4 main_color = texture(rgbTexture, v_TexCoord);
vec4 logo_color = texture(logo_texture, v_TexCoord);
color_out = mix(main_color, logo_color, logo_color.a);
因为logo图片是带有透明度,根据其透明度与原图进行混合,理应能够得到我们想要的结果。在 debug 过程中我尝试不进行混合,直接将logo绘制在图片上,发现logo还是有渐变效果,发现:
logo 的 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,接近黑色樂。这就是出现黑色的原因樂。
解决
解决思路两个:
- 不做 pre-multiplying
- 混合時考虑到前面的情况,不再乘上 alpha
第一种方式的话,在 Android 平台上,加载一个 bitmap 時,可以设置 BitmapFactory.Options
的参数 inPremultiplied
如下:
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 平台的话,只有一个 是否压缩png文件的开关,一般来说是选择压缩以节省空间的,我目前还没有找到靠谱的解决方案。
选择另一个方案的话,需要在混合的时候更改一下计算方式,将原来计算方式改成如下:
vec4 main_color = texture(rgbTexture, v_TexCoord);
vec4 logo_color = texture(logo_texture, v_TexCoord);
color_out = main_color * (1.0f - logo_color.a) + logo_color;
和原来的相比,用OpenGL 的表述方式,原来做法是:(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)
考虑pre-multiplying的话:(ONE, ONE_MINUS_SRC_ALPHA)
问题得到完美解决。
参考资料:
Android: bitmaps, textures and pre-multiplied pixels
纹理混合遇到的问题 pre-multiplying OpenGL Android iOS的更多相关文章
- Unity3d之Shader编程:子着色器、通道与标签的写法 & 纹理混合
一.子着色器 Unity中的每一个着色器都包含一个subshader的列表,当Unity需要显示一个网格时,它能发现使用的着色器,并提取第一个能运行在当前用户的显示卡上的子着色器. 我们知道,子着色器 ...
- 【浅墨Unity3D Shader编程】之三 光之城堡篇:子着色器、通道与标签的写法 & 纹理混合
本系列文章由@浅墨_毛星云 出品,转载请注明出处. 文章链接:http://hpw123.net/a/C__/kongzhitaichengxu/2014/1117/120.html 作者:毛星云 ...
- Direct2D开发:纹理混合
转载请注明出处:http://www.cnblogs.com/Ray1024 一.概述 我们都知道Direct2D可以加载并显示图片,但是不知道你有没有想过,这个2D的图形引擎可以进行纹理混合吗?如果 ...
- UnityShader之固定管线命令Combine纹理混合【Shader资料4】
Combine,纹理混合. 我们先看圣典上给的解释. 纹理在基本的顶点光照被计算后被应用.在着色器中通过SetTexture 命令来完成. SetTexture 命令在片面程序被使用时不会生效:这种模 ...
- 【Direct2D开发】 通过操作像素实现纹理混合
转载请注明出处:http://www.cnblogs.com/Ray1024 一.概述 我们都知道Direct2D可以加载并显示图片,但是不知道你有没有想过,这个2D的图形引擎可以进行纹理混合吗?如果 ...
- Android H5混合开发(3):原生Android项目里嵌入Cordova
前言 如果安卓项目已经存在了,那么如何使用Cordova做混合开发? 方案1(适用于插件会持续增加或变化的项目): 新建Cordova项目并添加Android平台,把我们的安卓项目导入Android平 ...
- Golang 开发移动应用的OpenGL(Android为例)的渲染管线
golang.org/x/mobile/gl 实现的是 OpenGL ES 2 的封装. 参考:https://godoc.org/golang.org/x/mobile/gl OpenGL ES(O ...
- OpenGL—Android 开机动画源码分析二
引自http://blog.csdn.net/luoshengyang/article/details/7691321/ BootAnimation类的成员函数的实现比较长,我们分段来阅读: 第三个开 ...
- OpenGL—Android 开机动画源码分析一
.1 Android开机动画实现方式目前实现Android开机动画的方式主要是逐帧动画和OpenGL动画. ?逐帧动画 逐帧动画是一种常见的动画形式(Frame By Frame),其原理是在“连续的 ...
随机推荐
- redhat mysql安装配置
1. 下载好编译包, 解压到/usr/local/ 并修改文件夹名字为mysql tar -zxf mysql-5.6.30-linux-glibc2.5-x86_64.tar.gz -C /u ...
- (转)Linux(Centos)之安装Java JDK及注意事项
场景:天下事有难易乎?为之,则难者亦易矣:不为,则易者亦难矣.人之为学有难易乎?学之,则难者亦易矣:不学,则易者亦难矣. 1 准备工作 下面配置jdk的方式在具有root权限时候能够执行.如果没有ro ...
- vue.js使用props在父子组件之间传参
本篇文章是我参考官方文档整理的,供大家参考,高手勿喷! prop 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子 ...
- net 将手机号码中间的数字替换成星号
Regex.Replace(link.user_tel, "(\\d{3})(\\d{5})(\\d{3})", "$1*****$3")
- 【整理】01. Fiddler 杂记
抓手机包步骤: Tools -- Fiddler Options -- Connections (默认)Fiddler listens on port:8888 (勾选)Allow remote co ...
- 【模板小程序】链表排序(qsort/insert_sort/merge_sort)
前言 本文章整理了链表排序的三种方法,分别是快速排序.插入排序.归并排序.为适应不同用途,先给出常用的int版本,再在此基础上抽象出类模板. 目录 一.针对整数的版本(常用) 文中链表定义 链表相关操 ...
- Redis主从复制(Master/Slave)
Redis主从复制(Master/Slave) 修改配置文件 拷贝多个redis.conf文件分别配置如下参数: 开启daemonize yes pidfile port logfile dbfile ...
- keilc 4 编译出现的几个错误…
原文地址:keilc 4 编译出现的几个错误解决作者:黑子 今天安装了keilc4,因为项目用到,所以把遇到的几个编译错误解决方法说说,第一次写东西不知道写啥!! 一 第一个是错误提示 ...
- Typescript 解构 、展开
什么是解构.展开? 展开与解构作用相反,简单来说: 解构:解构赋值允许你使用数组或对象字面量的语法,将数组和对象的属性付给各种变量. 展开:允许你讲一个数组展开为另一个数组,或一个对象展开为另一个对象 ...
- .net程序实现给机器加域,添加域账号到本地管理员
以下.net代码中共有两个方法. AddComputerToDomain实现给把本计算机添加到某个域中 AddDomainUserToLocalAdminGroup实现把域中某用户添加到本地管理员 请 ...