SVG Rendering using OpenGL
There are 3 major steps:
- Render the contour without any curves
- Render the quadratic curves
- Render the cubic curves
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
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:
ear found randomly
The ear maximizing the free
The ear maximizing the area
minimizing the area
The ear with the min x
with the min y coord
This lead to the following result:
Rendering the quadratic bézier curves
There are 2 options:
- Write a pixel shader (solving u˛-v equation)
Triangulation can be done iteratively
The result by adding the curves is:
Rendering the cubic bézier curvesIt 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
works if the curve direction is changing.
But it doesn't work with loops...
ConclusionIt 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