Blending of shaders

[pokrishka]

Hi guys.

I'm new to WebGL and other related stuff and I'm learning shaders. I haven't used pixi other than creating scene with a sprite and applying my shader to it following basic examples on Pixi site and some codepen I've found. I have created the shader I want to use on the ShaderToy. What it does is it creates some cool pattern out of given color, changing it from black to white through the mentioned color. If I were to apply it to the real scene, I would use Screen blending mode (which is pretty easy when you are writing shader, just invert colors, multiply them and invert back again) - that way black would be fully transparent and white would be fully opaque. Basically, I want to create sophisticated glow with some pattern. My question is, if I don't have the background in my shader, how do I perform blending? Do I blend the sprite I used shader on instead, is it possible with pixi? If I don't want to have my sprite blended, just the glow effect - what would be the best solution? I can only think of making 2 copies of the sprite at the same spot, one fully transparent with the glow blendend in screen mode and one without any glow (my Photoshop experience suggests this  ).

I'm asking here because I plan to use Pixi and learn it, but I just started off with the shader effect since another friend of mine is working on pixi project and I want to help him with visuals.

[ivan.popelyshev]

Yeah, there's a problem with blending. That thing wasnt accepted yet: https://github.com/pixijs/pixi.js/pull/2222 . Yes, you'll need 2 copies. 

 

In pixi v4 there'll be support of custom blendModes.

[pokrishka]

Ok, thanks! And what if I would want to perform blending within my shader itself, is there a way to get underlying pixels somehow? Pass them on as a uniform or something like that. In case I would want to do something different like warp/distort background.

[ivan.popelyshev]

Yeah, that's the problem we're addressing. I'll use part of current frameBuffer or readPixels for that

[pokrishka]

Thanks, ivan, that's very helpful

[pokrishka]

I ran into some issue while coding my filter. It seems to me that blending mode is applied before the filter. As I've mentioned have a white shape and I apply some sophisticated glow to it that goes from shapes edges from white to black through the color I set. I have loaded the shape as sprite and applied filter to it and set it's blending mode to SCREEN. That would make black transparent, but it doesn't. Looks like it is applied to the texture itself before the filter is applied because if I make it MULTIPLY then all I see is black, meaning the shape got multiplied and turned to nothing, because it was white and then my glow was applied resulting in pure black because there were no shape pixels available to glow upon. How do I take shape, apply filter and then apply blending mode to the result?

[ivan.popelyshev]

I said about it in PR2222 but everyone ignored my idea: https://github.com/pixijs/pixi.js/pull/2222

Try this one: https://dl.dropboxusercontent.com/u/46636530/pixijs/blendMode/pixi.js

Or this one: https://github.com/ivanpopelyshev/pixi.js/blob/dev-flip/bin/pixi.js