Evergine React テンプレートのご紹介

産業向けの強力なレンダリングエンジンであるEvergineが、Web上での最新3Dアプリケーション開発を簡素化する新しいReactテンプレートをリリースしました。この記事では、新しいテンプレートの使用方法とその背後にあるアーキテクチャについて詳しく掘り下げます。

Evergine React 入門

Evergine React テンプレートの利用開始は簡単です。新規プロジェクト作成時に、React SPA テンプレートを選択し、プロジェクト名と保存場所を指定するだけで準備完了です。

Evergine React テンプレートによるシームレスなコラボレーション

Evergine React テンプレートは、複数の開発チームがシームレスに連携できるようにすることを明確な焦点として設計されています。このテンプレートはReactの標準に従い、Evergine用の新しいNPMパッケージを含んでいます。これにより、エンジンの将来のバージョンへのアップグレードが容易になり、Web UIを常に最新のレンダリング技術に対応させることができます。

Evergine Reactテンプレートで新規プロジェクトを作成すると、3Dレンダリングを担当するチームは、他のプラットフォームで利用可能なものと同じツールやワークフローを使用してシーンの構築を開始できます（例：

Evergine Studioなど）。同様に、React開発チームは、使い慣れたIDEとツールを使用して、すぐにインターフェースの構築を開始できます。完了したら、チームはSPAアプリケーションを起動し、Webサイト内に埋め込まれたシーンを表示できます。

React と Evergine 間のインタラクション構築

Evergine React テンプレートの主な利点は、複数の開発チームがシームレスに連携できることです。これは、Webインターフェースと3Dレンダリングエンジン間でデータを共有するための一連のAPIによって実現されます。一方のチームはWebインターフェースの構築に集中し、もう一方のチームは3Dコンテンツの構築に取り組むことができます。すべてが同じVisual Studioソリューション上に構築されているため、全チームが同じ標準に準拠し、同じワークフローを使用していることを容易に確認できます。

データはイベントの形式で共有され、レンダリングされた3Dシーンとインターフェースは、マウスの動きや3D要素間の衝突などの変更が発生したときに、これを使用して通信します。イベントには、Web（React）で発生するものと、3Dレンダリング（Evergine）で発生するものの2種類があります。これを支える技術は次のように動作します。

3Dレンダリングに伝達する必要があるイベントがWebで発生した場合（ティーポットの色の変更など）、ReactコンポーネントはwebEventsProxyを使用して、WASMインフラストラクチャを通じてWebからEvergineへイベントを伝達します。webEventsListenerはイベントを受信し、依存性注入コンテナを通じてEvergineレンダラーで利用可能なWebEventsServiceに伝達します。このサービスはアプリケーション内のどこからでも使用して、そのイベントをサブスクライブし、必要なアクション（ティーポットのマテリアルの色を変更するなど）を実行できます。

この方法で作業することで、Webインターフェースチームと3Dチームは、イベントの名前（例：「changeColor」）と各イベントに添付されるデータ（例：「#RGB」のカラーコード）について合意するだけで済みます。そこから、WebチームはWebインターフェースとwebEventsProxyの変更を実装し、3DチームはwebEventsListener、webEventsService、および残りの3Dシーンの変更を実装します。

Webに伝達する必要があるイベントが3Dシーンで発生した場合、ティーポットの回転角度など、C#コンポーネントがAppEventsServiceを通じてイベントをトリガーします。このイベントには依存性注入コンテナを通じてアクセスできます。appEventsProxyはこのイベントをサブスクライブし、WASMインフラストラクチャを通じてReactのappEventsListenerに伝達します。appEventsListenerは、標準のEvergineイベントかカスタムイベントか（EvergineStoreまたはAppStore）に応じて、対応する状態ストアにイベントを登録します。そこから、任意のReactコンポーネントが適切なフック（useEvergineStoreまたはuseAppStore）を使用してイベントをサブスクライブし、それに応じて動作できます。例えば、コンポーネントはuseEffectフックを使用して、ティーポットの回転角度をフィールドに描画できます。

この場合、3DチームはAppEventsService、AppEventsProxy、Applicationへの変更実装を担当します。一方、WebインターフェースチームはAppEventsListenerとWeb側の変更を担当します。

これらのコンポーネントは、C#側ではWebReactプロジェクト、React/JavaScript側ではspaプロジェクトで利用可能です。さらに2つのプロジェクトがあります。全プラットフォーム共通のEvergineの3Dアプリケーションプロジェクトと、ファイル圧縮を管理し本番環境へのデプロイを支援するために提供されるHostプロジェクトです。

evergineStoreに保存されるEvergineの標準イベントは以下の通りです。

•  webAssemblyLoaded: アプリケーションの全アセンブリがロードされ、WASMインフラストラクチャが使用可能になった時点でtrueに設定されます。初期値はfalseです。
• evergineReady: シーンが開始された時点でtrueに、シーンが閉じられた時点でfalseに設定されます。初期値はfalseです。

evergine-react (https://www.npmjs.com/package/evergine-react) というNPMパッケージがあり、EvergineStoreと汎用Storeの実装が含まれています。createStore関数とuseStore関数は、レンダラーのカスタムイベントを追加するためにプロジェクトコード内にあるAppStoreを作成するために使用されます。このパッケージには、Web上に3Dシーンを描画するためのEvergineCanvasコンポーネントや、EvergineCanvasの初期化、破棄、サイズ更新を行うwebEventsProxyの部分的な実装も含まれています。最後に、Evergineの初期化とイベント通信のためのユーティリティも実装しています。将来的に、このパッケージには新しい機能が追加される予定です。

アプリケーションの公開

Evergine Reactテンプレートには、Web Assembly (WASM) 技術を活用した強力なレンダリングエンジンが含まれています。この技術により、複雑なサーバーを必要とせずに、3Dレンダリングを含むWebサイトを効率的に公開し、Webブラウザで表示できます。

Hostプロジェクトは、Webアプリケーションのサーバーとして機能するASP.NETプロジェクトです。本番環境へのデプロイに使用され、圧縮されたアセットを提供するための最適化が含まれています。プロジェクト公開時に生成される成果物はHost.exeファイルで、ポート5000および5001でリッスンを開始し、React Webを提供します。

*Gabriel Grajea氏との共著