63

I am currently investigating the possibility of rendering vector graphics from an SVG file using OpenGL and OpenGL ES. I intend to target Windows and Android. My ideal solution would be to have a minimal C library that generates a polygon triangulation from a given SVG file. This would then generate standard OpenGL or OpenGL ES calls, and use a display list or vbo for optimization when redrawing. I would simply draw a display list to draw the vector image after translating and rotating, allowing me to mix this with other OpenGL calls.

So far I see that the suggestions are to firstly use QT or Cairo. - This is not an option given that I wish to manage my own OpenGL context without bloated libraries (in the context of what I am trying to achieve). Nor is this suitable for Android.

Second option is to use libraries that render to a texture. While this might be ok for static vector graphics, it's not an efficient or feasible option for games where scaling and rotations occur frequently.

Thirdly there is the possibility of using OpenVG. There are some opensource implementations of the OpenVG specification (ShivaVG etc), but I am yet to find a library that is capable of generating the appropriate OpenVG calls from a given SVG file at runtime, and I can't see how to optimize this as we might wish to with a display list or vbo.

All three methods suffer limitations. I think the most promising option is using an OpenVG implementation if no other solution exists. So my question is, are there any libraries out there that do what I want, or close to what I want? If not, is there a good reason why not? And would it be better to attempt to do this from the ground up instead?

Matt Esch
  • 22,661
  • 8
  • 53
  • 51
  • 1
    parsing an svg file for a path isn't difficult. check the following for drawing a quadratic bezier curve. http://www.opengl.org/resources/code/samples/redbook/bezcurve.c – Grady Player Jun 09 '11 at 06:51
  • @Grady glEvalCoord doesn't exist in OpenGL ES; and neither does GLU, the tesselator of which would have been crucial, for instance with convex polygons. @me232 good question, upvote'd & favorite'd – Calvin1602 Jun 09 '11 at 08:29
  • +1 Good research and nicely framed question – Ramya Maithreyi Jun 09 '11 at 10:19
  • yeah your are right, i was thrown by the minimal C library part. – Grady Player Jun 09 '11 at 15:38
  • In response to the Qt part: you can use Necessitas to develop C++ applications using Qt on Android. It works wonderfully and in my case doesn't run as if it were bloated, but YMMV of course. Link: http://necessitas.kde.org/ – pauluss86 Mar 11 '13 at 13:34
  • For those coming to this question later: "zShapes is a tool that allows you to render resolution independent vector graphics in real-time on your GPU. The tool can convert any Java2D shape to a set of triangles that can later be rendered with OpenGL. Antialiasing is also supported." http://www.java-gaming.org/index.php?topic=14778.0 That might not be usable out of the box, but points to some great ideas. – LarsH Mar 13 '13 at 19:02
  • This is a slightly specialized version of the questions http://stackoverflow.com/questions/4129932/rendering-vector-graphics-in-opengl/ and http://stackoverflow.com/questions/4054612/2d-vector-graphic-renderer-for-opengl. The specialization consists of asking about SVG instead of vector graphics in general. – Fizz Aug 06 '14 at 15:05
  • 1
    It's also basically a duplicate of http://stackoverflow.com/questions/1027179/displaying-svg-in-opengl-without-intermediate-raster – Fizz Aug 06 '14 at 15:21

6 Answers6

18

My answer is going to about displaying vector graphics wtih OpenGL in general, because all solutions for this problem can support rather trivially SVG in particular, although none support animated SVGs (SMIL). Since there was nothing said about animation, I assume the question implied static SVGs only.

First, I would not bother with anything OpenVG, not even with MonkVG, which is probably the most modern, albeit incomplete implementation. The OpenVG committee has folded in 2011 and most if not all implementations are abandonware or at best legacy software.

Since 2011, the state of the art is Mark Kilgard's baby, NV_path_rendering, which is currently only a vendor (Nvidia) extension as you might have guessed already from its name. There are a lot of materials on that:

