使用 OpenGL（和 OpenGL ES）渲染 SVG

Question

我目前正在研究使用 OpenGL 和 OpenGL ES 从 SVG 文件渲染矢量图形的可能性。我打算针对 Windows 和 Android。我理想的解决方案是拥有一个最小的 C 库，可以从给定的 SVG 文件生成多边形三角剖分。然后，这将生成标准 OpenGL 或 OpenGL ES 调用，并在重绘时使用显示列表或 vbo 进行优化。我只需绘制一个显示列表来绘制平移和旋转后的矢量图像，从而允许我将其与其他 OpenGL 调用混合。

到目前为止我看到的建议是首先使用QT或Cairo。 - 这不是一个选项，因为我希望在没有臃肿库的情况下管理自己的 OpenGL 上下文（在我想要实现的上下文中）。这也不适合 Android。

第二个选项是使用渲染到纹理的库。虽然这对于静态矢量图形来说可能没问题，但对于经常发生缩放和旋转的游戏来说，这不是一个有效或可行的选择。

第三，可以使用OpenVG。 OpenVG 规范有一些开源实现（ShivaVG 等），但我还没有找到一个能够在运行时从给定的 SVG 文件生成适当的 OpenVG 调用的库，而且我不知道如何优化它：我们可能希望使用显示列表或 vbo。

所有这三种方法都存在局限性。我认为如果没有其他解决方案存在，最有希望的选择是使用 OpenVG 实现。所以我的问题是，是否有任何库可以满足我的需求，或者接近我想要的功能？如果没有，是否有充分的理由不这样做？尝试从头开始做这件事会更好吗？

Answer 1

我的答案是关于使用 OpenGL 显示矢量图形，因为这个问题的所有解决方案都可以支持相当普通的 SVG，尽管没有一个支持动画 SVG (SMIL)。由于没有提及动画，我认为这个问题仅暗示静态 SVG。

首先，我不会为任何 OpenVG 烦恼，甚至不会为 MonkVG 烦恼，MonkVG 可能是最现代的，尽管不完整的实现。 OpenVG 委员会已于 2011 年解散，大多数（如果不是全部）实现都是废弃软件或最多是遗留软件。

自 2011 年以来，最先进的技术是 Mark Kilgard 的宝贝 NV_path_rendering，它目前只是供应商 (Nvidia) 的扩展，正如您可能已经从其名称中猜到的那样。有很多相关材料：

• https://developer.nvidia.com/nv-path-渲染 Nvidia hub，但登陆页面上的某些材料不是最新的
• http://developer.download.nvidia.com/devzone/devcenter /gamegraphics/files/opengl/gpupathrender.pdf Siggraph 2012 论文
• http://on-demand.gputechconf .com/gtc/2014/presentations/S4810-acceleating-vector-graphics-mobile-web.pdf GTC 2014 演示文稿
• http://www.opengl.org/registry/specs/NV/path_rendering.txt 官方扩展文档

您当然可以加载 SVG 等 https://www.youtube.com/watch?v=bCrohG6PJQE。它们还支持路径的 PostScript 语法。您还可以将路径渲染与其他 OpenGL (3D) 内容混合，如演示所示：

• https://www .youtube.com/watch?v=FVYl4o1rgIs
• https://www.youtube.com/watch?v=yZBXGLlmg2U

NV_path_rendering 现在由 Google 的 Skia 库（如果可用）在幕后使用。 （Nvidia 在 2013 年末和 2014 年贡献了该代码。）其中一位 cairo 开发人员（也是英特尔员工）似乎也喜欢它http://lists.cairgraphics.org/archives/cairo/2013-March/024134.html，尽管我[还]不知道 cairo 使用 NV_path_rendering 的任何具体努力。

NV_path_rendering 对固定管道有一些小的依赖性，因此在 OpenGL ES 中使用它可能有点麻烦。此问题记录在上面链接的官方扩展文档中。有关解决方法，请参阅 Skia/Chromium 所做的示例：https:// code.google.com/p/chromium/issues/detail?id=344330

