Potrzeba przyspieszenia mojego SVG. Czy mogę przekonwertować na WebGL lub płótno?

Mam rysunek SVG z 10138 częściami, więc działa wolno.
chcę, aby go uruchomić więcej jak http://workshop.chromeexperiments.com/globe Potrzeba przyspieszenia mojego SVG. Czy mogę przekonwertować na WebGL lub płótno?

Oto rozwiązania/pytania Zastanawiam

Czy istnieje jakiś sposób, aby mieć SVG części renderowania w mniej procesorem intensywny sposób?
Czy mogę przekonwertować SVG na WebGL lub płótno?
Czy mogę go uruchomić jako SVG, ale renderować przez WebGL lub płótno?

Po prostu chcę zrobić to szybciej .. myśli?

Oto zrzut ekranu

Źródło

2012-07-24 Kirk Strobeck

Istnieje wiele sposobów, aby to zrobić, ale jest to niemożliwe powiedz, dlaczego Twój przykład działa wolno bez pokazywania go. Możesz spróbować użyć narzędzi wydajności dostarczanych przez przeglądarki, aby zobaczyć, jakie operacje są drogie. –

Napisałem zrzut ekranu, może to będzie bardziej pomocne –

Chciałbym, aby to pytanie nie było specjalnie związane z wykresem :) - mam problemy ze złożonością SVG, spowalniając animacje przeglądarek .. –

-5

Zastosowanie http://sigmajs.org/

Sigma.js jest lekką biblioteką JavaScript o otwartym kodzie źródłowym do rysowania wykresów za pomocą elementu canvas canvas. Został on specjalnie zaprojektowany do:

Wyświetl interaktywnie statycznych wykresów eksportowanych z oprogramowania wykres wizualizacji - jak Gephi widok dynamicznie wykresy, które są generowane w locie

Źródło

2012-07-25 17:14:39

Dlaczego była to wybrana odpowiedź? Jak rozwiązuje to pytanie? –

Był to szybki sposób wyświetlania wykresu –

Spowolnienie dla SVG z bardzo dużej liczby sztuk pochodzi z non-zatrzymane trybie SVG. Bez szczegółowych informacji o tym, jak wygląda Twój SVG i jak się on zachowuje, ciężko jest przedstawić konkretne sugestie. Tak w ogóle:

Jeśli grafika jest zazwyczaj statyczne (nie trzeba do śledzenia zdarzeń myszy na obiekcie graficznym) można użyć zamiast HTML5 canvas (gdzie rysunek poleceń Blit pikseli na obrazie, a następnie w zasadzie masz statyczny obraz).
Jeśli twoja grafika zawiera wiele powtarzających się części, użycie SVG z elementami <use> może zmniejszyć ślad pamięci i zwiększyć wydajność.

Źródło

2012-07-24 22:46:03 Phrogz

Zrobiłem zrzut ekranu, może to będzie bardziej pomocna –

W przypadku SVG nie pracowaliśmy zbyt wiele, ale powinno być możliwe korzystanie z Famo.us do renderowania w trybie zatrzymania SVG. Jeśli ty lub ktoś inny tutaj jest guru SVG, jest to ścieżka warta poznania. https://github.com/famous/famous (disclaimer: pracuję dla słynnego, po prostu natknąłem się na to pytanie przez przypadek, szukając czegoś innego). Pod koniec dnia języki znaczników oparte na XML mają tylko dwa typy: dzieci i łańcuchy. Typy marshallingowe to ogromne wąskie gardło. –

Aby dodać trochę więcej dla każdego, kto spróbuje tego, sprawdź, w jaki sposób jest implementowany moduł Surface.js w rdzeniu. Prawdopodobnie będziesz musiał stworzyć moduł SVGSurface.js, który działa podobnie. Potem stwórz z tego, co robisz, elementy składowe, które odziedziczą po tym. Spekuluję tutaj. Być może będziesz mógł wysłać do naszego głównego architekta znaku towarowego lu (mark @ famo.us) wiadomość z konkretnymi pytaniami. –

jako uproszczona zasada:

SVG skaluje wzajemnie z wielu przedmiotów, jakie należy wyciągnąć
Płótno Wagi wzajemnie z rozdzielczością.

Tak więc 10138 obiektów, które będą przechowywane w pamięci przy użyciu SVG spowolni pracę (choć nie jestem w stanie powiedzieć, jakie są twarde ograniczenia). Jeśli wchodzisz w ten zakres obiektów, uważam, że płótno i WebGL mogą zapewnić lepszą wydajność. Większość nowoczesnych przeglądarek obsługuje już przyspieszone renderowanie canvas.
Jednak interakcja użytkownika jest bardziej związana z Canvas niż SVG.

Możesz także spróbować je wymieszać (więcej szczegółów znajdziesz w artykule here).
Oto niektóre środki użyteczne:

SVG swarm vs Canvas swarm (przy użyciu D3.js)
Stackoverflow gwint przydatnych informacje o

Źródło

2012-07-25 15:30:06

Napisałem zrzut ekranu, może to będzie bardziej pomocne –

Potrzeba przyspieszenia mojego SVG. Czy mogę przekonwertować na WebGL lub płótno?

Odpowiedz

Powiązane problemy