高度なWebGUI用のPixi.jsおよびThreeJS
アイデア
こんにちは！私と開発者のチームは、インタラクティブなグラフ編集のためのオープンソースのグラフィカルインターフェイスを作成しています。
このインターフェイスで大量の接続ノードを処理して、ユーザーがノードを移動、再接続、ズームイン/ズームアウトできるようにします。各ノードの上にテキスト、ボタン、スライダー、その他のコントロールを配置できます。さらに、非常に高度でプラグイン可能なグラフィカルインターフェイスを作成したいと思います。各パネルはプラグインになります。WebベースのEclipseのように考えることができます。パネルは、グラフエディタ、タイムライン、または3Dビューポートの場合があります。
質問
Pixi.js、ThreeJS、または他のライブラリのどちらのライブラリがより多くのメリットをもたらすかをお聞きしたいと思います。たぶん、それらを組み合わせる必要があります-Pixi.jsでインターフェースを作成し、ThreeJSで3Dサポートを必要とするプラグインのいくつかを作成します（「一貫性」が低いため、個人的にこのアイデアは好きではありません）。
要件
すべてをWebGLで実行する必要があります。その理由は、グラフエディタをできるだけスムーズに実行したいということです。グラフエディタはGUIの他の部分と同じコントロールを表示する必要があるという事実を考慮すると、1つのテクノロジでそれを実行するのが合理的です。
私は、特に次のことを考慮して、このような大きなプロジェクトを作成する際に最高のパフォーマンスと柔軟性を提供するライブラリを探しています。
- カスタムHUD要素（スライダー、ボタン、グラフなど）を作成する機能
- 大量の要素を処理する機能-必要な部分のみをキャッシュ/再描画することが重要です
- キャンバスのフォールバックは重要ですが、重要ではありません
しかし、ズームイン/ズームアウトといくつかの派手な効果を備えた、何千ものノードを処理できる高性能ノードグラフを作成したい場合は、canvas/webglを使用するとはるかに優れたパフォーマンスが得られると思います。
いいえ、同意できません。
HTMLは、ノードの操作とレンダリングに非常に優れています。しかし、多くの場合、その弱点はあなたが話すそれらの派手な効果です。
一方、webglは派手な効果には優れていますが、ノードの操作が非常に貧弱です。最初の試行で、各ノードを1回の描画呼び出し、300回の描画呼び出しとして作成すると、完了した可能性があります。 ドローコール（webglコール）を取り除くには、考えてチートし、考えてチートする必要があります。
私が見た例で、それについて話すことができます。 Cocos2d-js は、Pixi.jsまたはThreeJSよりも適している可能性があります。これは、無料のスタジオと強力なキャンバスフォールバックを備えた非常に優れた2D無料エンジンです。あなたが望むかもしれない1つの基本的な派手な効果、9スライスもあります。しかし、この単純な9スライスのものでさえ、9回のドローコールを行い、パフォーマンスが急速に低下するのを見ることができます。また、cocos2dを使用してパフォーマンステストを行いました。400個の最も単純なスプライトを並べて実行すると、30fpsしか実行されないと言えます。
パフォーマンスが非常に低い理由は、エンジン（どのエンジンでも）が正確に何を達成しようとしているのかについての情報を持っていないためです。ほとんどのエンジンは、何かをレンダリングする方法を1つか2つしか提供しません。また、各画像を1つのスプライト（1つのノード）にすることを選択した場合、エンジンはそれを単純化できません。
もし私があなたなら、私はエンジンを使わず、webglだけでそれをします。しかし、それはあなたがwebglを知っている必要があり、キャンバスのフォールバックがないことを意味します。タスクは非常に難しいようで、またいくつかのデモンストレーションがあります。 ThreeJSとplaycanvasエンジンの両方に、ブラウザーに無料のエディターがあります。 Playcanvasはちょうど2日前に新しいバージョンのエディターをリリースしました。そして、エディターのGUIはどちらもHTMLです。 HTMLGUIを好むwebglエンジンについて話しています。また、多くのゲームデザイナーもHTMLを好みました。
したがって、HTMLは決して悪い選択肢ではありませんが、本当にwebglを使用する必要がある場合は、準備する必要があります。あなたの仕事はエンジンにとって不可能かもしれません。