初期化

Rhodoniteの初期化は簡素で、主に以下の２つを行えば完了です。

• 必要な動的モジュールの読み込み。
• WebGLの初期化

必要なモジュールの読み込み

RhodoniteはWebpackバンドラーによるCode Splitting（コードをモジュールとして分離し、必要に応じて動的に読み込むこと）を活用しています。 そのため、アプリケーションの開発で必要となるモジュールは全て最初にモジュール読み込み処理をする必要があります。

WebGL関係の処理もモジュールとして切り離されているため、実質的に最低でもwebglモジュールは必ず読み込む必要があります。

// WebGLモジュールをロード
await Rn.ModuleManager.getInstance().loadModule('webgl');

glTF2を表示する等の場合は、物理ベースレンダリングのサポートが必要になるため、pbrモジュールも読み込む必要があります。

// WebGLモジュールをロード
await Rn.ModuleManager.getInstance().loadModule('webgl');
// PBR（物理ベースレンダリング）モジュールをロード
await Rn.ModuleManager.getInstance().loadModule('pbr');

WebGLの初期化

次に、WebGLの初期化を行います。 Rn.System.getInstance()でSystemクラスのインスタンス（１つだけ存在）を取得し、さらに system.setProcessApproachAndCanvasメソッドで、プロセスアプローチと描画先のCanvasを指定します。

どのプロセスアプローチを選ぶかによってWebGLの内部処理が異なります。 最新のRhodoniteではFastestWebGL2をお薦めします。

const system = Rn.System.getInstance();
const gl = system.setProcessApproachAndCanvas(Rn.ProcessApproach.UniformWebGL1, document.getElementById('world'));

プロセスアプローチの一覧

種類	特徴	動作させるWebGLバージョン
UniformWebGL1	シェーダパラメータの受け渡しにUniform変数を使います。spector.jsなどでUniform変数へ渡すパラメータを確認できるため、トラブルシュートに向きます。	WebGL1
UniformWebGL2	シェーダパラメータの受け渡しにUniform変数を使います。spector.jsなどでUniform変数へ渡すパラメータを確認できるため、トラブルシュートに向きます。	WebGL2
FastestWebGL1	シェーダパラメータの受け渡しに浮動小数点テクスチャを使います。大量のパラメータ受け渡しが可能でモバイルに向きます。反面、高解像度のレンダリング時に性能が落ちるケースがあります。	WebGL1
FastestWebGL2	シェーダパラメータの受け渡しに浮動小数点テクスチャを使います。大量のパラメータ受け渡しが可能でモバイルに向きます。反面、高解像度のレンダリング時に性能が落ちるケースがあります。	WebGL2

まとめ

ここまででRhodoniteの初期化は完了です。 あとは必要なデータをコード生成するか、またはglTFなどのファイルから読み込むなどして3Dデータを作成し、それをExpressionインスタンスを介してSystemのprocessメソッドに渡して描画を行っていきます。