Jump to content

Blending of shaders


Recommended Posts

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.

Link to comment
Share on other sites

  • 3 weeks later...

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?

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.

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.


  • Recently Browsing   0 members

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