はじめに

連日というか、３～４ヵ月？、毎日ゲーム開発ばかりしてるので、少し前にディスコードのコミュニティに入ってみたのですが、皆レベルが高い…。

それで開発言語を見てると多いのは、Unity。

尚且つ、UnityでWebXRのアプリ開発をしてデプロイしてる人もいるので、何となくＡＩにこの事を聞いて知ったのは、UnityはC＃で製作したバイナリデータを全部JavaScriptへ変換してるとの事。

WebXR の基礎

WebXR の基礎

WebXRは、 WebXR 機器 API を中核として、拡張現実と仮想現実（AR および VR）の両方をウェブ上で実現するために必要な機能を提供します。これらの技術を合わせて、複合現実 (MR) またはクロス現実 (XR) と呼びます。複合現実は大規模で複雑なテーマであり、学ぶべきことが多く、また、ユーザーにとって魅力的な体験を生み出すために他の多くの API をまとめる必要があります。

https://developer.mozilla.org/ja/docs/Web/API/WebXR_Device_API/Fundamentals

Unityの事はよく知らなかったので、バイナリデータをWEBにアップロードしてそれを読み込んで動かしてるのかと思ってました。

尚且つ、そういう仕組みはないらしい。

そこで、どういう風に変換してるのかをAIに聞いて内容が面白かったので記事にしてます。

Unityの記事にしようかと思いましたが、コードはJavaScriptのようなので、JavaScriptのカテゴリにしました。

JavaScriptは、ほんとWEBをベースとしながらもサーバサイドでも動き、ゲーム開発でも使えるし、物凄く利用用途が広いのでパワフルすぎる言語ですね…。
特にWEB上では、他の追随を許さない独壇場。

Unityで作ったC#コードをWebで実行する仕組みとは？

Unityで作成したアプリケーションがWebブラウザ上で動作する仕組みは、少し複雑ですが非常に興味深いものです。多くの人が、Unityで作ったC#のバイナリファイルをそのままWebサーバにアップロードして、ブラウザ上で動作させていると思っているかもしれませんが、実際は少し違います。

C#コードをWebブラウザで実行する仕組み

Unityで作成したゲームやVR/ARアプリケーションがWebブラウザ上で動作するためには、C#のコードをJavaScriptまたはWebAssembly（Wasm）に変換する必要があります。Webブラウザは、C#コードを直接理解することはできないため、変換が必須です。

C# → WebGL

Unityでは、C#で書いたコードがWebGLターゲットに向けてビルドされる際、C#コードはコンパイルされ、中間コード（IL/CIL）になります。この中間コードがJavaScriptまたはWebAssemblyに変換され、最終的にWebブラウザで実行可能な状態になります。

JavaScriptとWebAssembly（Wasm）の役割

Unityは、最初に書かれたC#コードをWebGLを使ってWebブラウザ上で動作させるために、次の技術を使用します：

  • JavaScript: 従来のWeb技術で、UnityがC#コードをブラウザ内で動作させるために変換されます。
  • WebAssembly（Wasm）: 最近の技術で、C#コードをネイティブコードに近い形でコンパイルし、ブラウザでより高速に動作するようにします。

1. C#コード → 中間コード（CIL/IL）

最初に、Unityで書いたC#コードは、CIL（Common Intermediate Language）やIL（Intermediate Language）と呼ばれる中間コードにコンパイルされます。C#コードはまずこの中間コードに変換され、その後、最終的にJavaScriptやWebAssemblyに変換される準備が整います。

中間コード（CIL/IL）の役割

  • CIL/ILは、C#コードがコンパイルされた後の中間形式であり、.NETの共通言語基盤（CLR）が理解するコードです。このコードは、特定のプラットフォームに依存することなく、さまざまなデバイスで実行可能になります。
  • Unityでは、C#コードが最初にCILとして変換され、その後、ターゲットプラットフォーム（WebGLの場合はブラウザ）に適した形式にさらに変換されます。この過程により、C#のプラットフォーム依存性を取り除き、汎用的なコードに変換することができます。

なぜ中間コードが必要なのか？

中間コードは、C#などの高級言語で書かれたコードを、低レベルの実行環境に依存せずに動作できるようにするために使用されます。これにより、Unityは異なるプラットフォーム（Windows、Mac、WebGL、モバイルなど）向けにアプリケーションをビルドする際に、共通のコードベースを維持できます。

この段階では、C#コードはまだWebブラウザで実行できる状態にはありませんが、中間コード（CIL/IL）としてプラットフォームに依存しない形で出力され、次の変換ステップに進む準備が整います。

次のステップでは、この中間コードがどのようにしてJavaScriptやWebAssembly（Wasm）に変換され、実際にブラウザ上で動作するようになるのかを解説します。

