今回、UnityとA-Frameで作ったWebGLによる3Dコンテンツについて、簡単な性能比較を行いました。APIによって、ブラウザを通してデバイスのGPUにアクセスする必要があります。WebGLをそのまま扱うのは高度な技術を必要とするため、簡単に扱うためにThree.jsというJavaScriptライブラリが開発されました。Three.jsに関しては以下のサイトに詳しく書かれています。liginc.co.jpA-FrameはこのThree.jsをベースにして開発されたJavaScriptのフレームワークで、ブラウザ上でのVRコンテンツ実装に非常に適しています。実行時、JavaScriptは構文解析、コンパイル+最適化、再最適化といったプロセスを経て実行されます。さんが記事を書いています。ご覧になってください。Unityで作られたブラウザゲームを出力する場合も同様に、WebGLを使用するようにasm.jsで出力されています。asm.jsはJavaScriptのサブセットで、より高速にJavaScriptを実行することができます。最近、WebAssembly(通称wasm)という新たなプログラミング言語が登場し、こちらの形式でもUnityからブラウザゲームを出力することができるようになりました。WebAssemblyはブラウザ上でバイナリフォーマットの形で実行することができ、構文解析の必要がなく、さらにJavaScriptに比べて容量が小さくなります。asm.jsとWebAssemblyについては、以下のリンク先で分かりやすく説明されています。asm.jsとWebAssemblyって実際なんなの?対応状況asm.jsはJavaScriptのサブセットのため、最新版のJavaScriptに対応した全てのブラウザ上で動作します。22以降で対応しています。WebGLコンテンツ対応ブラウザは、以下のリンクに示されています。モバイル端末での閲覧は非推奨となっております。比べる意味Unityで作成したWebGLコンテンツは現在公式ではVR化することはできません。WebGLコンテンツをVRに対応させる手法がすでに確立されています。dev.mozilla.jpとなると、どちらで作った方が性能が高くなるのか、という点は気になるところです。今回は、3つのサンプルをUnity,A-Frameで作り、その読み込み時間とFPSを比較します。58(64-bit)Unity,A-Frameともに、23インチモニターへ全画面出力した状態で、検証を行いました。今回作ったサンプル今回の性能比較に当たって、3つのシーンを作成しました。※全てのページでマウスを使用した見回しを行うことができます。※できるだけお互いの描画条件を同じにするために、Unity側では動的バッチングの機能を切ってあります。以下に今回作成したプロジェクトのgithubをおいておきます。github.com何を比較するのか読み込み時間とFPSを比較するといいましたが、実際に何をもって比較するのか、を示しておきます。読み込み時間の比較まず、ページの「読み込み」は以下に示した工程で進みます。「初期処理」の部分にはデコード、構文解析、コンパイル、実行の工程を含みます。ここでの「読み込み時間」は、「ホームページにアクセスしてから、レンダーループが始まるまで」と定義します。肝心の「レンダーループが始まるタイミング」ですが、インスペクターをみるとレンダーループが始まるタイミングで、UnityもA-Frameもリクエストを送信しているようです。Unityというわけなので、各サンプルで10回ずつスーパーリロードを行い、これらのリクエストが送信されるまでの時間の平均を「読み込み時間」とします。各フレームではフレーム処理、描画の順で処理が行われ、描画が終わると次のフレームに移行するようになっています。「フレーム処理」は各フレームで行われている諸々の計算を含んでいます。FPSは、A-Frameでは<a-scene>タグにstatsコンポーネントを付与することで取得でき、Unityでは以下のブログで紹介された方法で取得することができます。fantom1x.blog130.fc2.comなので、各サンプルでそれぞれ10秒分のFPSを取得し、その平均FPSを比較していきます。実際の比較サンプル1での比較こちらは、どの行程にも負荷をかけていない状態での比較になります。読み込み時の「初期処理」と、レンダーループでの「描画」に負荷をかけています。読み込み時の「初期処理」と、レンダーループでの「フレーム処理」と「描画」に負荷をかけています。今回のテストでは、ページにアクセスしてからコンテンツが表示されるまでの読み込み時間はA-Frameが早く、FPSはUnityの方が優秀でカクツキにくい、という結論が出ました。A-FrameとUnityでは読み込みの時に行われる初期処理が違ってくるため、単純にA-Frameの方が早いというわけではありませんが、このくらいのサイズのプロジェクトならA-Frameの方が読み込み時間が短くなるようです。行わなくてよくなる、というのがありますので、もっと大規模なプロジェクトで比較してみると、また違った結果が出てくるかもしれません。FPSでの比較だと、Unityの方が良い結果を残しました。WebAssemblyは処理速度には影響を与えないはずですが、Unityの方はそれ以外の部分でも細かく最適化が行われているのだと思われます。VRコンテンツにおいて、酔いの防止という観点でFPSは非常に重要なので、描画に負荷がかかると判断したときはUnityを使うことを考慮に入れるとよいでしょう。気になった点としては、初期処理に負荷をかけた時の読み込み時間の増大がUnityよりもA-Frameの方が大きい点ですね。Unityでは処理速度は早いが、読み込み時にコードに書かれた処理以外の初期化処理を多く行っている、ということなのではないでしょうか。モバイル端末での利用を見据えてVRコンテンツの配信を考えるにあたって、現在最も普及している有力な候補はモバイル端末だと思われます。モバイル端末のブラウザ上でWebGLコンテンツを配信する場合について考えておきます。現状モバイルでVRコンテンツを実装する場合、通信速度も含めて読み込み時間を考えるとA-Frameの方が適していると思われます。WebGLがモバイル端末での利用を非推奨していることもあります。WebGLを使用するという選択肢も十分考慮に入ってくるように思います。WebGLを使用するという選択肢も十分考慮に入ってくるでしょう。今回初めてベンチマークを行ってみましたが、なかなか奥深いものがありますね!WebAssemblyは最近になって正式対応され始めた新しめの言語なので、もっといろいろ試してみたいです。VRコンテンツを作っていく以上、読み込み速度とFPSは非常に気になるところですので、どんどん広まっていくことを切に願っております。VideoPlayerを使ってWindows向けの全天球動画プレイヤーを実装...こんばんは。Vive向けアプリケーション開発支援ライブラリVRTKを使ってVR内のアクションを実装してみ...糖質制限を始めてから生活習慣が改善され体調がすこぶるよくな...お気軽にお問い合わせ下さい!VRコンテンツ開発を検討している紹介されている機材を使ってみたいその他、VRについての質問があるなど、VR開発や記事の内容についてのご相談は、まずは下記の連絡先までお気軽にお問い合わせください。3Dコンテンツ用のシェーダーを書く。techlogはてなブログをはじめよう!voyagegroup_techさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。