Renderowanie grafiki SVG bezpośrednio w XNA

36

Załóżmy, że mam sporo grafiki 2D w formacie wektorowym, takim jak SVG. Czy istnieje prosty sposób na renderowanie tego bezpośrednio bez konieczności samodzielnego wdrażania pełnego mechanizmu renderującego SVG?

Oczywiście mógłbym zrasteryzować go offline (np. W potoku treści) dla różnych rozdzielczości / poziomów powiększenia, ale chciałbym zachować wyraźny obraz przy ciągłym powiększaniu oferowanym przez grafikę wektorową.

drxzcl
źródło

Odpowiedzi:

24

Dobre pytanie. W pewnym momencie eksperymentowałem z tym - nie mogłem znaleźć łatwego, gotowego rozwiązania. Ale pozwól, że wskażę niektóre zasoby, które znalazłem, próbując wdrożyć to samodzielnie:


Przede wszystkim jest artykuł z GPU Gems 3: Renderowanie grafiki wektorowej na GPU (i związany z nim artykuł Loop-Blinn ).

Najtrudniejsze jest to, że chociaż rysowanie krzywych kwadratowych jest łatwe, krzywe sześcienne (takie jak te w typowym pliku SVG) są znacznie trudniejsze. Artykuł szczegółowo omawia ten temat, ale musisz zabrać ze sobą kapelusz matematyki.

Alternatywą dla renderowania krzywych sześciennych jest konwersja krzywych sześciennych na kwadratowe. Również nietrywialny problem.

Gdy możesz renderować krzywe wektorowe na GPU, wystarczy przeanalizować plik SVG w potoku zawartości i przekształcić go w siatkę, którą możesz renderować. Nawiasem mówiąc, parsowanie SVG jest łatwe .

Inną, potencjalnie łatwiejszą alternatywą jest rezygnacja z krzywych razem i po prostu triangulacja liniowego przybliżenia SVG.

Oba te rozwiązania wymagają triangulacji - oto rozsądny triangulator odpowiedni dla XNA .


Jako zupełnie inna alternatywa, możesz użyć „pola odległości” do renderowania duszków o ostrych krawędziach podobnych do wektora.

Oto artykuł Valve z SIGGRAPH 2007 na temat tego, jak to zrobić: Ulepszone alfa testowane powiększenie tekstur wektorowych i efektów specjalnych (PDF)

Podstawowa metoda tutaj jest bardzo łatwa do wdrożenia. Trudność pojawia się, gdy próbuje się wspierać ostre rogi (coś, co dotknęło tylko na papierze). Ta metoda ma również dość poważne ograniczenia dla czegokolwiek poza rysowaniem prostych kształtów. Najlepiej nadaje się do tekstu interfejsu użytkownika i kalkomanii (tak jak Valve go używa).


Teraz, kiedy to wszystko powiedziałem - muszę powiedzieć, że z mojego doświadczenia, cały wysiłek tutaj nie jest tego wart!

O ile twoja rozgrywka nie będzie oparta głównie na ekstremalnych efektach powiększania wektorów, takich jak bardzo fajne demo Masagin , możesz uciec się do wstępnego renderowania SVG i po prostu stosując techniki bitmapowe (łatwiejsze, lepiej obsługiwane itp.).

(Jedną z pierwszych technik, które przychodzą na myśl, jest mipmapping ( wiki ) wersje twoich ikonek w wysokiej rozdzielczości, aby dać ci niezależność rozdzielczości aż do twojego maksymalnego rozmiaru).

Ten post na blogu jest prawdopodobnie dobrym miejscem na rozpoczęcie dodawania obsługi renderowania SVG do potoku treści XNA.

Andrew Russell
źródło
Doskonała odpowiedź, dziękuję! To o wiele więcej niż wystarczająca lina do zawieszenia się. W końcu prawdopodobnie skorzystam z twojej rady, by wybrać trasę bitmapy. W międzyczasie muszę coś przeczytać! : P
drxzcl,
Czy ta odpowiedź jest nadal dokładna?
lochok
@lochok Tak. W mojej odpowiedzi nie ma nic, co nagle przestałoby działać. Możliwe, że w przyszłości zostanie opracowany lepszy sposób tworzenia wektorów - ale w chwili pisania tego artykułu nie słyszałem o niczym nowym.
Andrew Russell
Moreso oznaczało, że nie ma już istniejącego rozwiązania
lochok