2. C#コードの変換

次に、UnityはそのC#コードをJavaScriptまたはWebAssembly（Wasm）に変換します。これが、実際にブラウザで動作するコードです。

1. JavaScript

  • JavaScriptは、Webブラウザ上で広くサポートされているプログラミング言語です。WebGLを利用して3Dグラフィックスを描画するため、UnityはC#コードをJavaScriptに変換し、これを利用してブラウザ内で動作させます。
  • JavaScriptに変換されたコードは、ブラウザのJavaScriptエンジンによって実行されます。これにより、3Dグラフィックスやゲームのロジック、インタラクションなどが処理されます。JavaScriptはほとんどのブラウザでネイティブにサポートされており、WebGLを使ってハードウェアアクセラレーションされた描画を実現します。

2. WebAssembly（Wasm）

  • WebAssembly（Wasm）は、最近の技術で、C#コードをより高速に実行するために使われます。WebAssemblyは、ブラウザ内でネイティブコードに近い形で実行されるため、パフォーマンスが大幅に向上します。
  • 特に、ゲームやVR/AR体験において、パフォーマンスは非常に重要です。WebAssemblyは、従来のJavaScriptよりも高速に動作し、ゲームのリアルタイムレンダリングやインタラクション処理において、効率的なパフォーマンスを提供します。
  • Unityは、C#コードをWebAssemblyに変換することで、ブラウザ上での実行速度を向上させ、よりスムーズで高性能な体験を提供することができます。

なぜWebAssemblyが重要なのか？

  • パフォーマンスの向上: WebAssemblyはJavaScriptに比べてネイティブコードに近い実行速度を提供します。これにより、特にグラフィックス処理やゲームロジックが高速化され、ゲームやVR/AR体験が快適に動作します。
  • 互換性: WebAssemblyは主要なブラウザでサポートされており、クロスプラットフォームでの互換性が高いです。これにより、デスクトップ、モバイル、VRヘッドセットなど、さまざまなデバイスで同じアプリケーションを実行できます。

まとめ

  • C#コードがJavaScriptやWebAssemblyに変換され、これが実際にブラウザ上で動作するコードとなります。
  • JavaScriptは広くサポートされており、ブラウザ上で動作しますが、WebAssemblyを使うことで、パフォーマンスが大幅に向上し、特にゲームやVR/AR体験において重要です。

次に、この変換されたコードが実際にどのようにWebブラウザで動作するのか、どのようにして最適化された実行が行われるのかを見ていきます。

3. Webサーバへのアップロード

変換されたJavaScriptやWebAssembly（Wasm）、そしてアプリケーションに必要なリソース（画像、音声、シェーダー、3Dモデルなど）をWebサーバにアップロードします。このプロセスにより、ユーザーがWebブラウザでアプリケーションにアクセスした際、すぐに実行できるようになります。

必要なリソースのアップロード

  • JavaScriptやWasmファイル: これらのファイルは、UnityがC#コードを変換して作成したファイルで、ブラウザ内で実行されるコードを含んでいます。これらをWebサーバにアップロードすることで、ブラウザがアクセスして実行できるようになります。

  • 3Dモデル、テクスチャ、シェーダー: Unityで作成した3Dグラフィックスやエフェクトに必要なリソースもWebサーバにアップロードします。これには、テクスチャ画像やモデルファイル、シェーダープログラムなどが含まれます。これらのリソースは、ブラウザで読み込まれ、描画処理に使用されます。

  • 音声ファイル: 音声や効果音なども必要な場合、Webサーバにアップロードして、ユーザーがアクセスしたときに適切に再生できるようにします。

アップロード後の準備

  1. Webサーバでのホスティング:

    • これらの変換後のファイルとリソースは、Webサーバにホスティングされます。サーバは、ユーザーのリクエストに応じて必要なファイルを提供し、Webブラウザで実行可能な状態を作り出します。
    • アップロードには、通常のWebホスティングサービスや、itch.ioのようなゲームプラットフォームを利用することができます。これにより、ゲームやインタラクティブな体験を簡単に公開できます。

  2. ファイルの構成とリンク:

    • Webサーバ上では、これらのファイルは適切なディレクトリ構成に配置され、index.htmlやJavaScriptファイルがメインの実行ファイルとして動作します。ユーザーがWebブラウザを通じてアクセスした際、これらのリソースが読み込まれ、実行されます。
    • Unityで生成されたindex.htmlには、必要なJavaScriptやWasmの読み込み指示が含まれており、ブラウザはそれらのファイルをリクエストして実行します。

アクセスと実行の準備

