WebXR とは ｜WebXR を使ってメタバースを構築してみよう ～前編
今回は WebXR をはじめ VR / AR を使った、子ども向けプログラミング教育で先行する株式会社レベルエンター様に、メタバースで注目の WebXR について寄稿いただきました。
前編 / 中編 / 後編と分かれ、技術解説だけでなく、実行環境なしに簡単に試せるサンプルプログラムで実際にメタバースも構築できます！
この前編では WebXR を構成する技術について解説いただきます。
もくじ
WebXR とは
XR （ Extended reality ）とは「 VR 、 AR などの現実感を扱う技術の総称」です。
- VR （ Virtual Reality ）とは、仮想の空間を作り出しあたかもその場に存在しているかのような体験を提供する技術です。
- AR （ Augmented Reality ）とは、現実世界に電子情報を付与、合成し表示する技術です。
- そのほかにも MR （ Mixed Reality ）や、 SR （ Substitutional Reality ）等の技術があります。
WebXR とは、これら XR を Web ブラウザ上で実現するための技術です。
WebXR を構成する要素は HTML 、 CSS 、 Javascript などの一般的な Web 開発の技術です。 3D モデル、 XR デバイス、 AR マーカーといった XR 関連技術に関しても、導入をサポートするライブラリやフレームワークが充実しています。
WebXR の現状・動向
日本国内では 2016 年に一度「 VR 元年」というワードと共に VR サービスやデバイスが発売されましたが、そのブームも長くは続かず 2016 年にソニー・インタラクティブエンタテインメントが発売した PlayStation VR が 2019 年までに全世界で 500 万台しか売れていないなど、思うように市場を伸ばせずにいました。
label比較参考
2020 年に発売した PlayStation 5 は 2022 年現在までに全世界で 1720 万台を販売
しかし、 2022 年現在、 COVID-19 の流行やリモートワークの増加に伴って、仕事上のコミュニケーションにソーシャル VR プラットフォーム VRChat が活用されたり、特に最近ではコンピューター上の仮想空間や、その仮想空間を利用したサービス等を指すメタバースという言葉が流行したりなど、仮想空間での体験が再評価されています。
企業が提供するサービスの中には、 WebXR を取り入れ VR 空間上でショッピングが行える EC プラットフォームや、 AR でコード読み込むとキャラクターと写真撮影ができるキャンペーンなどの事例があります。
VRで会議してみたら、仕事とオフィスの未来がそこにあった：リモートワーク時代のライフハック術（1/2 ページ） – ITmedia NEWS
label企業の XR 活用事例
VR・ARを活用した新たなECプラットフォーム！「WebXRコマース」の事前出店者登録を開始しました。｜株式会社palanのプレスリリース
WebXR の基礎技術
「 WebXR 」は、 Web 開発者であれば Web 技術の知識や経験を生かして XR を構築することができます。 WebXR を構築する技術として、 Unity 、 Unreal Engine 等のゲームエンジンや 3D モデルのモデリングなどの習得は必要ではありません。
WebXR を構成する基本的な技術は Web 技術とそれほど大きく変わらず、 HTML 、 CSS 、 JavaScript 等の一般的な Web 技術のみで完結します。その上で 3D モデル、ゲームエンジン、 XR デバイスといった XR 関連技術を導入することでよりコンテンツの付加価値を高めることができます。
また、 WebVR 、 WebAR の開発には専用のフレームワークが存在し、 3D モデル、ゲームエンジン、 XR デバイス等の導入をサポートするライブラリが充実しているため、 Web 技術の知識や経験があれば今すぐにでも開発をスタートさせることができます。
WebXR 開発の代表的フレームワークとライブラリ
A-Frame
A-Frame は Mozilla が提供するブラウザ上で VR を構築するためのフレームワークです。
Web 開発者にとってなじみ深い HTML 、 JavaScript を用いて 3D VR 空間を構築し、 VR 空間上への 3D モデル、画像、動画などのコンポーネントの配置や、ヘッドマウントディスプレイ、 VR コントローラーなどの XR デバイスの接続をサポートします。
AR.js
AR.js はブラウザから現実世界にオーバーレイされたコンテンツの追加をサポートするライブラリです。
- カメラによる 2D 画像の検出によってコンテンツを表示する画像追跡
- GPS 機能を利用した特定の緯度経度の位置にコンテンツを表示するロケーションベース
- フレームワークによって用意されたARマーカーを読み込んでコンテンツを表示するマーカートラッキング
などの機能があり、上記の A-Frame と組み合わせることで、 3D モデルや動画、画像などを AR で表示できます。
上記のフレームワークは Javascript ベースのフレームワークなので、フレームワーク同士を組み合わせた開発や、もちろんデータベースサーバー等のバックエンドとの連携も可能ですし、オープンソースのライブラリと併用して目的に応じた開発を行うことができます。
より高度なものをつくるために必要な知識
このあと中編 / 後編で作成するプログラムは Javascript フレームワークとフロントエンドのみで完結する簡易的なものです。 3D モデルや XR デバイスなどの XR 関連技術や、 WebRTC 等の他の API と組み合わせることにより、より高度なコンテンツを作ることができます。 以下に紹介するツールやコンポーネントを使えると、開発の幅を大きく広げられます。
3D モデル
目的に沿った 3D モデルを用意することで、 VR、AR コンテンツの表現力を大きく向上することができます。
注意点として 3D モデルを作成するソフトウェアにはフォーマットが多数存在しており、利用するフレームワークやライブラリによってはフォーマットが対応していない場合があります。
前述の A-Frame や AR.js では、 glTF/glb 形式が推奨されています。
blender
blender.org – Home of the Blender project – Free and Open 3D Creation Software
無料で使えるメジャーな 3D モデルエディタ。初心者から上級者まで多くの層に利用されています。 3D モデルエディタを扱えると、 WebXR フレームワーク上で操作が難しい、 3D モデルの造形の変更や、色合い、明るさの修正、アニメーションの付与といった編集ができます。
また、 blender はフリーソフトウェアであり利用ユーザーも多いため、有用的なプラグインや、ツールのリファレンスが Web 上に多数存在しているのも魅力です。
Three.js
Three.js は Web ブラウザ上でリアルタイムに 3D コンピュータグラフィックスをレンダリングし 3D モデルを描画するためのJavaScript API 。
通常 Web 上でのコンピュータグラフィックスのレンダリングには WebGL（ Web Graphics Library ）という JavaScript API を利用しますが、 Three.js は WebGL のラッパーであり、比較的簡易なコードで WebGL のレンダリングを利用できます。
また、上述の A-Frame の実態は Three.js のラッパーであり、 Three.js を使いこなすことで A-Frame では用意されていない細やかな操作や 3D グラフィックスの表現をプログラミングできます。
model-viewer
Google によってリリースされた、多くのブラウザとデバイスで 3D モデルを簡単にレンダリングできる Web コンポーネント。
読み込まれた 3D モデルを画面に表示するだけでなく AR にも対応し、カメラで平面を検知して実寸大の 3D モデルをその場に表示できます。
3D モデルは、 glTF/glb 形式対応。
WebRTC
HTML5 標準の Web ブラウザ上でリアルタイム通信を行う API 。
VR 空間と組み合わせて簡易的なメタバースを構築できます。
WebXR Device API
W3C ( World Wide Web Consortium ) からリリースされた、 XR デバイスへの接続をサポートする JavaScript API 。
VR 、 AR で利用されるヘッドマウントディスプレイやポジションセンサー等の XR デバイスの接続設定を比較的簡単なコードで実装できます。
http-server
静的ファイル用のローカルサーバーを立ち上げる node.js のライブラリ。
コマンド 1 つで対象ディレクトリのローカルサーバーを立ち上げることができるので、デバッグの際に便利です。
以下が http-server のインストール手順です。
- node.jsがインストールされた状態で、ターミナルで以下のコマンド実行
$ npm install --global http-server - インストールが完了したら HTML が格納されたディレクトリで以下のコマンドを実行
$ http-server
WebXR を作ってみよう
この前編記事は解説中心の内容ですが、中編 / 後編 と続く記事ではご紹介した技術を実際に使って簡単に WebXR を作ります。
中編記事では WebXR フレームワークの中で VR 、 AR どちらにも対応しており、フロントエンドのみで完結することができる A-Frame を使って WebXR のサンプルを作成します。
それを踏まえて後編記事では A-Frame を使って開発された BLOCKVROCK を使い、簡易的なメタバースの構築を紹介します。
後編記事で紹介する BLOCKVROCK は教育向けコーディングサービスで、ビジュアルプログラミングのコードから A-Frame のコードを生成して小学生でも VR や AR を作り出すことができます。さらに、 A-Frame と WebRTC ライブラリを組み合わせて、 VR 空間上で簡易的なメタバースを構築することもできます。
まとめ
XR とは VR、AR といった仮想技術の総称で、 COVID-19 の流行やリモートワークの増加に伴ってその価値が評価されつつあります。
WebXR はそういった XR を Web 上で実現するための技術であり、 HTML 、 CSS 、 JavaScript といった一般的な Web 技術で構成されます。
次回、中編記事では今回紹介した A-Frame と AR.js を使って簡単な VR 、 AR サンプルを作成したいと思います。
info_outline中編はこちら
株式会社 レベルエンター
レベルエンターのプログラマー/プログラミング教育講師。
大学時代は AI 、 IoT を研究しながら、 4 年間レベルエンターで子供向けのプログラミング教育や高校向けの WebXR 授業の講師として活動。
また、 2021 年からはフルタイムで Web アプリケーションや WebXR アプリケーションの開発に従事。
BLOCKVROCK は一般公開初日のイベントで司会進行として登壇するなど関わりが深い。