直接在XNA中渲染SVG艺术作品


36

假设我有一堆矢量化格式的2D艺术作品,例如SVG。是否有一种简便易行的方法可以直接渲染而不需要自己实现完整的SVG渲染器?

当然,我可以离线(例如在内容管道中)对其进行光栅化,以实现不同的分辨率/缩放级别,但是我想在矢量图形提供的连续缩放级别上保持清晰的视觉效果。

Answers:


24

一个好问题。我曾经在这一点上进行过试验-我找不到简单的预构建解决方案。但是,让我指出您自己尝试实现的一些资源:


首先,有一篇来自《 GPU Gems 3:在GPU上渲染矢量艺术》的文章(以及相关的Loop-Blinn论文)。

最难的部分是,虽然绘制二次曲线很容易,但是三次曲线(就像在典型的SVG中发现的那样)要困难得多。本文对此进行了详细介绍,但是您需要戴上数学帽。

渲染三次曲线的另一种方法是将三次曲线转换为二次曲线。也是一个不小的问题。

一旦可以在GPU上绘制矢量曲线,只需简单地解析内容管道中的SVG并将其转换为可渲染的网格即可。顺便说一下,解析SVG很容易

另一个可能更简单的替代方法是放弃所有曲线,并仅对SVG的线性近似值进行三角剖分。

这两个解决方案都需要三角剖分- 这是适合XNA的合理三角剖分器


作为一种完全不同的替代方法,可以使用“距离场”渲染具有接近矢量的尖锐边缘的精灵。

这是SIGGRAPH 2007中Valve的一篇论文,介绍了如何做到这一点:改进了Alpha测试的矢量纹理和特殊效果的放大倍数(PDF)

这里的基本方法很容易实现。尝试使其尖角(仅在纸张上涉及)时会遇到困难。除了绘制简单形状以外,此方法还具有一些非常严格的限制。它最适合UI文本和贴花(例如Valve正在使用它)。


现在,我已经说完了所有这些-根据我的经验,我在这里所做的一切努力都是不值得的!

除非您的游戏玩法主要基于极端的矢量缩放效果(例如非常酷的Masagin演示),否则您可以通过预先渲染SVG并仅使用位图技术(更简便,更好地支持等)逃脱现实

(想到的第一种技术是映射wiki)精灵的高分辨率版本,以使分辨率独立性达到最大精灵大小。)

这篇博客文章可能是开始向XNA内容管道添加SVG渲染支持的好地方。


很好的答案,谢谢!这远远超过了让自己垂涎的绳索。最后,我可能会采纳您的建议进行位图布线。同时,我需要做一些阅读工作!:P
drxzcl 2010年

这个答案仍然准确吗?
lochok 2012年

@lochok是的。我的回答没有什么会突然停止工作的。将来可能会开发出一种更好的向量向量处理方法-但是,在撰写本文时,我还没有听说过任何新的方法。
Andrew Russell

我还表示没有任何解决方案
lochok 2012年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.