ここでの最初の質問なので、ガイドラインに準拠していることを願っています。また、下手な英語をお許しください。
私は現在、何千ものキューブとそれらのキューブ間の線を表示する three.js に基づく WebGL アプリケーションに取り組んでいます。いくつかのパフォーマンスの問題があるため、すべてのキューブを 1 つのジオメトリにマージすることにしました。それは少し役に立ちましたが、実際には、何千ものライン (すべてが独自のジオメトリ (three.js の NURBSCurve の例に基づく) を持つ) とシェーダー マテリアル (シェーダーはラインの最初から最後まで 2 つの色をブレンドする) によってパフォーマンスが低下します。私の最大のデータには、9000 以上の線と 5000 以上の立方体が含まれています.線がない場合、FPS レートは 45 ～ 50 (DirectX) または 20 FPS (OpenGL) ですが、線がある場合、パフォーマンスは 5 FPS に低下します. Intel HD Graphics (第 5 世代) グラフィック カードを使用しているため、最大 FPS は 60 FPS に制限されているようですが、私の場合はそれで十分です。前に述べたように、線は NURBS 曲線であり、短い曲線から長く複雑な曲線までさまざまです。もう 1 つの要件 (少し頭が痛くなります ;-)) は、各行の幅が異なるため、実際には OpenGL を使用する必要があります。これは、私の場合は遅く、他の問題も引き起こします。
とにかく、私はいくつかのアプローチを試しましたが、どれも実際に問題を解決するのに役立ちませんでした.
1) ラインごとにパイプを作成し、ジオメトリをマージします。-> これにより、シーンの作成が 1 秒から数分に遅くなりました。また、FPS レートを改善できませんでした。これは、このアプローチによって生成される頂点と面の量が多いため、実際には予想されます。
2) カーブのポイントを減らします。-> 200 ポイントから 50 ポイントに減少し、FPS が少し改善されました。25 ポイントに減らしても、それ以上の改善はありませんでした。不要なポイントを減らす方法を書くことを考えていました (直線のカーブのように、50 ポイントではなく 2 ポイントで十分です) が、これを達成する方法がわからないので、最初に他の方法を考えました。多分私はこれに戻ってくるでしょう。
3) BufferGeometry を使用します。⇒シェーダー素材との併用はできないようです。少なくとも私の場合、私はそれを機能させなかったので、私の試みのどれも何も表示しませんでした。ところで、THREE.BufferGeometryUtils を使用して、NURBS カーブからバッファ ジオメトリを作成しました。THREE.VertexColors をパラメーターとして関数に設定し、ジオメトリで colorsNeedUpdate を設定しようとしましたが、まだ表示されません。実際、curbes ジオメトリで buffergeometry も試しましたが、パフォーマンスが向上しませんでした。
4) NURBS カーブの代わりにスプラインを使用します。->曲線のパスは、私が望んでいたものとは異なり、改善はありませんでした.
5) THREE.LinePieces を使用して行を 1 行にマージします。-> うーん、頂点の数を 2 倍にしなければなりませんでしたが、これは実際には非常に役立ちました。DirectX の場合、パフォーマンスは 5 FPS から 25 FPS に改善されました (OpenGL はまだ 4 FPS です) が、このソリューションは私の場合には適切ではありません。これは、DirectX が 1 に制限されている場合のように、線の幅を変えることができないためです。他の人が線幅の制限の問題をどのように解決したのか知りたいと思っていたところ、Geometry Shader を使用してより太い線を作成している人がいることがわかりました。そこで、私の新たな希望は、このジオメトリ シェーダーでした。しかし、ジオメトリ シェーダーが WebGL でサポートされていないことがわかりました。
これまでの私のアプローチの非常に長い説明で申し訳ありません。あれこれ試してみても、新しいアイデアが浮かびません。FPS の低下を我慢するべきなのか、それとも他に試すことができる方法があるのか、専門家に聞いてみたいと思います。