odpowiedniej biblioteki do łączenia z D3js, aby pozwalając rysunek do WebGL (2D)

Question

Oto co usiłuję zrobić: http://mbostock.github.com/d3/talk/20111116/iris-splom.html

ale chcę zrobić w WebGL 2d (bo wydajność SVG jest bardzo powolny, randering 10k SVG już tylko spada do 12 fps)

na szybkie wyszukiwanie znalazłem kilka WebGL-2d bibliotekami: cocos2d-html5, pixijs, Three.js i WebGL-2d (opuszczony)

oni zdaje się być ładna? łatwe, ale to, co chcę zrobić, to wizualizacja danych.cocos i pixijs są bibliotekami gier 2d. Jestem nowicjuszem w webgl i tych bibliotekach, więc eksperci z SO mogą polecić?

podsumowanie rzeczy muszę:

Interakcje:

• Prostokątny wybór wewnątrz działek. Kliknij, aby wybrać w niektórych elementach.
• powiększać i przesuwać Support (semicki Zooming jeśli to możliwe)

Renderer: WebGL2d (według benchmarków WebGL jest najszybszy)

Answer 1

podstawie wymagań i Podsumowując, polecam najnowszą wersję Cocos2D-html5 który obejmuje obsługę renderowania WebGL. Jest to tak proste, jak zmiana ustawienia renderowania z Canvas na WebGL w pliku ustawień cocos2d.js. Na przykład w HelloHTML5World/cocos2d.js zmień renderMode na 2 dla renderowania opartego na WebGL.

renderMode:0,  //Choose of RenderMode: 0(default), 1(Canvas only), 2(WebGL only) 

Cocos2d HTML5 jest bardziej precyzyjnie biblioteką graficzną i & może interpretować jako kompletne biblioteki gier tylko w połączeniu z (domyślnie) wiewiórki lub box2d gry bibliotek fizyki.

Czy obsługuje prostokątny wybór lub powiększanie i panoramowanie? Tak, możesz rozszerzyć istniejące biblioteki, aby zaimplementować te zachowania.

Dodatkową zaletą platformy Cocos2d-html5 jest obsługa wizualnej edycji grafiki za pomocą Cocosbuilder i natywnej obsługi wielu platform (iOS, Android itp.) Dla tego samego kodu z powiązaniami JavaScript.

Jeśli masz konkretne pytania związane z platformą, można je szczegółowo wyjaśnić za pomocą kodu.

Możesz chcieć spojrzeć na JS reference i cocos2d-html5 forum, aby rozpocząć.

Aktualizacja 1: Sprawdzono kod wizualizacji danych dla zbioru danych tęczówki, Wykresy są umieszczone w elemencie svg, z małymi kółkami wykreślającymi każdy punkt danych zgodnie ze współrzędnymi x, y. Można to osiągnąć również w Cocos2d za pośrednictwem współrzędnych x, y, siatek, pól o różnym stopniu krycia i małych kółek dla punktów danych. Zaimportuj swój zbiór danych irysa do formatu json/xmll/csv za pomocą kodu javascript i wykreśl powyżej za pomocą metod cocos2d. Wybór prostokąta za pomocą wywołań zdarzeń javascript & metody myszy i odpowiednia aktualizacja sceny na płótnie.

Aktualizacja2: W drugiej chwili, jeśli znajdziesz krzywą uczenia dla stromych cocos2d, możesz lepiej ograniczyć się do biblioteki opartej wyłącznie na wykresach, opartej na WebGL.Ten projekt VivaGraphJS wydaje się odpowiedni z high performance opartym na WebGL.

Proszę również zadawać pytania najlepiej w tym formacie, co próbowaliście w kodzie, jaki był oczekiwany wynik, co macie zamiast tego. SO nie służy do porównywania bibliotek. WebGL to metoda renderowania. Przełącznika, na przykład w three.js jest proste

renderer = new THREE.WebGLRenderer(); 

zamiast płótna jednego:

renderer = new THREE.CanvasRenderer(); 

skutkuje wyższą wydajność.