Feature: WebGLの描画部分のパフォーマンス向上と、描画数制限までの数を上げる

[nasikusa]

期限

なし

めちゃ時間かかりそうでうわぁぁぁぁぁぁぁってなってる・・

概要

WebGLの描画に使っているライブラリをgl-react -> react-three-fiberに変更する

該当箇所

drawBox 以下のコンポーネント

こ～ど

おもに実際に画像の描画が行われる部分の全体を改修予定です～

背景と目的

• three.jsのほうが、ファイルサイズが重いが、機能がおおいので、自由度をあげるためリプレースしたい
• three.jsにて、1つの canvas にて、複数のシーンを描画する方法が紹介されているので、そちらを使用して、全体のパフォーマンスをあげたい
  • ただ、実際にあがるかわからないので、要検証
  • また、 react-three-fiber でできるのかも、要検証
  • 現在は、複数の描画アイテムがある場合は、複数の cavas ( = webglシーン )ができてるので、けっこうまずいかもーと思う
  • しかも、最大で16こまでしか描画できないので、良くない
• gl-reactが React の regacy context に依存しているので、若干今後が不安・・（対応はしていただけるっぽい）
  • gl-reactのlegacy context対応についてのissue
• three.jsを使用すると、 raycaster や CGモデルの読み込みなどの機能も使用できるようになる

最終的なゴール

gl-reactに依存している箇所を、react-three-fiberに置換する

また、1つのcavas描画エリアで、すべてのrendererをまかなえるように修正したい

仕様

なし

参考

• ReactThreeFiberのリポジトリ
• gl-reactのlegacy context対応についてのissue
• 複数のシーンを描画する方法
  • ほかの複数シーンの描画exampleも参考になるよ

[nasikusa]

修正手順の覚書

1. react-three-fiber にて1canvasにて、複数描画するデモを作成してみて、パフォーマンスのチェックをする
2. 既存の drawBox 以下のコンポーネントの手直し
3. 実際に drawBox 以下の描画を react-three-fiber にリプレース

[nasikusa]

来年にはおわってるといいなーーーーーーーー