Using ADD operator to prevent seams (was: Clarification Re: [cairo] Mac Tiger Core Image)

[Carl Worth]

On Thu, 17 Mar 2005 18:27:17 -0500, mental at rydia.net wrote:
> Quoting mental at rydia.net:
> > I'm going to attach a simple SVG that provides an example of the
> > rendering problems I am trying to avoid -- namely the four
> > hairlines that separate the segments of the ring, despite their
> > meeting perfectly from a geometric perspective.

That's a well-constructed example. Thanks for the challenge -- this
was fun to puzzle over. As predicted, just using libsvg-cairo to
render the image does result in objectionable seams:

http://cairographics.org/~cworth/images/star_and_ring-fringing.png

> FWIW, it's specifically intended to illustrate a case where I don't
> understand how rendering on separate surfaces could solve the
> problem entirely.

It's a bit trickier, but it can be done.

> Maybe there is some trick using different compositing operators that
> I'm missing, though.  Can you or someone else on the list suggest a
> sequence of cairo operations that could render this without
> hairlines?

By "render this", I'm going to make the simplifying assumption that
you'd like to see cairo code to render the intended figure, (as
opposed to cairo code to render the sliced up pieces as presented in
the SVG file). I've just committed cairo-demo/png/star_and_ring.c
which solves the problem. Here's a link to the code online:

	http://tinyurl.com/3utl8
	[1]

The approach I used does always draw the complete ring shape, and
draws the star and the ring twice to two intermediate surfaces. First,
draw the ring over the star, but with a clip that includes only the
top and bottom quarter triangles of the surface. Then I draw the star
over the ring with a clip that includes only the left and right
quarter triangles. Finally, I composite each of these intermediate
result onto the final surface using CAIRO_OPERATOR_ADD [2].

The resulting output image can be viewed here:

http://cairographics.org/~cworth/images/star_and_ring.png

The important thing to note here is that antialiasing was never
disabled. The clipping is implemented with an 8-bit alpha mask, but
the two intermediate results still combine without any seams.

> (Then, if that sequence of operations is nontrivial, I'd still need
> an algorithm to derive such a compositing sequence automatically,
> given an arbitrary arrangement of shapes...)

Yeah, I'm still leaving that as an exercise for the reader at this
point. ;-)

I don't claim that this little code sample solves all the problems
with things that a user might do in inkscape or with SVG. But, I hope
I've demonstrated that it's worth investigating solving problems in
ways more sophisticated than "turn off antialiasing".

And, it may not be totally unrealistic for a user to approach this
drawing problem by using clipping in a way similar to what I've done
here.

-Carl

[1] http://cvs.freedesktop.org/*checkout*/cairo/cairo-demo/png/star_and_ring.c?rev=1.1&content-type=text%2Fplain

[2] NOTE: The solution described above is inefficient as only one
extra intermediate surface is really needed, not two. The first
intermediate result could just as easily go straight to the final
output surface. But I wrote it the way I did for symmetry's sake.
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: application/pgp-signature
Size: 189 bytes
Desc: not available
Url : http://lists.freedesktop.org/archives/cairo/attachments/20050318/d577a30b/attachment.pgp