Add perspective correction for image, canvas and video sources

[mourner]

Closes #9158. Currently, our image, canvas and video sources do simple linear interpolation when mapping a texture to a quad for the layer. This only works if the quad is exactly a rectangle — in other cases, the texture is distorted:

This PR introduces perspective correction, calculating a perspective transform matrix given the four coordinates (based on this brilliant StackOverflow answer by @gagern 🙏), and then passing a part of it as a uniform to the raster vertex shader so that it can properly calculate the w component (used by WebGL for texture mapping correction) for each of the four vertices.

before	after

Launch Checklist

• briefly describe the changes in this PR
• include before/after visuals or gifs if this PR includes visual changes
• write tests for all new functionality
• document any changes to public APIs
• post benchmark scores
• manually test the debug page
• tagged @mapbox/gl-native — this PR includes shader changes and needs a native port
• apply changelog label ('bug', 'feature', 'docs', etc) or use the label 'skip changelog'
• add an entry inside this element for inclusion in the mapbox-gl-js changelog: <changelog>Add perspective correction for non-rectangular image, canvas and video sources</changelog>

[mourner]

One thing I forgot to mention is that the updated render test images, apart from the perspective correction, look a little darker — not different enough to fail tests but noticeable. I guess this is some kind of color profile difference between machines / OS? The new fixtures are how the CI renderes it in Circle too so this seems fine.

[HansBrende]

One thing I forgot to mention is that the updated render test images, apart from the perspective correction, look a little darker

@mourner that's probably because you're not doing due diligence in correcting the image gamma before transforming the image. One of the most common bugs in most image scaling software. See: http://www.ericbrasseur.org/gamma.html

[mourner]

@HansBrende this wouldn't explain why they were lighter in fixtures before and got darker subsequently, implying we handled gamma correctly before but then somehow broke it.

[HansBrende]

@mourner no clue! Could be that perspective transform handles gamma worse than affine transform. All I know is: when images' brightness is off after scaling/transforming... it is usually, in my experience, in fact never once has it not been, a gamma issue.

(But as the article I linked to mentions: even if gamma is handled incorrectly, the resulting image will oftentimes still look correct.)

[endanke]

@mourner I have one theory: maybe there were some other changes previously that changed the brightness, but the render tests didn't catch it because it wasn't a large enough difference. This could be verified if we revert these changes and compare the output manually with the previous expectations.