- 图层混合模式介绍
Fireworks 8 混合模式详解
Blending modes in Adobe Photoshop
- glBlendFunc介绍
Android OpenGLES2.0（十八）——轻松搞定Blend颜色混合
终端图像处理系列 - OpenGL混合模式的使用
LearnOpenGL-混合
glBlendFunc(GLenum src_factor, GLenum dest_factor)
color_result = color_ src ∗src_factor + color_dest∗dest_factor
dest指的是当前储存在颜色缓冲中的颜色向量，即目标色，底色，本色。底部的背景。
src指的是新的，要用于合成的纹理的颜色，即源色，用于合成的资源。上层的前景。
比较常规的配置应该是
// norm模式
glBlendEquation(GL_FUNC_ADD);
glBlendFuncSeparate(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA, GL_ONE, GL_ONE_MINUS_SRC_ALPHA);
注意：
OpenGL里执行完glBlendFunc后，记得恢复之前的glIsEnabled和glBlendFunc. 这点容易被忘记导致各种渲染异常。
- Android里对应的颜色混合工具是Xfermodes
各个击破搞明白PorterDuff.Mode
porter-duff.png
Xfermodes 和 OpenGL Blend函数的映射关系 https://github.com/OpenSource-Infinix/android_frameworks_base_one/blob/0287c3e3f6f763cd630290343cda11e15db1844f/libs/hwui/renderstate/Blend.cpp
- 用OpenGL Shader实现图层混合模式
OpenGL（十七）Photoshop blend算法 与 图层混合模式
终端图像处理系列 - 图像混合模式的Shader实现(有介绍3D场景下的混合方案)(对应源码)
Shader 中的颜色混合模式（Blend Mode）
postprocessing
glsl-blend
GIMP对Blend的处理
w3c的混合模式标准
- 不用shader就能实现的PS的混合模式：
Multiply 正片叠底
glBlendFunc(GL_DST_COLOR, GL_ONE_MINUS_SRC_ALPHA);
(AE在正片叠底时对透明度的处理逻辑不详，所以只适用于不透明的两个图层混合的情况。图层有透明度时，实际效果可能会和AE的有差异）
Darken 变暗
glBlendFunc(GL_ONE, GL_ONE) glBlendEquation(GL_FUNC_MIN)
(Android 不支持GL_FUNC_MIN，iOS可以用GL_MIN_EXT）
Lighten 变亮
glBlendFunc(GL_ONE,GL_ONE) glBlendEquation(GL_FUNC_MAX)
(Android 不支持GL_FUNC_MAX，iOS可以用GL_MAX_EXT）
Difference 差值
glBlendFunc(GL_ONE, GL_ONE) glBlendEquation(GL_FUNC_SUBTRACT)
(只适用src的RGBA值比dest的RGBA值都大的情况，否则还是需要用shader计算两张图的RGBA差值的绝对值)
Screen 屏幕
glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_COLOR)
或glBlendFunc(GL_MINUS_DST_COLOR, GL_ONE)
两者结果一样
Linear Dodge（Add) 线性减淡(增加)
glBlendFunc(GL_ONE, GL_ONE)
（BodyMoving插件只支持Add, 不支持Linear Dodge)
Normal 常规混合
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)
- 在线调试
调试glBlendFunc
混合模式对应的数学公式
- 考虑透明度的shader代码示例
// 柔光
const char *gl_fra_SoftLight = SHADER_SRC(
precision highp float;
varying vec2 vTexCoord;
uniform sampler2D uTexture;
uniform sampler2D uTexture2;
float blend(const float x, const float y) {
return (y < 0.5) ?
(2.0 * x * y + x * x * (1.0 - 2.0 * y)) :
(sqrt(x) * (2.0 * y - 1.0) + 2.0 * x * (1.0 - y));
}
void main() {
vec4 front = texture2D(uTexture2, vTexCoord);
vec4 back = texture2D(uTexture, vTexCoord);
vec3 dest = vec3(blend(back.r, front.r), blend(back.g, front.g),
blend(back.b, front.b));
float alpha = max(front.a, back.a);
float mixAlpha = front.a*back.a;
vec3 remainColor = back.rgb * (1.0 - front.a)*back.a + front.rgb * (1.0 - back.a)*front.a;
gl_FragColor = vec4((dest*mixAlpha + remainColor), alpha);
}
);