一个拥有更少（或完全没有）供应商支持或学术浮华的新贵是 NanoVG，它目前正在开发和维护。 (https://github.com/memononen/nanovg) 考虑到 OpenGL 上的 2D 库的数量随着时间的推移，你正在冒很大的赌注，使用不受主要供应商支持的东西，以我的拙见。

Answer 2

查看 MonkVG 一个基于 OpenGL ES 的类似 OpenVG 的 API 实现。

另外，对于 OpenVG (MonkVG) 之上的 SVG 渲染，请查看 MonkSVG。

MonkVG 是为 iOS、OSX 和 Android 平台构建的。

我是这两个库的作者，很乐意回答任何问题。

Answer 3

需要指出的是，使用 OpenGL 或 OpenGL ES 渲染 SVG 或 OpenVG 从根本上来说是一个坏主意。 OpenVG 的实现如此缓慢并且大部分被放弃是有原因的。按照 OpenGL 的要求将路径（所有 SVG/OpenVG 渲染的基础）细分为三角形列表的过程从根本上来说是缓慢且低效的。它基本上需要在 3D 渲染管道中插入排序/搜索算法，这会削弱性能。还有一个问题是需要动态内存分配方案，因为数据集的大小是未知的，因为 SVG 对路径几何的复杂性没有限制。一个非常糟糕的设计。

SVG 和 OpenVG 是由对现代 3D 图形硬件引擎实际工作原理（三角形列表）知之甚少的开发人员创建的。它们被创建为 Adob​​e Flash 的开放替代品，而 Adob​​e Flash 也具有相同的有缺陷的架构，这使得 Flash 因其不可预测的性能而在业界受到诟病。

我的建议是重新考虑你的设计并直接使用 OpenGL 三角形列表。您可能需要编写更多代码，但您的应用程序的性能将提高大约一千倍，并且您可以比其他人更轻松地调试您的代码。

Answer 4

我目前正在研究从 SVG 文件渲染矢量图形的可能性 >使用 OpenGL 和 OpenGL ES。我打算针对 Windows 和 Android。我的理想解决方案
将是有一个最小的 C 库，可以根据给定的值生成多边形三角剖分
SVG 文件。然后，这将生成标准 OpenGL 或 OpenGL ES 调用，并使用显示
list 或 vbo 以在重绘时进行优化。我只是简单地画一个显示列表来绘制
平移和旋转后的矢量图像，允许我将其与其他 OpenGL > 混合来电。

如果您只想将 SVG 矢量形状转换为 OpenGL|ES，那么我建议您自己完成解析器和逻辑。请注意，SVG 是一个庞大的规范，具有不同的功能，例如绘画服务器（渐变、图案...）、引用、过滤器、剪辑、字体处理、动画、脚本、链接等。

如果您想要完整的 svg 支持，那么http://code.google.com/p/enesim 上有一个名为 egueb（尤其是 esvg）的库，它使用enesim（渲染库有用于绘图的软件和 opengl 后端）。在大多数情况下，它使用着色器并且所有内容都渲染为纹理，该库非常灵活，允许您适应您的特定需求，例如修改渲染的场景、对其进行转换等。因为 gl 绘制始终是在纹理中完成的。

到目前为止我看到的建议是首先使用QT或Cairo。 - 这不是一个选项
鉴于我希望管理自己的 OpenGL 上下文而不需要臃肿的库（在
我想要实现的目标的背景）。这也不适合 Android。

第二个选项是使用渲染纹理的库。虽然这可能没问题
静态矢量图形，对于缩放的游戏来说这不是一个有效或可行的选择
并且轮换频繁发生。

在 gl 后端的特定情况下，enesim 不会创建 GLX（或任何其他窗口相关上下文），您必须提供它，因此它完全适合您的情况，因为它只使用 GL 调用。

唯一的缺点是该库在 gl 支持或完整的 SVG 规范支持方面尚不完整，但根据您的需求，在我看来这是一个不错的选择。

Answer 5

来自 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);
}

所以它确实使用了VBO。因此，我建议制作您自己的 SVG 解析器/使用预制的解析器，并将调用转发给 ShivaVG。

您仍然遇到 ShivaVG 使用 C（而不是 Java）并创建 opengl 上下文（而不是 opengles，如果我正确阅读代码的话）的问题。因此，即使您使用 Android 的 NDK 编译它，您也必须修改代码（例如，我见过一些 glVertex3f，但它们似乎不太需要......希望最好）。当然，另一个选择是将代码从 C 移植到 Java。也许没有你想象的那么痛苦。

祝你好运 ！

Answer 6

你可以看看 AmanithVG，他们似乎实现了一个很好的路径 ->三角形管道。我已经尝试过 iOS GL Tiger 示例，看来三角测量并不是真正的瓶颈。