Mesh Gradients: A Study of Transitions Across Patch Boundaries
A Work in Progress — Last updated 5 January 2012
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
A simple 2x2 Coons Patch mesh gradient where the eight outer
corners are black and the center corner is white. A distinct
white cross can be seen.
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 consisting of five stops. The outer two
are black, the center one is white, and the remaining
two are set to 90% white. The position of the 90% white stops
are different for each gradient. The red line shows the
black to white profile for each gradient.
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
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:
The top gradient is a linear gradient.
The middle gradient is a Coons Patch mesh gradient that
duplicates the linear gradient. The location of the Bezier
handles (circles) are shown in blue. They are at their default
positions spaces one-third of the way between the corner
The bottom gradient is a Coons Patch mesh gradient where the
top and bottom handles have been moved to smooth out the
transition across the patch boundaries. The 90% stop has been
changed to 80%. The purple line on the bottom gradient shows
the new color profile.
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:
Left: Color defined by a two-dimension bi-linear interpolation
of the corner colors.
Right: the color interpolation mapped to the patch region. The
Bezier end points (corners) and handles are shown as diamonds
and circles respectively.
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
Three Coons patch meshes are shown where the left corners are
black and the right corners are white. Overlaid each gradient
is the color profile determined by the handle placements of
the top and bottom Bezier curves.
The top gradient shows the color profile with the default
handle placement (i.e. when a curve is defined by a lineto).
The Bezier handles of top and bottom of the mesh are shown in
blue while the color profile with the profile's effective
Bezier handles are shown in red.
The middle gradient shows the the color profile when the
handle "lengths" are zero (i.e. when the handles are placed on
top of the corners.
The bottom gradient shows the color profile when the handles
are placed over the opposite corners.
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
Adobe Illustrator and Corel Draw
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:
- Advantage 1
By exporting as multiple patches, they have finer control
over the color gradients. This allows a smaller discontinuity
where a corner point is set to a maximum or minimum value.
- Advantage 2
They can display to the artist simpler meshes than what
are needed in for objects with complex paths. Recall
that a Coons Patch has one Bezier per side so one patch
is needed for each Bezier along the path.
Cyril found a discussion of Illustrator and Corel Draw in
a paper by
Liang, Wen, and Shum. The authors claim that in order to
reproduce Illustrator and Corel Draw's meshes they need a
"monotonic cubic spline" instead of a linear interpolation.
Some comments about the paper:
A Ferguson patch is equivalent to a Coons patch. The
difference is in how the control/tangent points are
defined. The length of a Bezier handle is one-third the
length of a Ferguson tangent.
The Ferguson patch in the paper uses three independent
monotonic cubic spline interpolations, one for each primary
color. This is fine when automatically optimizing a mesh to
match an existing image (e.g. photograph) as they do in their
paper but would be too complicated to do routinely by hand.
By dividing each mesh in two both vertically and horizontally
it is possible to reduce effects of non-smooth transitions:
The original 2x2 Coons Patch mesh has been converted to a 4x4
mesh by dividing each patch in two both vertically and
horizontally. Edge effects have been reduced. One could
probably do better by automating the division and placement of