2013-05-31 12 views
11

Istnieje kilka bibliotek JavaScript umożliwiających renderowanie grafiki 2D przy użyciu WebGL. Dowiedziałem się, że najbardziej popularne są three.js i pixi.js. Oba pozwalają na użycie renderera WebGL lub płótna (dla urządzeń nie obsługujących WebGL).Biblioteka renderowania języka JavaScript [pixie.js kontra three.js]

Chcę cię zapytać, które z tych bibliotek jest lepszy pod następującymi termns:

  • chcę go używać tylko z grafiką 2D, więc wsparcie 3D jest całkowicie opcjonalne.
  • Wydajność jest bardzo ważna - wiele elementów, tekst, umiejętność ich płynnego skalowania, tłumaczenia itp. Jest bardzo ważna.
  • Renderowanie na płótnie (gdy urządzenie nie obsługuje WebGl jest ważne) i chciałbym zobaczyć ten sam (lub bardzo podobny) wynik przy użyciu obu renderers.

Jeśli nie ma innej biblioteki, abym concider w tym particullar sytuacji, nie krępuj się powiedzieć o tym :)

Odpowiedz

12

mam dokładnie ten sam przypadek użycia i właśnie próbował obu. Ładowanie wielu statycznych sprite'ów (z tego samego obrazu) jest szybsze w pliku three.js dla 5000 duszków i wyżej, ale animowanie tylko kilku z tych duszków daje lepsze klatki w pikselach (ponownie dla 5000 duszków). (Testowano na Chrome i IE9 na komputerze stacjonarnym)

Największa różnica polegała na renderowaniu Canvas, w którym funkcja autodetekowania w pikselach daje takie same wyniki, jak w przypadku WebGL (jeśli wolniejsza) dla tego samego kodu, ale renderowanie renderingu Canvas trzy.wyki doesn't support the Sprite type Aby osiągnąć przenośny kod, musisz użyć Cząstek. Jeśli nie użyjesz sprite'ów, a większość z nich ma quady lub trójkąty, nie byłoby to problemem.

Jeśli dostępność samouczków i takie jest w ogóle problemem, plik three.js jest bardziej znany, więc jest więcej materiałów.

W przeciwnym razie, dla około 2-3 tys. Elementów renderowanych w tym samym czasie, używałbym pixi.