图层混合模式 & glBlendFunc & Xfermodes

图层混合模式介绍

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);
            }
    );

最后编辑于：2022.05.19 10:37:05