You can of course load SVGs and such https://www.youtube.com/watch?v=bCrohG6PJQE. They also support the PostScript syntax for paths. You can also mix path rendering with other OpenGL (3D) stuff, as demoed at:

NV_path_rendering is now used by Google's Skia library behind the scenes, when available. (Nvidia contributed the code in late 2013 and 2014.) One of the cairo devs (who is an Intel employee as well) seems to like it too http://lists.cairographics.org/archives/cairo/2013-March/024134.html, although I'm not [yet] aware of any concrete efforts for cairo to use NV_path_rendering.

NV_path_rendering has some minor dependencies on the fixed pipeline, so it can a bit of nuisance to use in OpenGL ES. This issue documented in the official extension doc linked above. For a workaround see for example what Skia/Chromium has done: https://code.google.com/p/chromium/issues/detail?id=344330

An upstart having even less (or downright no) vendor support or academic glitz is NanoVG, which is currently developed and maintained. (https://github.com/memononen/nanovg) Given the number of 2D libraries over OpenGL that have come and gone over time, you're taking a big bet using something not supported by a major vendor, in my humble opinion.

Fizz
  • 4,782
  • 1
  • 24
  • 51
13

Check out MonkVG an OpenVG like API implementation on top of OpenGL ES.

Also, for SVG rendering on top of OpenVG (MonkVG) checkout MonkSVG.

MonkVG has been built for iOS, OSX, and Android platforms.

I'm the author of both libraries and would be happy to answer any questions.

zerodog
  • 568
  • 4
  • 11
  • 1
    Hi Micah. I found the Windows project for MonkVG and managed to build it with VS2010. Are there any working examples that compile for Windows? My attempt to follow the example crashed. I create my own window and context manually but I suppose a GLUT based solution is fine if you have an example based on it. – Matt Esch Jan 20 '12 at 09:32
9

It needs to be said that rendering SVG or OpenVG with OpenGL or OpenGL ES is fundamentally a bad idea. There are reasons the OpenVG implementations are all so slow and largely abandoned. The process of tessellating paths (the foundation of all SVG/OpenVG rendering) into triangle lists as required by OpenGL is fundamentally slow and inefficient. It basically requires inserting a sort/search algorithm into the 3D rendering pipeline, which cripples performance. There is also the problem that a dynamic memory allocation scheme is required because the size of the data set is unknown since SVG places no limits on the complexity of the path geometry. A really poor design.

SVG and OpenVG were created by developers who had little understanding of how modern 3D graphics hardware engines actually work (triangle lists). They were created to be an open alternative to Adobe Flash, which also has the same flawed architecture that has made Flash reviled in the industry for unpredictable performance.

My advice is to rethink your design and use OpenGL triangle lists directly. You may have to write more code, but your app will perform about a thousand times better and you can more easily debug your code than someone elses.

ClayMontgomery
  • 2,786
  • 1
  • 15
  • 14
  • 1
    Just a note: There are plenty of ways to draw SVG with OpenGL, and tessellating paths to triangles is probably the worse of them. What about using shaders? – Adrian Maire Nov 11 '16 at 07:54
  • @AdrianMaire Do you know of any shader-based approaches in existence? – trusktr Oct 14 '21 at 07:43
  • I don't remember any ready-to use library. The approach I was refering is to draw a big rectangle covering the full path, then for each pixel, detecting if it is inside/outside/border, and calculate it color. Supersampling, and other technics can be applied. I am sure there are papers out there about this. – Adrian Maire Oct 14 '21 at 08:13
6

I am currently investigating the possibility of rendering vector graphics from an SVG file > using OpenGL and OpenGL ES. I intend to target Windows and Android. My ideal solution would be to have a minimal C library that generates a polygon triangulation from a given SVG file. This would then generate standard OpenGL or OpenGL ES calls, and use a display list or vbo for optimization when redrawing. I would simply draw a display list to draw the vector image after translating and rotating, allowing me to mix this with other OpenGL > calls.

If you only want to transform SVG vector shapes into OpenGL|ES, then I suggest to do the parser and the logic yourself. Note that SVG is a huge spec, with different features like paint servers (gradients, patterns ...), references, filters, clipping, font handling, animations, scripting, linking, etc, etc.

If you want full svg support, then there's a library on http://code.google.com/p/enesim called egueb (and particularly esvg) which uses enesim (a rendering library that has software and opengl backends) for the drawing. In most cases it uses shaders and everything is rendered into a texture, the library is very flexible allowing you to adapt to your particular needs like modifying the rendered scene, transform it, etc. Because the gl drawing is done always into a texture.

So far I see that the suggestions are to firstly use QT or Cairo. - This is not an option given that I wish to manage my own OpenGL context without bloated libraries (in the context of what I am trying to achieve). Nor is this suitable for Android.

Second option is to use libraries that render to a texture. While this might be ok for static vector graphics, it's not an efficient or feasible option for games where scaling and rotations occur frequently.

In the particular case of the gl backend, enesim does not create a GLX (or any other window dependent context), you have to provide it, so it adapts perfectly to your situation as it only uses GL calls.

The only drawback is that the library is not complete yet in terms of gl support or full SVG spec support, but depending on your needs, seems to me like a good option.

turran
  • 69
  • 2
  • 2
  • What algorithm did you use to convert a cubic bezier curve (path) to OpenGL ? What about anti-aliasing – Raks Jun 23 '13 at 14:32
3

From http://shivavg.svn.sourceforge.net/viewvc/shivavg/trunk/src/shPipeline.c?revision=14&view=markup : 

static void shDrawVertices(SHPath *p, GLenum mode)
{
int start = 0;
int size = 0;

/* We separate vertex arrays by contours to properly
handle the fill modes */
glEnableClientState(GL_VERTEX_ARRAY);
glVertexPointer(2, GL_FLOAT, sizeof(SHVertex), p->vertices.items);

while (start < p->vertices.size) {
size = p->vertices.items[start].flags;
glDrawArrays(mode, start, size);
start += size;
}

glDisableClientState(GL_VERTEX_ARRAY);
}

So it does use a VBO. So I'd suggest making your own SVG parser / use a pre-made one, and forward the calls to ShivaVG.

You still have the problem that ShivaVG is in C (and not in Java) and creates an opengl context (and not opengles, if I read the code correctly). So even if you compile it using Android's NDK, you'll have to modify the code ( for instance, I've seen a few glVertex3f around, but they don't seem to be much needed... hope for the best). The other option, of course, it to port the code from C to Java. Maybe not as painful as you could imagine.

Good luck !

Calvin1602
  • 9,413
  • 2
  • 44
  • 55
  • 2
    Thanks, I will take a look into this. I am surprised that given the demand for hardware accelerated vector graphics and the fact that OpenVG was designed with mobile devices in mind, that there isn't an implementation that works out of the box. I am aware of a project written in C# that attempts to do something very similar with successful results [http://neuronspew.wordpress.com/category/svg-game-engine-project/](http://neuronspew.wordpress.com/category/svg-game-engine-project/) I will be sure to make my code public if I can get this working. – Matt Esch Jun 10 '11 at 01:39
  • 1
    Thanks ! Please update this thread the day you're done with it ? – Calvin1602 Jun 10 '11 at 08:56
  • ShivaVG does not use VBOs. Use of glVertexPointer() does not imply using a VBO; in this code, the vertices are taken from the memory pointed to by p->vertices.items. I know this from having to debug a situation where a VBO was left bound by another part of the program when calling this function. – Tim Apr 23 '18 at 11:28
1

You can have a look at AmanithVG, they seem to have implemented a good paths -> triangles pipeline. I've tried the iOS GL tiger example, and it seems that triangulation is not a real bottleneck.

mirknac
  • 36
  • 1