Jump to content

How to implement blend mode color burn in pixi.js


ZebraRoy
 Share

Recommended Posts

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

 

Link to comment
Share on other sites

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 by ZebraRoy
Link to comment
Share on other sites

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 by ivan.popelyshev
Link to comment
Share on other sites

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 by ZebraRoy
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...