All posts for the month March, 2015

As an avid World of Warcraft player, I’ve always wanted to get a good capture of my characters, for use in other media. Unfortunately, the only options were third-party model viewers, which didn’t quite get things looking exactly how the characters look in game. While the Addon API gave access to a model viewer element, there was really no way of just capturing the model, without getting the background as well.

So, I had to come up with some way to get the transparency of the model, out of said background. The good news is, that I had full control over what that background would be, and “green screening”, isn’t just limited to film. The bad news, is that this method would only work for models that were completely solid. Any semi-transparency, such as glow effects, would blend in with that background producing a new color that was both visually wrong, but also couldn’t be filtered out.

Unlike film, using live actors, a digital “actor” can be copied, and both models could have their position, rotation, and even animation synced. So I elected to double up. This time, the first one would only take up half the width of the capture area. In the remaining space, a copy was added, this time with a blue background.



This method allowed me to have a green screened version, and a second version, that would contain the original green channel of that image. So, if I were to replace the green channel of the green side, with the green channel of the blue, I’d end up with the proper colors. However, simply doing that, just ends up with a black background, not a transparent one. Yet, the secret to transparency is also in those two green channels.

See, everything from the green side’s background, to the influence said background has on the glow effect, would be in that green channel, along with any other “proper” contributions to the color of the model. But the only thing in the green channel of the blue half,  are those “proper” contributions. So, if you copy the green side’s green channel, and invert it,  then copy the blue side’s green channel, and add them together, you end up with an alpha mask. To make it a bit more clear, here’s some basic pseudo code:

alphaPixel = Math.min((255-greenSideGreenPixel)+blueSideGreenPixel,255)

Which means that each pixel in the final image, would look something like this:

pixel = Color (greenSideRedPixel,blueSideGreenPixel,greenSideBluePixel,alphaPixel)

And the result: