XNAでSVGアートを直接レンダリングする


36

SVGなどのベクトル化された形式の2Dアートがたくさんあるとします。完全なSVGレンダラーを自分で実装することなく、それを直接レンダリングする簡単な方法はありますか?

もちろん、さまざまな解像度/ズームレベルに合わせてオフラインで(たとえば、コンテンツパイプラインで)ラスタライズできますが、ベクターグラフィックスが提供する連続ズームレベルで鮮明なビジュアルを維持したいと思います。

回答:


24

いい質問です。私はこれをある時点で実験していました-簡単な、事前に構築されたソリューションを見つけることができませんでした。しかし、私がそれを自分で実装しようとしたときに見つけたリソースのいくつかを指摘させてください:


まず、GPU Gems 3:GPUでのベクターアートのレンダリング(および関連するLoop-Blinnの論文)の記事があります。

最も難しい部分は、2次曲線を描くのは簡単ですが、3次曲線(典型的なSVGで見られるような)はかなり難しいということです。記事ではこれについて詳しく説明しますが、数学の帽子を持って行く必要があります。

3次曲線をレンダリングする代わりに、3次曲線を2次曲線に変換します。また、重要な問題です。

GPUでベクターカーブをレンダリングできたら、コンテンツパイプラインでSVGを解析し、レンダリング可能なメッシュに変換するだけです。ところで、SVGの解析は簡単です。

別の潜在的に簡単な別の方法は、すべての曲線を一緒に使用せずに、SVGの線形近似を単純に三角形化することです。

これらのソリューションは両方とも三角測量を必要とします。これがXNAに適した合理的な三角測量器です。


完全に異なる選択肢として、「距離フィールド」を使用して、ほぼベクトルのような鋭いエッジを持つスプライトをレンダリングできます。

これを行う方法に関するSIGGRAPH 2007のValveからの論文は次のとおりです。ベクターテクスチャと特殊効果のアルファテスト済み拡大の改善(PDF)

ここでの基本的な方法は非常に簡単に実装できます。鋭い角(紙で触れただけのもの)をサポートしようとすると、困難が生じます。この方法には、単純な図形の描画以外にはかなり厳しい制限があります。UIテキストとデカールに最適です(Valveが使用しているように)。


私はすべてのことを言いました-私の経験では、ここでのすべての努力は価値がないと言わなければなりません!

あなたの場合を除きゲームプレイは、主に周りに基づくものになるだろう極端な非常にクールなようなベクトルズーム効果Masaginのデモを、あなたのSVGをプリレンダリングし、単に使用してビットマップ技術(より簡単に、より良いサポート、など)で逃げることができます。

(頭に浮かぶ最初のテクニックの1つは、スプライトのミップマップwiki)高解像度バージョンです。これにより、最大スプライトサイズまで解像度に依存しないようになります。)

このブログ投稿は、XNAコンテンツパイプラインにSVGレンダリングサポートを追加するのに適した場所です。


素晴らしい回答、ありがとう!それは自分でぶらぶらするのに十分なロープよりもはるかに多いです。最終的には、ビットマップルートに行くようにアドバイスするでしょう。それまでの間、やることがあります。:P
drxzcl

この答えはまだ正確ですか?
lochok

@lochokはい。私の答えには、突然機能しなくなるものは何もありません。将来、より良いベクターの作成方法が開発される可能性がありますが、執筆時点では、新しいことは聞いていません。
アンドリューラッセル

さらに、既存のソリューションがないことを意味しました
-lochok
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.