React時代に抑えておくべきWebGLライブラリ
この記事はteam DELTA Advent Calendar 2022 19 日目の記事です。
本日分を担当するのは豊福です。
前回書いた記事はこちら。
この記事ではフロントエンドエンジニアでも Web で 3D の表現をしたい場合に、どういうライブラリ使えばいいのかがざっくり分かる記事にしてあります。詳しくはそれぞれのライブラリの公式ドキュメントをお読みください。
INDEX
three.js
3D コンテンツを Web ページで簡単に扱えるようにしたライブラリ。
他にも Babylon.js などのライブラリがありますが、弊社では three.js をメインに使っています。
というのも、この後紹介する React Three Fiber という three.js の React renderer とのインテグレーションが非常に優れているからです。
このライブラリのおかげで、3D に詳しくないフロントエンドエンジニアでもスムーズに 3D を使った Web の表現に入門することができます(私も去年入門しましたが現在ゴリゴリ本番プロダクトを運用しています)。
three.js の基礎概念を理解するにはfundamentalsを読むといいでしょう。
three.js examples
three.js のいいところはドキュメントが充実していこともそうですが、Examples が豊富です。
examples ページで特定のキーワードで検索すると簡単なサンプルが出てきます。
そしてそのサンプルのソースコードも普通に公開されているのでありがたい。
Twitter アカウントでもいろんなサンプルが流れてくるので、「これ Web でできるんか！」っていう事例を色々知りたい方はフォローしとくといいかと思います。
React Three Fiber
先述した three.js の Renderer が React Three Fiber(r3f) です。
3D の scene は階層で表現されるため、React による表現とは相性がよいです。
加えて、 Sougen プロジェクトという最初の Web 3D Metaverse プロジェクトが Next.js, React and Threejs (React-Three-Fiber)をゴリゴリ使って開発されているので、このライブラリの周辺で便利ツールがどんどん生み出されています。
ただ、React のノリで state 使いまくると富豪的レンダリング(不要な re-render を実行しまくること)でマシンパワー使いすぎるのでそのへんのコツを学ぶ必要はあります。(詳しくは jotaiを参照)
drei
r3f のヘルパー集です。r3f を使うならほぼセットで使うことになると思います。
3D モデルファイルを読み込むためのローダーを React hook にした useGLTF や、 ファイルの読み込みステータスを取得するための useProgress、各種シェイプのサポートなどもヘルパーとして実装されているので、r3f でなにか実装する場合は、まずは drei を見に来ると車輪の再開発をなるべく避けることができます。
jotai
富豪的レンダリングを避けるための state 管理ライブラリ。
state は global にアクセスできるので、使いやすい。
特に r3f 使って state が増えまくると GPU にかなりの負荷がかかるので、r3f と相性がよいです。
プロダクトでもこれを導入しているんですが、富豪的レンダリングを解消したかったのと、r3f と同じ Poimandres という organization に入っているという理由からチョイスしています。
作者 daishi さんが日本人で、英語の公式ドキュメントだけではなく daishi さんの zenn にも色々と書かれてるので詳しくはそちらを読んでみてください。
gltfjsx
WebGL で 3D モデルを扱う時のよく使われるフォーマットが glTF ですが、そのデータをサクッと jsx に変換したい場合に使うツール。
プロダクトでは使っていないんですが、検証用に glTF のモデル落としてきてサクッと表示して検証したい場合に使ったりします。
gltfpack
最後は最近見つけた glTF ファイルの最適化ツール。
ファイルのダウンロードサイズだけでなく、読み込み負荷、レンダリングスピードを最適化してくれる結構クレイジーなツールで、直近で我々が利用しているサービスの許容ポリゴン数を 10 倍に上げてくれそうです。
まとめ
1 年間 three.js のプロダクトを運用してきてだいぶ知見も溜まってきて、NEXT step が見えてきました。来年はよりパフォーマンスがよくハイクオリティの 3D モデルを利用したサービスに進化させられそうです。
私も最初は 3D 全くわからないところでどういうツール使っていいかわからないところから始まりましたが、この記事でなんとなく最初のスタート切りやすくなっていたら幸いです。
お話しませんか？
我々 DELTA は多数の事業を展開、サポートしていますが、もっともっと助けたい、前に進めたいプロジェクトがたくさんあります。
少しでも興味を持っていただけたら、まずはカジュアルにオンラインで話しませんか？
DM していただいても OK です。
Discussion