Help: Object Blend Modes Explained

2 favourites
From the Asset Store
Game with complete Source-Code (Construct 3 / .c3p) + HTML5 Exported.
  • Despite there being a sample .capx file that illustrates how each blend mode words, I am sometimes still at a loss when it comes to understanding what it is I'm seeing. Namely, the "behind the scenes" and the terminology sometimes escapes even as I think I finally get it...

    For those with a better grasp on such things, could you explain what each blend mode is, what exactly is going on between the objects as the blend effect is active, and what "additive", "destination out/in", "source out/in", "XOR", etc, etc, etc all mean, please?

    Basically, I need a "...For Dummies" explanation.

    Thank you, kindly!

  • Hey Rhindon,

    Blend mode exploration program

    I created a demo of the C2 blend modes that makes it easier to experiment with them.

    (Update 1: I made an update that includes a realtime subpixel model visualization.)

    (Update 2: I made a new version (v4b) you can download here, or try on Scirra Arcade.)

    (Update 3: Version (v4e) small fixes, and Scirra version now shows link to this post correctly.

    Win64: fi_BlendCompositeModes_v4e_win64.zip

    OSX: fi_BlendCompositeModes_v4e_osx64.zip

    Scirra Arcade: Blend composite modes sandbox

    The subpixel model is shown at the right, and updates in realtime, as you adjust the opacity settings.

    Overview

    (This post got a bit bigger than I was expecting.)

    I'm going to try and answer this in three parts.

    1: The quick answer (Basically TL;DR because there's a lot to R)

    2: What does "Additive" do?

    3: What do the other modes do?

    But before going into the details, I'll try to give what might be a more intuitive answer, even if it's less explanatory.

    --------------------------------------------- The quick(ish) answer ---------------------------------------------

    Terms: The term "Destination" means the background, and "Source" means the foreground object.

    The Additive blend mode

    Additive: Directly adds the Source (foreground object) and Destination (background) color values. If the Source object is 50% gray (middle gray) and the Destination background is also 50% gray, then Additive blending the Source into the Destination will result in 100% "gray" which is white.

    The transparent Destination problem

    All of the other blend modes are transparency compositing modes. (explained in more detail later)

    When Construct renders a scene, it goes through the objects in Z-order, from bottom to top, and pastes them one-by-one into the background.

    Each time it's about to paste an object, THAT object is the Source, and everything else that has already been pasted is the Destination.

    The bottom layer of most projects has a solid color like white. This is the first thing that will get pasted, and it will make the entire background (Destination) solid and totally opaque.

    The other blend modes rely on the background (Destination) to have some transparency. This is a problem, because If the Destination had a solid background color blended into it then it will be solid everywhere, and will never be transparent.

    We need a transparent blank slate (like a special layer) we can render on separately from the rest of the main game. So, after we blend some objects onto that special layer, we can then paste that entire layer into the game.

    A normal layer won't quite work, because even if the layer has a transparent background, when Construct goes to paste a sprite from that layer into the background, the background will be the rest of the game objects that were already pasted, including the solid background color from the bottom layer.

    It turns out we can create that special layer described earlier. Create a layer with a transparent background, and then in the layer's properties, set "Force own texture" to True. This will force the layer to render separately from the game, and it will start out totally transparent.

    The other modes

    Destination Over: Put the Source object behind the Destination. You'll see the Source object peek through wherever the Destination is transparent.

    Source Atop: This is exactly like blending onto a clipping mask. This paints the Source onto the Destination like a skin. Where the Destination is transparent the Source will not appear.

    Destination Out: Punch a transparent hole in the Destination, using the opacity of the Source. Where the Source is opaque the Destination will be made transparent.

    Destination In: Punch a transparent hole in the Destination, using the transparency of the Source. Where the Source is transparent the Destination will be made transparent.

    All the others: The other modes all do kind of weird stuff that's generally not very practical (at least as far as I've found), either because they're just the reverse of a more manageable mode described above,

    or because they don't appear to work, as is the case with XOR.

    (edit: 99Instances2Go pointed out that XOR doesn't work in webGL, but does work when webGL is disabled.)

    My understanding (and I may be wrong) is that this list of modes comes from HTML5, so many of them are included in Construct for completeness rather than because there is a common usage for them.

    --------------------------------------------- What does "Additive" do? ---------------------------------------------

    Additive blend mode

    A source image sits over a destination image. Each pixel in the source image is sitting over a pixel in the destination image.

    For each overlapping pair of pixels:

    Additive says add the Red value from the Source pixel and the Red value from the Destination pixel, and use that for the resulting pixel's Red value. Likewise, add Source and Destination Green values to get the resulting Green value, and same for the Blue values.

    So, suppose you have a Sprite that's 1 pixel by 1 pixel wide (pretty small) and it's RGB color is (50, 0, 50) dark purple, and it's on a gray background colored (10, 10, 10). If you set the Sprite to Additive blend mode, the resulting color you get from blending it is (50 + 10, 0 + 10, 50 + 10) which is (60, 10, 60).

    --------------------------------------------- What do the other modes do? ---------------------------------------------

    "Alpha"

    The term "alpha" in computer graphics, (in this case anyway) basically means "opacity".

    (As in "opacity" vs "transparency".)

    In the same way that an image has a red channel to tell each pixel how red it should be, an image's "alpha" channel tells each pixel how transparent or opaque it should be. For a given pixel, an alpha value of 0 means totally transparent, whereas alpha at maximum means totally opaque.

    "RGB blend modes" - vs - "alpha compositing modes"

    The term "blend mode" is a bit broad in a way that can be confusing.

    There are "blend modes" as in fun with RGB math. (normalish-color-blending)

    And there are "blend modes" as in "alpha compositing modes", which merge images in weird and not-so-weird ways based on their transparencies. (weirdish-transparency-blending)

    I will use the term "alpha compositing mode" for that weirdish-transparency-blending kind for the rest of this post to avoid confusion.

    So to clarify, RGB math blend modes (normalish-color-blending) is what you find in programs like Photoshop and Gimp.

    e.g. Additive, Multiply, Screen, Lighten, Difference, etc.

    They all do different RGB math, but they all treat transparency exactly the same nice and intuitive way.

    By contrast, alpha compositing modes (weirdish-transparency-blending), is more like working with clipping masks and hole-punches, and occasionally ... angry ghosts.

    They also have weirder names.

    e.g. Destination Out, Source Atop, Destination Over, ... XOR!

    Now you may have noticed that "Additive" is in the "RGB blend modes" group, and "Destination Out" is in the "alpha compositing modes" group,

    and yet, both are listed in the same dropdown menu in Construct 2. It's not incorrect to call all of them "blend modes", but it's an example of what I meant earlier when I said the term "blend mode" can be confusingly broad, especially when you're starting out.

    Some Background (so to speak)

    So another term for those "alpha compositing modes" is "PorterDuff" modes.

    Named for Thomas Porter and Tom Duff, the Toms.

    They came up with a simple system for describing the alpha compositing of images.

    Specifically they noted all possible simple alpha compositing modes, and named them.

    These are the 12 modes. (I'll abreviate Source as "s" and Destination as "d")

    s over

    s copy

    s atop

    s in

    d over

    d copy

    d atop

    d in

    xor

    s out

    d out

    clear

    So, there are 12, but Construct only includes 10 of them, omitting "d copy " and "clear", because those two are not especially useful. (We'll see why later.)

    In Construct "s over" (Source Over) is listed as "Normal", because this is the basic and intuitive "one thing is on top of another thing" compositing mode.

    What do "alpha compositing modes" do?

    So what did Porter and Duff figure out. Why are there exactly 12 modes?

    To understand we need to think about individual pixels instead of the entire image.

    Let's try to walk through the most basic "alpha compositing mode", which is "s over" or "Normal" as Construct calls it.

    We'll start with a Blue Source and Orange Destination image.

    Now let's assume our Blue Source and Orange Destination are just 1 pixel each.

    The Source pixel is sitting directly over the Destination pixel.

    Next, imagine that both pixels are half transparent.

    The Orange Destination pixel has an opacity of 50%.

    The Blue Source pixel has an opacity of 50%.

    What should the Resulting pixel look like?

    Let's start with an empty Result pixel.

    To add the half transparent Destination pixel, we'll slice the Result pixel in half, with a horizontal divider, and fill in the top half Orange, leaving the bottom half empty.

    The result pixel is now 50% Orange. (The top half)

    Next, To add the Blue Source pixel, which is also half transparent, we'll slice the Result pixel in half, with a vertical divider, and fill in the left half Blue.

    When we fill in the Blue for the Source pixel, we cover up some of the Orange from the Destination pixel, and we also cover up some of the left over transparency.

    In the diagram below, the very bottom left square shows this "sub-pixel" breakdown of the Result pixel.

    The orange slice on the top, and the blue slice on the side, partially covering the orange slice.

    Notice that the result pixel has been split into 4 chunks.

    * Source only

    * Destination only

    * Both (Source and Destination)

    * Neither

    In the example we walked through, we colored the "Destination only" chunk Orange, and the "Source only" chunk Blue, and the "Both" chunk we colored Blue as well, because in the "s over" (Source Over) mode, the "Source" gets to paint "Over" whatever lands in the Both chunk of the result pixel.

    Now, notice that if we turned the opacity of the Source pixel up to 75%, this would push it's slice over to the right so that Blue would fill 75% of the pixel, and there would be even less of the Orange showing through. If we turned the Source pixel up to 100%, the Blue would push all the way to the right edge and totally cover the paint from the Orange Destination pixel.

    That's the last important concept in the slicing-up-the-result-pixel analogy. When you change the opacity (the alpha) of a Source or Destination pixel, you change where the slices end up, and thus how much of the pixel each chunck covers.

    If that's the "Normal" mode What about the others?

    So, we just walked through 1 possible process for allocating Source and Destination colors to the 4 chunks of that Result pixel.

    What if we did something weird though, like put the Orange destination color in the "Both" Chunk?

    Well we'd get the "d over" (Destination Over) mode, where the "Destination" gets to paint "Over" whatever lands in the Both chunk of the result pixel.

    Why 12?

    So how many combinations can we come up with from this system?

    Well, if we don't allow Source and Destination to be allocated to chunks they should never be in, then we get the following:

    * Neither: This chunk will always contain nothing. That's it's 1 and only option.

    * Source only: This chunk can contain the Source color or nothing. 2 options.

    * Destination only: This chunk can contain the Destination color or nothing. 2 options.

    * Both: This chunk can contain the Source color, or the Destination color, or nothing. 3 options.

    So that's 1 * 2 * 2 * 3 combinations, which is 12.

    So why does Construct omit some of them?

    Well one of the combinations is allocating nothing to all 4 chunks. That one's called "clear" ... yeah.

    Not so useful, since it just erases everything in every pixel all the time. (I told you we'd see why later.) :]

    Table of alpha compositing mode

    So now that we've seen that each alpha compositing mode is just some combination of filling in pixel chunks with either Source, Destination, or Nothing, could we visualize that as a table?

    Yes!

            .------Chunks------.
    MODE:      S:   D:   Bth: Nth:
    ----------+----+----+----+----
    s over     s    d    s    -      (usually just called "Over" or  "Normal")
    d over     s    d    d    -
      xor      s    d    -    -
    ----------+----+----+----+----
    s          s    -    s    -
    d atop     s    -    d    -
    s out      s    -    -    -
    ----------+----+----+----+----
    s atop     -    d    s    -
    d          -    d    d    -
    d out      -    d    -    -
    ----------+----+----+----+----
    s in       -    -    s    -
    d in       -    -    d    -
    clear      -    -    -    -
    ----------+----+----+----+----[/code:2ao8g29a]
    
    Sorry for the long post.
    Hope this helps.
  • I'm definitely going to read all of this and play around with your .capx. THANK YOU! I'm very, VERY grateful for this info and all the time you took to put it together. God bless you!! TRULY!

  • And please don't feel bad for the long post. The way my mind works is odd. At times I need long, detailed info. Other times, short-n-sweet is what's needed. God only knows when I'll need which one. LOL Honestly, I have a hard time knowing, myself. I just keep asking questions until I figure out the right question that gets me the right answer. With all your info, if I'm still confused, at least I'll be able to sort things out a bit to know where I'm still unsure. Again, I'm SO grateful for your effort and your willingness to give such a thorough answer. THIS is the kind of detailed approach I've needed since I started using C2 several years ago.

  • About

    "either because they're just the reverse of a more manageable mode described above, or because they don't appear to work, as is the case with XOR."

    Xor is not not supported in the WebGL. Works with WebGL disabled.

  • ---- Rhindon

    Thanks, Rhindon, happy to help out.

    You may want to re-download the demo if you get a chance.

    I made an update that includes a subpixel model visualization.

    The subpixel model is shown at the right, and updates in realtime, as you adjust the opacity settings.

    It's basically a live animated version of the bottom row diagrams in this image.

    ---- 99Instances2Go

    Also, thanks for the info 99Instances2Go. I added an edit to the original post. You just solved a mystery that I'd been wondering about for a while.

    I guess if someone really needed an XOR composite mode in webGL they could make a shader for it. One of the other interesting things I found out while testing XOR in non-webGL mode is that the composite modes seem to composite every canvas pixel, instead of just the pixels inside the Source's bounding box. That would make some of the destination-centric modes a bit more useful.

  • fisholith

    Man, i was very happy with your post. I've been pondering to answer the question for hours. But i did not know how. I was about to start explaining how an alpha channel works for a simple foreground/background situation. And then make the step to how Blending is no more then 'blending' two alpha channels (with there foreground) into the background. But, as said, did not know how to make that a 'for dummys story', as asked.

  • Thanks

    Also I just wanted to note that I fixed the dead link resulting from Dropbox's new "no more public folders" policy. The link should now work exactly as it did before.

    Finally for anyone else having to update their Dropbox links, the new link will end with

    "?dl=0"

    And it will take you to a download page, instead of opening as a direct download.

    If you change the 0 to a 1,

    "?dl=1"

    then you should get the original direct download behavior when clicking the link.

  • fisholith this is amazing! VERY helpful!

  • fisholith

    Plenty of explanations with decent example. I marked this post for future reference then.

  • fisholith could you by any chance export your tool to OSX for us mac users? Thanks.

  • Hey there mOOnpunk,

    Not only will I make an osx version for you, I'll make an entire new update to the whole program!

    That's what ended up happening anyway. :]

    It's got some new features, like Middle-click-drag for rotation, and each blend mode button has a tiny preview of the subpixel diagram beside it.

    Even the modes not included in C2 are shown for completeness, and if you click on them there's a popup explanation as to what they do and why C2 doesn't include them.

    Also ... there's an owl in there now. It's fairly low res though, so it's safe.

    (fancy thumbnail for Scirra Arcade version)

    (Update: Changed from version "v4b" to "v4e", small fixes, and Scirra version now shows link to this post correctly.

    OSX: fi_BlendCompositeModes_v4e_osx64.zip

    (Let me know if it doesn't work. I've been hearing the NW.js export is having problems with OSX.)

    Scirra Arcade: Blend composite modes sandbox

    I also put it on Scirra Arcade, just in case the osx version has any issues.

    Win64: fi_BlendCompositeModes_v4e_win64.zip

    ...In case anyone else happens by here before I get a chance to update the original post.

    If you have any questions, feel free to ask.

  • fisholith great stuff! Thanks for the update and sharing! <3

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • fisholith Thanks very much. Very useful tool.

  • Just released another small update "v4e", (previous was "v4b").

    Fixes and refines a few small things, like the position and visibility of the "Stretch to fill window" option, and other minor stuff.

    Also the Scirra Arcade version now shows the link to this thread correctly. Unlike the desktop version of this app, the Scirra Arcade version can't just directly open a link to a webpage, so instead it pops up a copyable link.

    Hey there totoe, thanks for the comment.

    Thanks mOOnpunk, happy to hear you find it handy.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)