# SVG Rendering using OpenGL

There are 3 major steps:

- Render the contour without any curves
- Render the quadratic curves
- Render the cubic curves

## 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:

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

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:

## Rendering the quadratic bézier curves

There are 2 options:

- Triangulate
- Write a pixel shader (solving u˛-v equation)

Triangulation can be done iteratively

Or recursively

The result by adding the curves is:

## 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.

Two quadratics (in red) approximating the white cubic curve

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.

Back to matthPage