プラグインを Web ブラウザ上で動作させることは決して容易ではなく、開発する前に解決しなければならないさまざまな技術的問題があります。 従って、プラグイン開発者はプラグイン開発前に、通常のHTMLやJacaScriptの実装とは異なる独自の制約を受け入れる必要があります。

プラグインはJavaScriptで実装できますが、WebAssemblyで動作する部分とiframeで動作する部分の2つに分かれています。

どちらともサードパーティのJavaScriptコードを安全に実行することができますが、それぞれにメリットとデメリットが存在します。 なので、Re:Earthはハイブリッド方式を採用しています。

WebAssembly はコードを同期かつ高速に実行でき、Re:Earth のデータにアクセスできますが、Web ブラウザーでサポートされている API と UI は使用できません。iframe は、Web ブラウザーでサポートされているすべての API を使用でき、HTML で UI を表示できます。ただし、Re:Earth データに直接アクセスすることはできず、非同期で実行されます。

WebAssembly部分とiframeはpostMessageを通してメッセージのやり取りをすることができます。これにより、Re:Earthからiframeに必要なデータのみを送信したり、iframe内のHTMLを書き換えたり、サーバー情報を取得したりすることができます。また、取得した情報をWebAssembly部に渡すこともできます。

WebAssembly

これは、プラグインが最初にロードされたときに実行されるエントリーポイントであり、Re:Earthと同じスレッドで同期的に実行されます。

次のことが可能です:

• Re:Earthのシーンデータを取得する
• Re:EarthプラグインAPIを呼び出す
• Re:Earthのシーンを部分的に変更 (現在、レイヤーのプロパティの変更がサポートされています)
• シーンからイベントを取得する
• reearth.ui.postMessage 経由でiframe側にデータを送信し、reearth.on("message", () => {}) 経由でiframe側からデータを受信します。

次のことはできません:

• HTMLと任意のUIを直接レンダリングする (iframeを使用する必要があります)
• webブラウザーが提供するほとんどのAPIを使用する(console.logなど一部のAPIのみ利用可能)
• HTTP経由で外部のサーバーと通信する