Pixi.js e ThreeJS per un avanzato web GUI

Question

L'idea

Hi! Io e un team di sviluppatori stiamo creando un'interfaccia grafica open-source per l'editing grafico interattivo.

Desidero che questa interfaccia gestisca una grande quantità di nodi connessi, consentendo all'utente di spostarli, ricollegarli, ingrandire/ridurre ecc. Ogni nodo può contenere testo, pulsanti, cursori e altri controlli. Inoltre vogliamo creare un'interfaccia grafica abbastanza avanzata e collegabile - ogni pannello sarebbe un plugin - puoi pensarlo come su eclipse basata sul web. Un pannello potrebbe essere un editor grafico, una timeline o una finestra 3D.

La domanda

vorrei chiederti, quale libreria ci darebbe più benefici - Pixi.js, ThreeJS o forse altro? Forse dovremmo mixarli - creando l'interfaccia in Pixi.js e alcuni dei plug-in che richiedono il supporto 3D in ThreeJS (non mi piace personalmente questa idea, a causa della "coerenza" inferiore).

Requisiti

Vogliamo tutto in esecuzione in WebGL. Una ragione è che vogliamo eseguire l'editor grafico nel modo più fluido possibile e considerando il fatto che l'editor grafico deve visualizzare gli stessi controlli di altre parti della GUI, è ragionevole farlo in una tecnologia.

Sto cercando una libreria, che mi avrebbe dato le migliori prestazioni e la flessibilità nella creazione di un progetto così grande, soprattutto se si considera:

• possibilità di creare elementi HUD personalizzati (slider, pulsanti, grafici, ecc)
• capacità di gestire grandi quantità di elementi - un caching/ridisegnare solo una parte necessaria è importante
• tela di riserva è importante, ma non fondamentale

Answer 1

ma se si vuole creare un grafico di nodo ad alte prestazioni con zoom in/out e alcuni effetti di fantasia, che potrebbero gestire migliaia di nodi, penso che prestazioni molto migliori si otterrebbero usando canvas/webgl, giusto?

No, non posso essere d'accordo.

L'HTML è davvero molto buono nella manipolazione e nel rendering del nodo. Ma la sua debolezza sono quegli effetti di fantasia di cui parli.

D'altro canto Webgl è eccellente per effetti di fantasia, ma ha una manipolazione del nodo molto scarsa. Diciamo che al primo tentativo si crea ogni nodo come una chiamata di estrazione, 300 chiamate di disegno e si potrebbe essere fatto. You will have to think and cheat and think and cheat to get rid of draw calls (webgl calls).

Esempio che ho visto e quindi di cui parlare. Cocos2d-js potrebbe essere più adatto quindi Pixi.js o ThreeJS. È un ottimo motore gratuito 2d con studio gratuito e potente fallback di canvas. C'è anche un effetto di fantasia di base che potresti desiderare, nove fette. Ma anche questa semplice cosa a nove fette farà 9 richiami di draw e potrai vedere le tue prestazioni cadere velocemente.Ho anche eseguito test delle prestazioni con cocos2d e posso dire che 400 folletti più semplici l'uno accanto all'altro eseguono solo 30 fps.

Il motivo per cui le prestazioni sono così basse è che il motore (indipendentemente dal motore) non ha informazioni su cosa esattamente stai cercando di ottenere. La maggior parte dei motori offrirà solo uno o due modi su come eseguire il rendering di qualcosa. E se scelgo di volere che ogni singola immagine sia uno sprite (un nodo), il motore non sarà in grado di semplificarlo.

Se fossi in te, non userei alcun motore e lo farei solo con webgl. Ma significa che devi conoscere Webgl e non hai il fallback di canvas. Il compito sembra essere molto difficile e di nuovo alcune delle demonazioni. Entrambi i motori ThreeJS e playcanvas hanno un editor gratuito nel browser. Playcanvas ha rilasciato la nuova versione di editor solo 2 giorni fa. E i GUI degli editor sono HTML, entrambi. Stiamo parlando di motori WebGL che preferiscono l'interfaccia grafica HTML. Anche molti designer di giochi preferivano l'HTML.

Quindi HTML non è affatto una cattiva opzione, ma se hai davvero bisogno di usare webgl dovresti essere preparato. Il tuo compito potrebbe essere impossibile per i motori.