How to implement blend mode color burn in pixi.js

[ZebraRoy]

I have tried pixi-picture and using the formula from https://www.shadertoy.com/view/4tSGWV

But the result doesn't seem like what I get from photoshop

Below is the shader I use:

const overlayFrag = `
varying vec2 vTextureCoord;
varying vec2 vMapCoord;
varying vec4 vColor;
uniform sampler2D uSampler[2];
uniform vec4 uColor;
%SPRITE_UNIFORMS%

vec3 colorBurn (vec3 target, vec3 blend){
    return 1.0 - (1.0 - target)/ blend;
}
void main(void)
{
    %SPRITE_CODE%
    vec4 source = texture2D(uSampler[0], textureCoord) * uColor;
    vec4 target = texture2D(uSampler[1], vMapCoord);
    //reverse hardlight
    if (source.a == 0.0) {
        gl_FragColor = vec4(0, 0, 0, 0);
        return;
    }
    vec4 res;
    res.rgb = colorBurn(target.rgb,  source.rgb);
    res.a = source.a + target.a * (1.0-source.a);
    gl_FragColor = vec4(res.xyz * res.a, res.a);
}
`;

 

[ZebraRoy]

Oh, I found the problem now

The colorBurn logic haven't handle the opacity, after I change the logic into this one, it works now:

const overlayFrag = `
varying vec2 vTextureCoord;
varying vec2 vMapCoord;
varying vec4 vColor;
uniform sampler2D uSampler[2];
uniform vec4 uColor;
uniform float alpha;
%SPRITE_UNIFORMS%

vec3 colorBurn (vec3 target, vec3 blend, float opacity){
    return 1.0 - (1.0 - (opacity * target + (1.0 - opacity)))/ blend;
}
void main(void)
{
    %SPRITE_CODE%
    vec4 source = texture2D(uSampler[0], textureCoord) * uColor;
    vec4 target = texture2D(uSampler[1], vMapCoord);
    //reverse hardlight
    if (source.a == 0.0) {
        gl_FragColor = vec4(0, 0, 0, 0);
        return;
    }
    vec4 res;
    res.rgb = colorBurn(target.rgb, source.rgb, alpha);
    res.a = 1.0;
    gl_FragColor = vec4(res.xyz * res.a, res.a);
}
`;

 

Edited December 13, 2019 by ZebraRoy

[ivan.popelyshev]

Lets see: https://www.w3.org/TR/compositing-1/#blendingcolorburn

vec3 backdropRGB, sourceRGB, resultRGB;
resultRGB = colorBurn(backdropRGB, sourceRGB);
resultRGB = backdropRGB * (1.0-alpha) + alpha * resultRGB;

where colorBurn is the formula from my link.

Also, its strange that you dont divide rgb by alpha, all our textures are premultiplied.

do you use pixi-picture with v4? I didnt port it to v5 yet, im that lazy.

Edited December 12, 2019 by ivan.popelyshev

[ivan.popelyshev]

I'll post my version of color-burn later and we'll check it  Can you make some tests in photoshop that we can reproduce in pixi? With alpha=0.25 , 0.5, 0.75 

Edited December 12, 2019 by ivan.popelyshev

[ZebraRoy]

I am using v4

I have changed the formula a little bit and it is exact match with photoshop now

Currently, I just hard code the alpha in the frag. Is there any way I can pass a uniform into mapFilterBlendModesToPixi?

    const overlayFrag = `
varying vec2 vTextureCoord;
varying vec2 vMapCoord;
varying vec4 vColor;
uniform sampler2D uSampler[2];
uniform vec4 uColor;
uniform float alpha;
%SPRITE_UNIFORMS%

vec3 colorBurn(vec3 lower, vec3 upper, float opacity){
	return 1.0 - (( 1.0 - lower ) / ( 1.0 + opacity * upper - opacity ));
}


void main(void)
{
    %SPRITE_CODE%
    vec4 source = texture2D(uSampler[0], textureCoord) * uColor;
    vec4 target = texture2D(uSampler[1], vMapCoord);
    //reverse hardlight
    if (source.a == 0.0) {
        gl_FragColor = vec4(0, 0, 0, 0);
        return;
    }
	vec3 Cb = source.rgb/source.a, Cs;
    if (target.a > 0.0) {
        Cs = target.rgb / target.a;
    }
    gl_FragColor = vec4(colorBurn(Cs, Cb, 1.0 - alpha), 1.0);
}
`;

 

Edited December 13, 2019 by ZebraRoy

[ZebraRoy]

15 hours ago, ivan.popelyshev said:

I'll post my version of color-burn later and we'll check it  Can you make some tests in photoshop that we can reproduce in pixi? With alpha=0.25 , 0.5, 0.75 

Sure, I will make those test later

Edited December 13, 2019 by ZebraRoy