SVG Rendering using OpenGL


There are 3 major steps:
Tux resulting image

Rendering a polygon


This can seems obvious because OpenGL has an option to render polygon. But in fact it isn't.
The OpenGL code does'nt work in all condition and the result is hugly.
So the way we have is to triangulate polygons. There are multiple algorithms around.
The most well known (but not the fastest) is the ear clipping. Iteratively we look for an ear and we cut it from the polygon.
But there are several way to choose an ear:

First ear found    First ear found randomly   Ear maximizing the angle   Ear maximizing area
                The first ear found                                    The first ear found randomly                The ear maximizing the free angle                    The ear maximizing the area

Ear minimizing area  The ear with the minimum x  Ear with minimum y coordinate
        The ear minimizing the area                        The ear with the min x coord                        The ear with the min y coord

This lead to the following result:
Tux without curves

Rendering the quadratic bézier curves

There are 2 options:

Triangulation can be done iteratively                                                                          
 Iterative decomposition  Iterative triangulation on inverse bezier curve


Or recursively
Recursive subdivision  Recursive subdivision inverse

The result by adding the curves is:


Tux with curves added


Rendering the cubic bézier curves

It is harder to produce good cubic bézier curves. One solution is to approximate by 2 or more quadratic one.

Cubic curve and its quadratic approximation  Quadratic approximation of a cubic curve
Two quadratics (in red) approximating the white cubic curve

Approximation of a cubic curve by 2 quadratic ones   How to treat loops ?
It works if the curve direction is changing.                                                                      But it doesn't work with loops...

Conclusion

It can be really fast to made the SVG rendering using OpenGL primitives. With the cost of a small inaccuracy.
To add antialiasing just draw the lines of the polygon with the line smooth OpenGL option.

Famous lion


Back to matthPage