SVG Backend gouraud_triangle Correction

[avinashmnit30]

PR Summary

As pointed out in #11321, the SVG backend does not render Gouraud shading correctly. ts mentioned that SVG backend is following http://www.svgopen.org/2005/papers/Converting3DFaceToSVG/index.html paper. But the Gouraud triangle implementation is incorrect. This pull request fixes the implementation.

Code for reproduction: https://matplotlib.org/2.0.1/examples/pylab_examples/quadmesh_demo.html

SVG Backend Orignal Output:

Using correct implementation:

[tacaswell]

Great!

Can you investigate why the tests are failing?

We seem to have lost the pep8 checking on master, there are some issues (trailing white space, too long lines) that will need to be cleaned up.

[avinashmnit30]

@tacaswell Checked and corrected the PEP8 test issues.

[avinashmnit30]

@tacaswell The "travis-ci" test suite contains a pcolormesh test in test_axis which uses SVG backend for gouraud shading. Due to the wrong implementation, the expected SVG image is generating the failure.

Expected SVG Output (Incorrect)

Corrected Fix Output

[ImportanceOfBeingErnest]

The "Corrected Fix Output" has some strange pixels in the rightmost image. Are they expected? In how far is this "more correct" than the current output?

[avinashmnit30]

@ImportanceOfBeingErnest The rightmost image is using Gouraud shading in SVG. The strange pixels are due to limitations of SVG features. Most of the triangle edges are dissolved (compared to flat shading) due to use of 3 colors per triangle and filtering them. But some of them would remain visible as there is no direct method to implement Gouraud shading in SVG.
http://www.svgopen.org/2005/papers/Converting3DFaceToSVG/index.html
The first image (Expected SVG Output) is almost similar to the flat shading. Similar problem can be seen in #11321. This works well for smoother images.

[ImportanceOfBeingErnest]

I wonder if the current implementation, while academically incorrect, would give smoother results, one should not stick to it?

[avinashmnit30]

@ImportanceOfBeingErnest Current implementation is not giving smoother results. You misread it. The SVG gouraud shading (implemented in the paper: http://www.svgopen.org/2005/papers/Converting3DFaceToSVG/index.html) works well for smoother input images.

[ImportanceOfBeingErnest]

Ok, seems I misunderstood that. Would you mind spending some words on what "Expected SVG Output (Incorrect)" and "Corrected Fix Output" refer to and why something like

would be preferred over

?

[tacaswell]

@avinashmnit30 can you update the svg image (the easiest way is to run the tests locally and then commit the svg)?

https://github.com/matplotlib/matplotlib/blob/master/lib/matplotlib/tests/baseline_images/test_axes/pcolormesh.png

is the Agg version of the test so the updated one is certainly closer. We are also looking an png versions of the svg file the 'hot' pixel may be a rendering artifact (not a feature of the svg file).

[avinashmnit30]

@tacaswell Completed the SVG image update.

[avinashmnit30]

@ImportanceOfBeingErnest
Expected SVG Output is the test_axes.py expected SVG backend output for pcolormesh test. The test compares this image with the generated image (Corrected Fix Output in this case, which is produced by the changes made in the draw_gouraud_triangle function). The Corrected Fix Output image is better as it has less visible triangle edges (which should be the case with gouraud rendering).

[jklymak]

In Firefox, the svg still renders as flat vertices, though the annoying dashes between facets goes away. In Illustrator both the old and new versions look bad.

So,... what is the canonical SVG viewer? I don't see that either the ones I use manage to make gouraud shading look correct...

Old Firefox

New Firefox

[tacaswell]

@avinashmnit30 If you get a chance could you rebase and squash this into 1 or 2 commits?

[tacaswell]

As far as I know there is not a 'canonical' svg viewer, just a specification document.

[avinashmnit30]

@tacaswell I have rebased it to single commit now.

[tacaswell]

Thanks @avinashmnit30 !