Alpha Compositing

https://ciechanow.ski/alpha-compositing/

by dhotson • 7 years ago

118 27 7 years ago

ciechanow.ski

ginko• 7 years ago

Sadly no mention of gamma correction, which is where many implementations of alpha blending fail.

raphlinus4• 7 years ago

It is discussed briefly at the end, but I agree with you that it should have been given more prominence.

iamdead3• 7 years ago

This is a pretty thorough article. Why would you focus so much on gamma correction? How would you expand it?

rotexo• 7 years ago

nice. already giving me some ideas for my silly little python-and-bird-video experiments (https://www.instagram.com/reductionist_earth_catalog/?hl=en). I was using the built-in compositing in pillow (PIL fork), but maybe I should try rolling my own alpha compositing module using numpy.

mark-r4• 7 years ago

The original PIL was pure junk when it came to doing things correctly. Pillow is better but I haven't tried to quantify it yet.

sp332• 7 years ago

One approach is to use four sample points which lets us represent four different levels of coverage: 0, 1⁄3, 2⁄3, and 1:

Four samples actually gives you five levels depending on how many points are covered: 0, 1, 2, 3, 4. So these correspond to quarters, not thirds.

daxterspeed• 7 years ago

On that last note about alpha compositing I really wish there was a way to opt into correct alpha composting on the web. Colors deserve more love!

iso-8859-12• 7 years ago

I imagined while reading the article that SVG must be implemented using these techniques. You imply it differs. How?

raphlinus4• 7 years ago

There is a "color-interpolation: linearRGB" option in SVG, which seems to be implemented by browsers. See http://tavmjong.free.fr/SVG/COLOR_INTERPOLATION/ for a more detailed examination.

prideout• 7 years ago

Really nice and thorough article.

jacobolus5• 7 years ago

While describing a pixel as a little square is frowned upon in a world of signal processing, in some contexts it is a useful model that lets us calculate an accurate coverage of a pixel by the vector geometry

I wish people would try to calculate the coverage of some other reconstruction filter instead of just separate little squares. I’m not convinced it would be more expensive, and would hopefully give better results (less griddy artifacts, better spatial resolution), especially for images that will be rotated or resampled later.

If we assumed a radially symmetric kernel, then coverage would just be some monotonic function of the distance from the pixel center to the edge, and this function could be approximated using some low-degree polynomial and computed very quickly.

(Maybe this has been done?)

mark-r4• 7 years ago

Better filters are much more expensive, because they need to incorporate the influence of so many more pixels. A simple Lanczos-3 which is far from perfect requires evaluating 7x7=49 input points for each output point.

jacobolus5• 7 years ago

I’m talking about figuring out the coverage of a vector shape, not about sampling some arbitrary rendered scene or transforming a pixel image (etc.).

Calculating the percentage of some radially symmetric kernel covered by one side of a straight line should be very cheap (it’s just a monotonic function of the closest distance from the pixel center to the edge).

If we want to extend that to shapes with multiple edges close to the pixel, or to curved edges, it will get harder, but I don’t think it’s necessarily inherently more expensive than the “calculate the coverage of a little square” problem.

ssp• 7 years ago

If we assumed a radially symmetric kernel, then coverage would just be some monotonic function of the distance from the pixel center to the edge

I don't think that's true. Consider a simple case where the shape is a square and you are sampling in such a way that the closest edge point is closer to a corner of the square than the filter width. Using a function of distance you will get the same result as when sampling far from the corner. But the coverage is different in the two cases.

jacobolus5• 7 years ago

I’m just talking about rendering one edge (infinite line) separating the plane into two regions.

If you want to deal with pixels near multiple edges, it needs to be more complicated.

dguaraglia• 7 years ago

Beautifully written and illustrated article. The live examples are perfect. Back when I was in university this is what we imagined the future of technical literature would look like.

Alpha Compositing

Related Stories