ユーザーがWebブラウザでアプリケーションにアクセスすると、Webサーバから必要なファイルをHTTP/HTTPS経由で読み込み、実行する準備が整います。ユーザーはブラウザ上でUnityのゲームやインタラクティブ体験を楽しむことができるようになります。

サーバの選択肢

  • Webホスティングサービス: Unityで作成したアプリケーションを公開するためには、一般的なWebホスティングサービス（例えば、Netlify、Vercel、GitHub Pagesなど）を使って、Webサーバとしてホスティングすることができます。これにより、ユーザーがWebブラウザ上でアクセス可能になります。

  • ゲームプラットフォーム: itch.ioなどのゲームプラットフォームも、WebGLアプリケーションをホスティングして公開できる場所です。これらのプラットフォームを使えば、簡単にWebGLアプリケーションを公開し、ゲームのプレイヤーがアクセスできるようにできます。

まとめ

  • 変換されたJavaScriptやWasmファイル、および関連するリソースをWebサーバにアップロードします。
  • アップロード後、ユーザーがWebブラウザでアプリケーションにアクセスすると、Webサーバから必要なファイルが読み込まれ、すぐに実行される準備が整います。
  • Webサーバを利用することで、簡単にWebGLアプリケーションを公開し、インタラクティブな体験を提供できます。

次のセクションでは、実際にWebブラウザ上での動作と、そのパフォーマンスの最適化について掘り下げていきます。

4. ブラウザでの実行

ユーザーがWebブラウザでそのアプリケーションにアクセスすると、JavaScriptやWebAssemblyが読み込まれ、ブラウザ上で実行されます。Unityは内部で、GPUを使って高速に3Dグラフィックスを描画し、VR/AR体験を提供します。

WebGLとGPUによる描画

  • WebGLは、ブラウザ内でGPU（グラフィック・プロセッシング・ユニット）を利用して、高速に3Dグラフィックスを描画するための技術です。WebGLは、OpenGL ES（モバイルデバイス向けのOpenGL）に基づいており、これを利用してブラウザ上でリアルタイムに3Dシーンをレンダリングできます。

  • Unityは、WebGLを活用して、ゲームやVR/AR体験をGPUにオフロードし、効率的に描画処理を行います。これにより、CPU負担が軽減され、パフォーマンスが向上します。3Dグラフィックスの描画や物理計算は、全てGPUが担当します。

JavaScriptとWebAssemblyの役割

  • JavaScriptがWebブラウザで実行される主要なコードですが、Unityが生成したWebAssembly（Wasm）が使われる場合、さらにパフォーマンスが向上します。WebAssemblyは、ネイティブコードに近い実行速度で動作し、ゲームやインタラクティブな体験に必要な計算量を効率的に処理します。

  • WebAssemblyを使うことで、特に計算量の多いゲームロジックや3D描画処理が、より高速にブラウザで実行され、スムーズな体験を提供します。Wasmは、JavaScriptよりも効率的にメモリを扱い、処理を並列化できるため、パフォーマンスの向上が期待できます。

ユーザーインタラクションとVR/AR体験

  • VR（仮想現実）やAR（拡張現実）の体験も、ブラウザ上で提供することができます。ユーザーがVRデバイスを使ってアクセスした場合、UnityはVRコントローラやヘッドセットからの入力を処理し、リアルタイムで視覚的なフィードバックを提供します。

  • UnityのWebGLビルドは、VR/AR体験を提供するための入力システムやカメラ設定もサポートしており、これを使うことで、ユーザーはブラウザを通じてVRやAR体験を楽しむことができます。

パフォーマンスと最適化

  • UnityはWebGLビルド時に、自動的にパフォーマンスを最適化するためのいくつかの手法を採用しています。たとえば、テクスチャ圧縮やメモリ管理、描画の最適化が行われます。また、WebAssemblyを使用することで、描画処理やゲームロジックの計算がより効率的に行われ、スムーズな体験を提供できます。

  • ユーザーがアクセスするデバイスの性能に応じて、Unityは適切な設定を選び、最適化を施すことで、どのデバイスでも快適に動作するようにします。

まとめ

  • ユーザーがWebブラウザでアプリケーションにアクセスすると、JavaScriptやWebAssemblyが読み込まれ、ブラウザ上で実行されます。
  • WebGLを使って、GPUが3Dグラフィックスの描画を行い、ゲームやVR/AR体験を提供します。
  • WebAssemblyは、ネイティブコードに近い実行速度を提供し、特にゲームやVR/ARにおいて重要なパフォーマンス向上を実現します。
  • ユーザーインタラクション、特にVR/AR体験に対応し、リアルタイムで3Dコンテンツやインタラクションを提供します。

次のセクションでは、Webブラウザ上での動作におけるパフォーマンス最適化や、最適なデバイスサポートについて詳しく解説します。

WebAssemblyの重要性

