antialias vector drawing module
Lucio Torre
im implementing a vector drawing module for cocos. it works with svg
like actions: line_to, move_to, bezier_to, rotate, scale, circle, arc
when drawing a line i first compile all the comands into one huge
vertex list. there i set lots of triangles and their color.
my question is: how should i make the lines i draw antialiased?
rigth now im using multisampling (comes with pyglet). but ive seen
pages that talk about using a texture of a circle and mapping it to
the triangles to get the antialias and the rounded caps.
what do you think i should do? what would look better? im willing to
even rewrite everything if i can get better quality.
regards,
lucio.
Alex Holkner
>
> hello all,
>
> im implementing a vector drawing module for cocos. it works with svg
> like actions: line_to, move_to, bezier_to, rotate, scale, circle, arc
>
> when drawing a line i first compile all the comands into one huge
> vertex list. there i set lots of triangles and their color.
>
> my question is: how should i make the lines i draw antialiased?
>
> rigth now im using multisampling (comes with pyglet). but ive seen
You can also try GL_LINE_SMOOTH, with varying results on different
devices (apparently a blend function also needs be set on some drivers
for this to work).
> pages that talk about using a texture of a circle and mapping it to
> the triangles to get the antialias and the rounded caps.
I've used a similar trick to render lines on web pages with DHTML/JS
(this was before SVG was commonplace, obviously). It needed input
textures at 0, 45 and 90 degrees to work at all, and looked awful even
for short lines. With GL's bilinear sampling the results might be
usable, but the antialiasing would never be correct (except, of
course, when the texture is mapped 1:1).
You can get perfect and fast results by drawing a quad with a fragment
program filling in the line (and optionally antialiasing it). See the
papers by Blinn et al from Microsoft. They also do curved lines.
Alex.
Lucio Torre
>
> On 7/19/08, Lucio Torre <lucio...@gmail.com> wrote:
>>
>> hello all,
>>
>> im implementing a vector drawing module for cocos. it works with svg
>> like actions: line_to, move_to, bezier_to, rotate, scale, circle, arc
>>
>> when drawing a line i first compile all the comands into one huge
>> vertex list. there i set lots of triangles and their color.
>>
>> my question is: how should i make the lines i draw antialiased?
>>
>> rigth now im using multisampling (comes with pyglet). but ive seen
>
> You can also try GL_LINE_SMOOTH, with varying results on different
> devices (apparently a blend function also needs be set on some drivers
> for this to work).
>
but im not using lines, just triangles (lines should have nice caps
and joins for every width)
also, GL_POLY__SMOOTH i heard that it makes the triangles that make
the polys visible.
is this correct?
>> pages that talk about using a texture of a circle and mapping it to
>> the triangles to get the antialias and the rounded caps.
>
> I've used a similar trick to render lines on web pages with DHTML/JS
> (this was before SVG was commonplace, obviously). It needed input
> textures at 0, 45 and 90 degrees to work at all, and looked awful even
> for short lines. With GL's bilinear sampling the results might be
> usable, but the antialiasing would never be correct (except, of
> course, when the texture is mapped 1:1).
ive seen some samples in a webpage where it doesnt look so bad. ill
post the link later, id like to know what you think.
>
> You can get perfect and fast results by drawing a quad with a fragment
> program filling in the line (and optionally antialiasing it). See the
> papers by Blinn et al from Microsoft. They also do curved lines.
ill take a look at that.
how easy is to get fragment shaders that worky reliably across all
video cards and systems?
Lucio.
Lucio Torre
>>> the triangles to get the antialias and the rounded caps.
>>
>> I've used a similar trick to render lines on web pages with DHTML/JS
>> (this was before SVG was commonplace, obviously). It needed input
>> textures at 0, 45 and 90 degrees to work at all, and looked awful even
>> for short lines. With GL's bilinear sampling the results might be
>> usable, but the antialiasing would never be correct (except, of
>> course, when the texture is mapped 1:1).
>
> ive seen some samples in a webpage where it doesnt look so bad. ill
> post the link later, id like to know what you think.
>
this is the link:
http://homepage.mac.com/arekkusu/bugs/invariance/TexAA.html
Lucio Torre
im doing this:
research.microsoft.com/~cloop/loopblinn05.pdf
"Resolution Independent Curve Rendering using Programmable Graphics Hardware "
its a great paper. although im going to have trouble with antialiasing
and doing circles/arcs.
any other paper i should read?
Lucio.
illume
> ill take a look at that.
> how easy is to get fragment shaders that worky reliably across all
> video cards and systems?
>
cg is one way to go for easier compatibility with fragment programs.
You can get it to compile out different types of programs for you --
you don't need to have cg installed with your game. It's kind of a
big task to get things working on various card/driver/language
combinations though.
However even basic opengl won't work across all systems and video
cards... quite far from it. so maybe you can get them working for a
large %, and that may be good enough for you...
Some stats to give you more of an idea:
http://www.catnapgames.com/blog/181
http://www.steampowered.com/status/survey.html (note only directx +
other stats)
Here's some stats from one mature game by an opengl expert, that
doesn't include linux/bsd/etc installs. It's a java games that works
on at least win/mac/linux.
ref: http://forums.indiegamer.com/showpost.php?p=139044&postcount=8
O/S Version Successes Failures Total Failure Rate %
Mac 10.3 1631 232 1863 12.5
Mac 10.4 8199 815 9014 9.0
Win 5.1 9357 2526 11883 21.3
19394 3666 23060 15.9
O/S GL Version Installs
Mac OS 10.3 1.1 517
Mac OS 10.3 1.3 601
Mac OS 10.3 1.5 512
Mac OS 10.4 1.1 733
Mac OS 10.4 1.2 1415
Mac OS 10.4 1.3 1162
Mac OS 10.4 1.5 2833
Mac OS 10.4 2.0 2058
Windows XP 1.2 364
Windows XP 1.3 2088
Windows XP 1.4 2305
Windows XP 1.5 1061
Windows XP 2.0 3305