webgl实现ps混合模式第二章-变暗、变亮、颜色加深、颜色简单、线性加深、线性减淡

发表于 更新于 分类于 阅读次数：

接着上一章讲解，如果本章有些知识点和公式看不懂可以看一下第一章的讲解。

变暗、变亮的实现

这两个方案实现起来很简单，就是去两张图的rgb的最小值或最大值，直接上shader代码：

变暗shader代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const FSHADER_SOURCE = `
    precision mediump float;
    varying vec2 v_PointUV;
    uniform sampler2D u_Image;
    uniform sampler2D u_Image1;
    void main() {
        // 底层图片颜色
        vec4 baseColor = texture2D(u_Image, v_PointUV);
        // 上层混合图片的颜色
        vec4 blendColor = texture2D(u_Image1, v_PointUV);
        vec4 color = vec4(min(baseColor.rgb,blendColor.rgb),max(baseColor.a,blendColor.a));
        gl_FragColor = color;
    }
`;

效果：

变亮shader代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const FSHADER_SOURCE = `
    precision mediump float;
    varying vec2 v_PointUV;
    uniform sampler2D u_Image;
    uniform sampler2D u_Image1;
    void main() {
        // 底层图片颜色
        vec4 baseColor = texture2D(u_Image, v_PointUV);
        // 上层混合图片的颜色
        vec4 blendColor = texture2D(u_Image1, v_PointUV);
        vec4 color = vec4(max(baseColor,blendColor));
        gl_FragColor = color;
    }
`;

效果:

颜色加深、颜色减淡

颜色加深、颜色减淡这两个功能都要用到反相，反相的计算方式是 1.0减去rgb的颜色值
如： 底层图的反向就是 vec3(1.0)-baseColor.rgb
颜色加深的实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const FSHADER_SOURCE = `
    precision mediump float;
    varying vec2 v_PointUV;
    uniform sampler2D u_Image;
    uniform sampler2D u_Image1;
    void main() {
        // 底层图片颜色
        vec4 baseColor = texture2D(u_Image, v_PointUV);
        // 上层混合图片的颜色
        vec4 blendColor = texture2D(u_Image1, v_PointUV);
        vec4 color = vec4(baseColor.rgb-(vec3(1.0)-baseColor.rgb)*(vec3(1.0)-blendColor.rgb)/blendColor.rgb,1.0);
        if(blendColor.a == 0.0){
            color = baseColor;
        }
        gl_FragColor = color;
    }
`;

效果：

颜色加深的实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const FSHADER_SOURCE = `
    precision mediump float;
    varying vec2 v_PointUV;
    uniform sampler2D u_Image;
    uniform sampler2D u_Image1;
    void main() {
        // 底层图片颜色
        vec4 baseColor = texture2D(u_Image, v_PointUV);
        // 上层混合图片的颜色
        vec4 blendColor = texture2D(u_Image1, v_PointUV);
        vec4 color = vec4(baseColor.rgb + (baseColor.rgb * blendColor.rgb/(vec3(1.0)-blendColor.rgb)),1.0);
        if(blendColor.a == 0.0){
            color = baseColor;
        }
        gl_FragColor = color;
    }
`;

效果：

线性加深和线性减淡

线性加深和线性减淡是向量进行相加减的过程，需要用到clamp()函数进行范围限制。
clamp使用方法：
clamp (genType x, float minVal, float maxVal)
获取x和minVal之间较大的那个值，然后再拿较大的那个值和最后那个最大的值进行比较然后获取较小的那个，意思是x的取值范围是[minVal,maxVal]。
颜色加深代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const FSHADER_SOURCE = `
    precision mediump float;
    varying vec2 v_PointUV;
    uniform sampler2D u_Image;
    uniform sampler2D u_Image1;
    void main() {
        // 底层图片颜色
        vec4 baseColor = texture2D(u_Image, v_PointUV);
        // 上层混合图片的颜色
        vec4 blendColor = texture2D(u_Image1, v_PointUV);
        vec4 color = vec4(clamp(baseColor.rgb+blendColor.rgb-vec3(1.0),vec3(0.0),vec3(1.0)),baseColor.a);
        if(blendColor.a == 0.0){
            color = baseColor;
        }
        gl_FragColor = color;
    }
`;

效果：

线性减淡效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const FSHADER_SOURCE = `
    precision mediump float;
    varying vec2 v_PointUV;
    uniform sampler2D u_Image;
    uniform sampler2D u_Image1;
    void main() {
        // 底层图片颜色
        vec4 baseColor = texture2D(u_Image, v_PointUV);
        // 上层混合图片的颜色
        vec4 blendColor = texture2D(u_Image1, v_PointUV);
        vec4 color = vec4(clamp(baseColor.rgb+blendColor.rgb,vec3(0.0),vec3(1.0)),baseColor.a);
        if(blendColor.a == 0.0){
            color = baseColor;
        }
        gl_FragColor = color;
    }
`;

效果：

相关博客