初期化

Rhodoniteの初期化は簡単です。

Rn.System.initメソッドで、プロセスアプローチと描画先のCanvasを指定します。awaitの指定を忘れないでください。

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

await Rn.System.init({
  approach: Rn.ProcessApproach.DataTexture,
  canvas: document.getElementById('world')
};

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

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

まとめ

ここまでのコードをまとめたものを以下に示します。

// Systemを設定（プロセスアプローチの指定とcanvasの受け渡し）
await Rn.System.init({
  approach: Rn.ProcessApproach.DataTexture,
  canvas: document.getElementById('world')
});

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