Mesh Gradients: A Study of Transitions Across Patch Boundaries

A Work in Progress — Last updated 5 January 2012

The Problem

After playing around with Coons Patch mesh gradients in Inkscape, one significant weakness with the gradients has been identified. Cyril came up with the following example that clearly demonstrates the problem:

The apparent cross is due to the non-smooth transition across the patch boundary. In a Coons Patch, the color of a point is found by a linear interpolation between corner points. See: Cyril's comments for more details.

This problem of non-smoothness can be seen even in simple linear gradients:

As one can see in the above linear gradients, the eye is fooled into thinking that the location of the 90% white stop is whiter than the areas immediate right and left of the stop. This is due to the Mach Banding effect.

Moving the "handle" points, which are by default one-third of the way between corner points, can smooth out the transition. While moving the handles along a linear Bezier curve does not change the shape of the curve, moving them does change the "speed" of the parameterization which changes the color profile. This is illustrated below:

Understanding Coons Patches

Coons patches are defined by four Beziers. The curves define not only the geometric outline but also how the color is spread inside the patch as illustrated below:

If a side of a patch is a line, it is possible to change the color profile independently of the curve shape in a limited way by moving the Bezier handles along the line as as the color profile is dependent on the "speed" of the curve's parameterization.

Note that in the above figure the effective Bezier handles of the color profile are constrained to horizontal lines one-third of the distance between the top and bottom range of the color profile. As a result, one can never have a profile where the derivative of the color change at a boundary is zero. Also note, the handles can be moved outside the gradient region to the left or right but that causes a discontinuity in the color profile as the effective profile Bezier will overlap itself.

The introduction of "tensor" terms to the mesh gradient allows further control of the way color is spread inside the mesh. The tensor points act as "handles" of a virtual Bezier curve with the ends being opposite side Bezier handles. They control the spread of color along this Bezier in the same way that the side Bezier handles control the color profile along the patch sides. However, moving the tensor control points still does not allow one to avoid discontinuities at patch boundaries.

So why don't Adobe Illustrator and Corel Draw have the same problems with their meshes that are illustrated above? Cyril has discovered that a single patch in Illustrator gets exported to multiple patches in PDF. This has two possible advantages: