最近「WebXR」という言葉を聞いたことがありませんか？「WebXR」は、一般的なWeb技術とUnityなど3Dモデル、ゲームエンジンなどの技術が揃ったフレームワークを指します。
「WebXR」だけで、一般的なWeb制作が完結する点。またフレームワーク内のXR技術を活用すれば、3D演出を加えたリッチコンテンツの制作が可能になります。
この記事では、WebXRフレームワークで有名なthree.js、A-Frame、babylon.jsの3つのフレームワークを比較し、解説いたします。ぜひWebXRの知識を深めるのに参考にしてください。
WebXRとは？
まず一般的に言われている「WebXR」を明確に定めた標準仕様はありません。
ではこの記事での「WebXR」がなにを指すのか、
2021年CEDECでZOZO Technologiesの諸星氏がスピーカーで登壇したとき、彼はWebXRを分かりやすく伝えるために、次のように定義して説明しました。
- 定義①ブラウザを通した VR 体験を WebVR、同 AR 体験を WebAR と定義し、それらの総称を WebXR と定義する。
- 定義②WebXR Device API の使用有無は問わないとする。
この記事でも「WebXR」は、上記定義で考えていきます。
WebXRはフロントエンド領域だと考える人が多いです。一般的なWeb技術に加えて、VR/ARなどXR技術も加わります。
Webの機能に視覚表現で3Dモデルを利用する事も多いと思ってください。
通常Web上で3D表現を行なうには、大量のコードを書く必要があります。
コロナ禍において、ライブや展示会などの開催が制限される状況が続いております。
その影響を受けてか、2020年からウェブ上でXRを表現するWebXR事例が増加してきています。
WebXRの魅力
魅力①ユーザーのアクセス負担が少ない点。
ブラウザ上からVR・ARなどを体験することができるため、わざわざツールを購入する必要がありません。
VRなどを体験する上でネックだったVR機器の購入が、WebXRにすることにより敷居を低くすることができます。
この敷居の低さを利用して、コロナ禍で開催が難しい展示会、音楽ライブ、演劇などを新たな表現でファンに提供することができます。
ここで企業がWebXRを活用している実例を紹介いたします。
【実例①】おうちで体験！かはくVR
国立科学博物館では「おうちで体験！ かはくVR」という自宅から国立科学博物館のコンテンツを楽しめるVRコンテンツを用意しています。
国立科学博物館の展示室や外観を高画質で撮影し、ウェブ上で3DビューもしくはVR映像で体験することができます。3DビューはPCやスマートフォンから楽しむことが可能です。
▼おうちで体験！ かはくVR — 国立科学博物館 — 公式サイト: https://www.kahaku.go.jp/VR/
【実例②】森美術館 未来と芸術展
森美術館が休館した際、会期途中で終了となった「未来と芸術展」という展示会がありました。森美術館では今回来館できなかったお客様のために、休館中の会場内を撮影し3D空間を制作したそうです。
PCやスマートフォンから3Dビューで体験することができ、各ポイントで南條史生（森美術館特別顧問）氏による動画解説を聞くことができます。
▼森美術館 未来と芸術展 公式サイト: https://www.mori.art.museum/jp/digital/03/
WebXRで注意すべき点
ブラウザ上でのWebXRのおかげでVR/ARへの体験の敷居が低くなった分、注意すべき点があります。
WebXRは、ブラウザを開くデバイス（PC、スマートフォンなど）のスペックへの依存が高いです。カメラ周りの処理が非常に重く、下手をすると体験中にアプリが落ちることがあります。
対応機種やデバイスの仕様は、必ず確認しましょう。
WebXRフレームワーク（A-Frame、three.js、babylon.js）の比較
こちらの表は、A-Frame、three.js、babylon.jsについて簡単にまとめたものです。
これらの詳細は表の下に各WebXRフレームワークごとにまとめております。
| A-Frame | Three.js | Babylon.js | |
| 無償/有償 | 無償 | 無償 | 無償 |
| VR対応 | 〇 | 〇 | 〇 |
| AR対応 | 〇 | 〇 | 〇 |
A-Frame
A-Frameは、初心者におすすめのWebXRフレームワークです。
AR・VRのどちらも対応することができ、フロントエンドで完結するのが魅力です。
A-FrameはMoziilaが提供しており、機能面のアップデートは年に1回のペースで行なわれています。
A-Frameの大きな特徴として、4点あげられます。
- 特徴①保守性・拡張性に優れている点です。
- 特徴②ゲーム開発で利用されるエンティティ・コンポーネント・システム（ECS）を採用している点です。
- 特徴③WebVRの作成を3DoFで可能な点です。
- 特徴④VRのヘッドマウントディスプレイ（HMD）のコントローラー操作にも対応したコンポーネントが提供されている点です。そのためMeta Questでハンドトラッキングなどを行なうことも可能です。
〇A-Frameチュートリアル YouTube映像
▼A-Frame 公式サイト: https://aframe.io
Three.js
Three.jsは、HTML5で3Dコンテンツを制作するためのJavaScriptライブラリです。オープンソースで個人で商用利用したいときでも、無償利用することが可能です。
Three.jsの大きな特徴は、次の3点です。
- 特徴①JavaScriptライブラリという名のとおり、操作はJavaScriptを使用します。
- 特徴②three.jsは、JSライブラリが非常に軽量である点です。
- 特徴③three.jsは、WebGLに該当し、プラグインがいりません。プラグイン未搭載のPCやスマートフォンで、3Dモデルを表現することができます。
Three.jsは、正確に言うとWebXRコンテンツ開発特化型ではなく、WebXR”も”開発できるという認識が正しいです。
Three.jsでは、次のような表現が可能です。
- マテリアル
- ジオメトリ
- テクスチャー
- ライン描画
- カメラ
- ライティング
- インタラクション
- スプライト
three.jsは、次に説明するA-Frameのラッパーです。そのため、three.jsを使いこなせば、A-Frameでできなかった細やかな表現ができるようになります。
A-Frameを使いこなし、さらに表現を磨いていくと、結果的にthree.jsに触れることになります。
▼Three.js公式サイト: https://threejs.org
Babylon.js
babylon.jsは、マイクロソフト社が開発したMicrosoft純正ライブラリで、ブラウザ上でリアルタイムに動作する3Dレンダリングフレームワークの1つです。
上記で説明したthree.jsと同様に、babylon.jsはWebXRコンテンツ開発特化型ではなく、WebXR”も”開発できるという認識が正しいです。
babylon.jsの大きな特徴は、次の点です。
- 特徴①コードを大量に書くのではなく、UnityやUnreal Engineのような3DエンジンでWebVRの制作が可能な点です。
babylon.jsは、JavaScriptを書くのが苦手で、Unityのように直感的に描画したい方におすすめします。
〇babylon.js YouTube動画
▼ Babylon.js 公式サイト: https://www.babylonjs.com
まとめ
いかがでしたか？WebXRフレームワーク技術で、three.js、A-Frame、babylon.jsの3つを比較し、紹介いたしました。
今後、WebXRの需要は増えると考えられます。理由は安価で性能のいいVRデバイスやARグラスが普及するには、まだ時間がかかりそうだからです。
Web上で3D表現ができることは、今後注目されていくでしょう。
最初にWebXRについて勉強を始めるなら、A-Frameをおすすめします。そこからWebXRへの理解を深めて、three.jsなどの勉強を始めるといいでしょう。
しかし、WebXRの開発をどこから手をつけたらいいか分からないと困っている方もいるでしょう。ONETECHでは、数多くのVR・AR・MRでの制作実績があります。
ONETECHの3DCGを制作する3DモデラーからWeb上で3D表現を行なうWebGLを制作できるエンジニアまで揃っていることが強みです。
こちらのURLページは、ONETECHのXR（AR/VR/MR）の過去の開発実績をまとめたものです。ぜひ参考にしてください。
XR(AR/VR/MR) – Works | ONETECH社の開発実績
2022年最新Web XRフレームワーク比較資料追加
どのフレームワークが良いか調査しましたので皆様に共有します。
参考にしてください。
| Three.JS | A-frame | Babylon.JS | 8th Wall | |
| Published | 2010 | 2015 | 2013 | 2019 |
| Website | threejs | A-frame | babylon.js | 8th wall |
|
Browser Compatibility |
Yes | Yes | Yes | Yes |
| Platforms | All | All | All | All |
| SLAM tracking | Yes | yes | Yes | yes |
| Object tracking | Yes | Yes | Yes | Yes |
| Image tracking | Yes | Yes | Yes | Yes |
| Motion tracking | Yes | Yes | Yes | Yes |
| Motion Capture | Yes | Yes | Yes | Yes |
| Lighting Estimation | Yes | Yes | Yes | Yes |
| Surface Detection | Yes | Yes | Yes | Yes |
| Face tracking | Yes | Yes | Yes | Yes |
| Body tracking | Yes | Yes | Yes | Yes |
| Programing Language | javascript + WebGL | javascript | javascript(ts) | javascript |
| APIs | Open APi | Open APi | Open APi | Not access |
| Scene Editor | Yes | Yes | Yes | Yes |
| User Input | Yes | Yes | Yes | Yes |
| Video Recording | back/front | back/front | back/front | back/front |
| Camera Support | back/front | back/front | back/front | back/front |
| License Type | opensource | opensource | openscource | Commercial |
| Price/month | free | free | free | $9 – > 99$ |
| Cloud Storage | no | no | no | Yes |
| GEO Location | Yes | Yes | Yes | Yes |
| LiDAR/ToF Support | Yes | Yes | Yes | Yes |
| 3D File format | glTF | glTF | glTF | glTF |
| Headsets Support | Yes | Yes | Yes | Yes |
| Advantages |
– Open source – オープンソース |
– Open source – オープンソース |
– Open source – オープンソース – 構文がわかりやすい |
– Best for webAR – WEBARに最適化
|
|
Disadvantages |
– Syntax change by version – バージョンによって構文の書き方が違う |
– Hard to customize – カスタマイズしにくい |
Slow than ThreeJS Three.jsより遅い |
cost to use たくさんのフレームワークがあるが学習コストがかかる |
|
Summary まとめ |
Is a powerful library mainly for creating 3D models and 3D animations for websites, supports all kinds of Light, Material effects.
ウェブサイトで３Dコンテンツやアニメーションを扱うためのライブラリーが豊富。 継続的にアップデートが行われていて、大きなコミュニティや豊富なドキュメントがあり簡単でわかりやすい |
Powerful in web VR and 3D modeling
ウェブサイトでVRや３Dコンテンツをhtmlタグでコントロールできる。開発者は扱いやすい |
Same as threejs but with a slightly better and better side than threejs
Three.jsとほぼ同じ マイクロソフトが開発しているので信頼できる |
Strong in AR development due to easy integration of A-Frame, Three.js. PlayCanvas, Babylon.js A-frame、Three.js、PlayCanvas、Babylon.jsとの連携が容易でAR開発が強い。 |
また下記リンク記事は、WebGLの開発実績です。ご覧ください。
住宅、マンション3Dシミュレーション「HOUSE DECOR」追加改修
ほかにもONETECHはベトナムオフショア開発でAR/MR/VRソフトウェアの開発に力を入れています。AR/MR/VRソフトウェアの開発のご相談はぜひOne Technology Japanへお気軽にお問い合わせください。
■XR開発に特化したベトナムオフショア開発企業 ONETECH
ONETECHは、XRに特化した開発会社です。
VR/ARコンテンツ開発を始めさまざまなシステム開発、アプリ開発、ソフトウェア開発をベトナム オフショアで開発しています。ベトナムのXRトップ企業として紹介されています。
2015年の創業から上場企業からスタートアップ企業までお客様100社以上の300以上のプロジェクトに関わってきた豊富な開発実績があります。
ONETECHはUNITYでAR/VRアプリの開発
AR/VR/MR開発は２０１５年より取り組んでおります。UNITYの技術者育成に力を入れて取り組んでいます。
VR開発：ベトナムでのVR開発分野において最も開発実績のある企業の一つとなっています。
AR開発：ARkit、ARcoreなどを利用して多数のアプリ開発、Babylon.js、8thWallなどでのWebAR開発実績がございます。
UNITY開発：ONETECHはUNITYを利用し様々なVR開発、AR開発、アプリ開発をしています。HoloLens/Oculus/HTC VIVE/Pico/Nreal Lightなど最新のデバイスも取り揃えています。
ホロレンズ開発：ベトナムで最も多くのHoloLens開発実績のある企業の一社です。
WEBXR開発：WEBXRは、仮想現実（VR）、拡張現実（AR）および混合現実（MR）をWebブラウザで利用するための技術スタンダードです。ユーザーは、特別なアプリをダウンロードすることなく、多様なデバイスで豊かな3Dコンテンツを体験できます。
CG制作:製品やゲームのアセット、業務用の映像などの3DCGコンテンツの３DCG制作（モデリング・アニメーション・レンダリング）をエンジニアと連携しながらワンストップで受けることが可能です。
