brianchirls / Seriously.js

A real-time, node-based video effects compositor for the web built with HTML5, Javascript and WebGL
MIT License
3.87k stars 354 forks source link

Blend RGB Colors Using Gamma 1.0 #86

Closed brianchirls closed 9 years ago

brianchirls commented 9 years ago

Typical blending by weighted average of input colors stinks, as explained here: https://www.youtube.com/watch?v=LKnqECcg6Gw

We should enable gamma-corrected blending for at least the following effects:

I'm undecided whether to enable this by default. It probably has a much better effect, and many users will probably not know to enable it. On the other hand, it's not backward compatible. But we don't exactly follow strict semver here. Any thoughts?

forresto commented 9 years ago

I'd say go for it, and make the old way an option default: false.

brianchirls commented 9 years ago

I'd like to make this setting mimic how Photoshop does it. I can't quite figure out the math. I found this formula (pseudo-code), which makes sense:

tmp = pow(source1, GAMMA) * alpha + pow(source2, GAMMA) * (1.0 - alpha);
output = pow(tmp, 1.0/GAMMA);

But Photoshop's default value is 1.00, which has the same effect of setting GAMMA = 2.0. Does anybody know what Photoshop does with that parameter value?

Here's what it says in the CS6 manual:

Blend RGB Colors Using Gamma Controls how RGB colors blend together to produce composite data (for example, when you blend or paint layers using Normal mode). When the option is selected, RGB colors are blended in the color space corresponding to the specified gamma. A gamma of 1.00 is considered “colorimetrically correct” and should result in the fewest edge artifacts. When the option is deselected, RGB colors are blended directly in the document’s color space.

Then there is the question of what the default value should be (or if it should be adjustable at all). The video implies that gamma should be 2.0, but according to Wikipedia, it should be in the 2.2 range.

brianchirls commented 9 years ago

The After Effects manual on color management and color basics is a little more helpful.

Also, I wonder if banding will be an issue. May have to run some experiments.

brianchirls commented 9 years ago

This is now applied to the develop branch if anyone wants to give it a try. I decided to go with a straight blendGamma parameter as the exponent and not try to mimic whatever weirdness Photoshop is doing.

Temporarily hold off on applying this to layers since it would require a major refactor and might hurt performance. What do you guys think? It's also worth considering later on for repeat as well.

positlabs commented 9 years ago

Ohhhh this could be really good for Chromavore. I'll give it a spin when I get some time.

brianchirls commented 9 years ago

Yeah, @positlabs, would appreciate your feedback.

brianchirls commented 9 years ago

You too @forresto.

BTW, for the record, the way to turn this off is to just set blendGamma to 1.0

positlabs commented 9 years ago

I ran chromavore for 5 seconds an compared the results. Here they are.

old gamma nogamma1

new gamma gamma1

It's generally brighter, but details seem more pronounced with gamma 1.0.

brianchirls commented 9 years ago

Either way, it looks gorgeous. Good work, @positlabs. I think it's an artistic choice at that point, no? Better to have the option than not at all, right?

Do you like it?

positlabs commented 9 years ago

Thanks!

I do like it! I agree that it should be optional, but I'll be using it from now on.

brianchirls commented 9 years ago

Awesome. Just to clarify the terminology and controls...

This does not work the same way as Photoshop. It uses the formula above, so if you set blendGamma to 1.0, it reverts back to the old way. The default is 2.2.

I'm gonna leave this open a little longer and think about what to do about the layers effect. I'm open to any further suggestions/feedback.

brianchirls commented 9 years ago

I'm gonna close this one for now. Will re-consider what to do about layers and repeat later.