最近では、WebAssembly（Wasm）が注目されています。これは、ブラウザ内でネイティブコードを高速に実行できる新しい技術です。従来のJavaScriptよりも高性能で動作するため、特にゲームやインタラクティブな体験を提供する際に、UnityのWebGLビルドにおいても、C#コードをWebAssemblyに変換することで、よりパフォーマンスの高いWebアプリケーションを提供することが可能です。

WebAssemblyとは？

  • WebAssembly（Wasm）は、ブラウザ内で高効率にネイティブコードを実行するための技術です。これにより、従来のJavaScriptよりも高速に計算を処理でき、特に高性能を必要とするゲームやVR/AR体験において重要な役割を果たします。
  • Wasmは、ブラウザが直接実行できるバイナリ形式のコードを提供し、従来のJavaScriptよりも効率的に動作します。このため、ゲームやグラフィックス処理がリアルタイムで行われる際に、Wasmは非常に有用です。

なぜWebAssemblyが重要なのか？

  1. パフォーマンスの向上

    • WebAssemblyは、ネイティブコードに近い実行速度を提供します。JavaScriptはインタープリタ型の言語であり、実行速度が限られていることがありますが、Wasmはコンパイルされたコードをブラウザ内で直接実行するため、計算速度が格段に向上します。特に、複雑なグラフィックス処理や物理演算を行うゲームやVRアプリケーションにおいて、この性能向上は非常に重要です。

  2. よりスムーズな体験

    • WebAssemblyを使用することで、リアルタイムでのグラフィックレンダリングやユーザーインタラクションがよりスムーズに行われます。これにより、ゲームやインタラクティブな体験のレスポンスが高速になり、ユーザー体験が大幅に向上します。
    • 特にVR/AR体験では、高いフレームレートが求められます。WebAssemblyを使用することで、より高いフレームレートを維持し、遅延なくインタラクションを行うことが可能になります。

  3. クロスプラットフォームの対応

    • WebAssemblyは主要なブラウザでサポートされており、Chrome、Firefox、Safari、Edgeなど、ほとんどのブラウザで利用できます。このため、クロスプラットフォームでの互換性が高く、デスクトップやモバイル、タブレット、さらにはVRデバイスなど、さまざまなデバイスで一貫した体験を提供できます。
    • これにより、Webアプリケーションを開発した際、さまざまなデバイスで同じ高パフォーマンスな体験を提供することができます。

UnityでのWebAssemblyの利用

UnityのWebGLビルドにおいて、WebAssemblyはC#コードのパフォーマンスを大きく向上させる役割を担います。Unityは、C#コードをWebAssemblyに変換して、ブラウザ上でより効率的に実行できるようにします。

  • WebAssemblyを利用することで、Unityの3Dグラフィックスや物理演算、VR/AR体験などが、よりスムーズで高品質なものになります。
  • Wasmを使うことで、従来のJavaScriptでは難しかった計算量の多い処理がブラウザ内で効率的に処理され、ゲームやアプリケーションのパフォーマンスが向上します。

WebAssemblyを活用するメリット

  • 高速な実行: ネイティブコードに近い形で実行されるため、パフォーマンスが大幅に向上。
  • スムーズな体験: 複雑な処理や高品質なグラフィックスでも、高速に描画・計算が行われる。
  • クロスプラットフォーム: 複数のブラウザとデバイスで一貫した動作を提供。

まとめ

  • WebAssembly（Wasm）は、ブラウザ内でネイティブコードに近い高速な実行を実現する技術です。
  • UnityのWebGLビルドにおいて、WebAssemblyを使用することで、ゲームやVR/AR体験のパフォーマンスが大幅に向上します。
  • WebAssemblyを活用することで、よりスムーズで高品質な体験を提供することが可能となります。

次のセクションでは、実際にWebAssemblyを使ったパフォーマンス最適化の方法や、最適なデバイスサポートについてさらに詳しく解説していきます。

まとめ

  • C#のバイナリファイルをそのままWebサーバにアップして動かすわけではありません。
  • Unityでは、C#コードをJavaScriptまたはWebAssembly（Wasm）に変換し、それをWebブラウザで実行します。
  • WebAssemblyを使うことで、C#コードを高速に実行でき、Webブラウザでの3DグラフィックスやVR/AR体験がスムーズに動作します。

Unityを使えば、C#で開発したゲームやインタラクティブ体験をWebブラウザ上で動作させるための強力な仕組みが提供されます。JavaScriptやWebAssemblyの利用により、パフォーマンスも向上し、よりスムーズな体験をユーザーに届けることができます。

これにより、Web上で手軽に高性能なゲームやVR/AR体験を提供できるようになり、開発者にとっても効率的で魅力的な選択肢となります。