
XRソリューション:WebXR
専用アプリなしで、PCやスマホ、タブレットのブラウザ上で3Dオブジェクトなどを現実空間にオーバレイ表示します。
QRコードを読み取ったり、画像・マーカー認識やブラウザ上で特定のURLを開いたりすることで、3Dオブジェクトなどを現実空間に重ねて表示したり、ARコンテンツとインタラクションしたりできます。
▮ WebXRとは
Webブラウザ上で仮想現実(VR)や拡張現実(AR)などのXR(Cross Reality/Extended Reality)体験を実現するための技術です。
WebXR(WebAR/VR)領域において重要視されている「WebXR Device API」は、W3C(Web標準化団体)が定めたブラウザAPIで、以下をサポートしています。
- VR表示(Virtual Reality)
- AR表示(Augmented Reality)
- 6DoFトラッキング(ポジション・向き)
- ヘッドセット・スマホなどマルチデバイス対応
これにより、Chrome、Edge、FirefoxなどのWebブラウザ上で、XR体験が可能になります。
▮ WebXRの主なメリット
| 特徴 | 説明 |
| インストール不要 | ブラウザだけで動作。アプリ不要。 |
| マルチプラットフォーム | PC、スマホ、ARグラス、VRヘッドセットで表示可能。 |
| URLで共有 | Webサイトと同じようにリンクで共有できる。 |
| 開発が簡単 | Three.js や A-Frame など既存のWeb技術と連携しやすい。 |
▮ WebXR体験
恐竜骨格3Dモデルやゴジラ3DモデルのQRコードを読み取り、現実世界に3Dモデルをオーバレイ表示※体験できます。

※スマホ画面やタブレット画面上の「ARオーバレイ表示ボタン」(左図)をクリックすると3Dモデルが現実世界に重ねてオーバレイ表示されます。
VRツアー体験では、360度パノラマVR映像を複数使用して任意の見たい場所に移動することによって、まるでその場所をツアーしているかのような臨場感を体験できます。
モバイル機器向け『ジャイロセンサー連動』『VRグラス/VRゴーグル※』をサポート。

※スマホ画面やタブレット画面上の「VR立体視ボタン」(左図)をクリックするとVRツアー映像を立体視できます。
▶ 全画面表示
▮ WebXRの主な開発ライブラリ
WebXR実装に当り主な開発ライブラリには以下に示すものがあります。| ライブラリ名 | 特徴 |
|---|---|
| A-Frame | HTMLライクに3D/XRコンテンツを記述可能。初心者向け。 |
| Three.js | 高度な3D描画が可能。カスタマイズ性が高い。 |
| Babylon.js | 高機能でゲームエンジン的な使い方も可能。 |
| 8thWall | 高精度なWebAR。商用利用も多い(有料)。 |
| MindAR.js | マーカー認識ARに特化した軽量ライブラリ。 |
▮ WebXRの活用可能性
各適用分野でのWebXR活用可能性例を以下にご紹介します。
| 適用分野 | 活用例 |
|---|---|
| 教育 | XR教材・理科実験の再現 |
| 観光 | バーチャル観光地案内 |
| 小売 | AR試着や商品展示 |
| 展示会 | オンラインXR展示ブース |
| 医療 | 手術トレーニングのWebVR化 |





















