ECSやA-Frameなど、XR技術に関する基礎知識を解説

NECソリューションイノベータ株式会社
プラットフォーム事業ライン
プラットフォームサービス事業部
森 祐磨氏

2019年に新卒でNECソリューションイノベータに入社した森祐磨氏は、通信基盤の研究や新規事業の立ち上げ、AWS、Web開発といった業務やプロジェクトに携わってきた。そのため、実務においてはVRやARといった技術に触れることはなかった。

一方で、CG制作が趣味であったことから、プライベートでVRやARに興味を持ち、自ら学び、さまざまな技術を身に付けてきたという。

「参加者全員がVRの概念を理解し、自ら手を動かし簡単なWebVR/ARを実装できるようになってほしい」と述べ、まずはVRやARの概念などの解説からセッションを開始した。

VRは仮想現実とも言われるとおり、すべてがデジタルで構築される空間であり、多種多様な世界を実現できる可能性を秘めている。一方、拡張現実と呼ばれるARはデジタル情報を現実空間に表示することで、現実世界の情報拡張ができるという特徴を持つ。

さらに最近は、ARとVRの世界を行き来する、例えば、VR上で投げたボールが現実の壁に反射するといった、MR（複合現実）との技術も注目されており、Apple Vision Pro、Meta Quest 3などのデバイスがこれらの技術を体験できる。

続いて解説されたのは、ゲーム開発などで使われる開発手法「ECS（Entity Component System）」だ。ECSはEntity 、Component、Systemの3要素から構成されており、それぞれの頭文字を取った言葉でもある。

Entityは、キャラクターやアイテムといった画面上に描画されているオブジェクトである。そのオブジェクト、Entityに物性や座標、速度といった各種データコンテナを紐付けるのがComponentの役割だ。そして、各Componentに対して移動や物理演算処理を行うのがSystemとなる。

例えば、ゲームでキャラクターが移動したり、カメラ位置が変わったりするのはまさしくECSの移動システムによるものだ。

ただComponentは外すことができるため、待機状態のまま歩いてしまうといった失敗、バグが起きやすいという弱点もあると指摘された。

また、以下スライドのように衝突判定との設定をプログラムしないと、すり抜けてしまうようなことも生じるという、活用における注意点も述べられた。

続いて、実際にVR環境を実現するフレームワーク「A-Frame」が紹介された。A-FrameはHTMLでWebVR/ARが構築できるOSSフレームワークである。

WebVR/ARとは専用のアプリケーションをインストールすることなく、Webブラウザ上で直接プログラミングできる特徴を持つ。森氏は次のように補足した。

「簡単なVRを手軽に作りたい場合は向いていますが、リッチなコンテンツを制作しようと思う際には向いていません。本格的に作り込む際には、UnityやUnreal Engineといったアプリケーションの方が向いているからです」（森氏）

UnityやUnreal Engineとは、ゲーム開発に必要な各種ツールや環境が整備された開発プラットフォームであり、世界的に有名なゲームの多くが両エンジンにより開発されている。

ここからは実際に、A-Frameを使ってWebVR/ARを参加者が体験するワークショップとなった。森氏は以下のソースコードをスライドでスライドで示し、チャットでも共有した。

<script>タグ内でA-Frameのインポートが、タグでVR空間の作成を、タグで箱を作成し、位置や青い色といった色指定をしているなど、ソースコードの内容も解説。「ポジションやカラーが先ほど説明したコンポーネントになります」と補足した。

実際、多くの参加者が同ソースコードを実行し、スライド左下に示されているVR環境をブラウザ上で体験した。

A-Frameを使ってAR環境が体験できるワークショップでは、サンプルコードを示して参加者と共有した。A-Frameのインポートに加え、AR空間を実現するためのライブラリAR.jsもインポートされている。

Entityを実空間に表示されるための目印となるARマーカー（< a-marker >）が追加、指定されていることが分かる。なおワークショップではVR/ARともEntityは青い箱であったが、変えることで多様な表現ができるという。

Networked A-Frameを使ったワークショップで、参加者もWebVR/ARを体験！

続いてのステップは、複数のユーザーがメタバース空間を共有できる「WebRTC（Web Real-Time Communication）」という技術と、同技術を実行するフレームワーク「Networked A-Frame（以下、NAF）」のワークショップである。

今回のワークショップでは、すでに構築されているメタバース空間のアドレスを参加者に公開。「まずは体験してもらった方が分かりやすい」と、実際にアクセスできるソースコードを共有した。

森氏が作成したメタバースは宇宙を模した空間に、看板、ドミノ、海、ペンギン、ハロウィーンで登場するキャラクターなどが数多く描かれており、ユーザーはさまざまなエリアに移動することができる。

また、こちらも同じく物理演算システムが実装されているため、スペースキーで玉が発射され、ドミノやキャラクターを倒すことも可能だ。

森氏が作ったメタバース空間を体験した参加者からは、驚きや称賛の絵文字が多く発せられた。森氏は改めてメタバース空間の特徴や活用方法を次のように述べた。

「会社のメンバーで集まるイベントってありますよね。その際に、このようにゲーム性を持たせたメタバースを実装しておくと、面白みや新鮮味が出ると考えています」（森氏）

WebRTCは、最初こそ共通のシグナリングサーバーにアクセスするが、以降はユーザー同士が直接通信するため、サーバーへの負担がそれほどではないところがメリットである。
森氏は、NAFをAWSで構築するための構成図や構築手順も併せて紹介。「皆さんもぜひとも実際に環境を構築し、いろいろ作ってみてください」と、終始手を動かしながら、体験することの重要性を語った。

森氏は、XRの今後の活用事例についても見解を述べた。MRではHMDを装着することで、レシピ動画を見ながら料理を進めることができたり、鍋の上にバーチャルのキッチンタイマーをセットできたりするようになる。
VRでは今まさに盛り上がっているSNSやゲームはさらに発展していくと同時に、Google Earth VRを活用し、家にいながら世界中を旅行しているような体験が得られるようになる。ARでは待ち合わせの際、建物の裏側にいる相手をすぐに見つけられるといった活用もあるだろうと語った。 最後に森氏は、今回のコンテンツを作成するために利用した技術要素や流れを改めて紹介した。イラスト作成はIllustrator、3Dモデルの作成はBlender、作成したEntityをA-Frame上に実装し、AWSにデプロイしていった。つまり、メタバース空間を実現するためにはこれだけの技術要素が必要ということになる。

森氏は次のように述べ、講演セッションを締めた。
「実際は他の技術やツールも必要で、より多くのスキルセットが求められます。また、複数の技術要素を束ねることのできるディレクションスキルも必要になってくるなど、リッチなコンテンツを制作するには参入障壁は低くないと考えています」（森氏）

多くの質問が寄せられ、盛り上がったQ&Aタイム

講演セッション後はQ&Aタイムとなり、森氏が参加者からの問いに回答。参加者からは次々と質問が寄せられ、その数は最終的に40個近くなり、大いに盛り上がった。抜粋して紹介する。

Q．3dモデルのデータは何を使っているか

GLTF（GL Transmission Format）という形式を使っています。

Q．A-frameでGLBファイルを読み込むことは可能か

可能です。

Q．A-Frameで使用できる素材サイトのおすすめは？

Adobeの「Mixamo」がおすすめです。無料で3Dモデルにアニメーションを加えたものがダウンロードできます。

Q．公開するにはサーバーが必要か。またサーバーはAWS以外でも可能か

A-Frameだけであれば、無料で配信可能だと思います。一方でセッションでも説明したとおり、NAFの場合はシグリングサーバが必要になってきます。AWS以外のサーバーでも実装可能です。

Q．A-Frameがやはり学びやすいか

A-Frameは、Web経験がある人にとって参入障壁が低いフレームワークです。そのためWeb経験がない方は、A-Frameを学ぶのもUnreal Engineを学ぶのもどちらも初学の壁があると思います。まずは、興味を持ったフレームワークを使ってみるといいと思います。

Q．物理の公式覚えていないと物理演算実装することは難しいか

難しいと思います。というのも細かな動きを実現させようとすると、限りなく物理の動きに近づいていくからです。物理の公式からスタートした方が、<より簡単で間違いな表現ができると思います。

Q．Webの知識がどの程度あればスタートできるか。ゼロでも可能か

ゼロでも大丈夫だと思います。というのも私がA-Frameを始めたとき、HTMLやCSSの知識はほとんどゼロだったからです。

Q．メタバースに関わる上で最初に学ぶべきことは？

正しいラーニングパスかどうかは分かりませんが、自分の興味のあることから学びましょう。例えば絵を描くのが好きな人はそこから、3Dモデルやアニメーション制作に興味がある人は、同分野からといった具合です。好きな分野から学ぶと続くと思うからです。

Q．NAFは各クライアント側で同期処理を行っているのか

そのとおりです。1度シグナリングサーバーを介してクライアント間の接続情報が渡ったら、その後はクライアント同士でアバター座標や音声を共有しており、サーバーは関与していません。

Q．自分が作った3dモデルにアニメーションを入れるにはどういう方法がおすすめか

Mixamoがおすすめです。自分で作った3DモデルをMixamoにアップロードし、UPLOAD CHARACTERという機能を使うことでアニメーションが作成され、ダウンロードできます。

Q．今日紹介したようなサイトに音はつけられるのか

効果音やBGMをつけることが可能です。

Q．メタバースの今後の活用例は？

セッションでも紹介した太陽系を模した空間など、実際には見れなかったり行けないような場所やものを、それぞれの大きさや距離感を表現できるような活用例があると思いますし、学びにもつながると思います。

Q．Mixamoは人以外の対象も扱えるか

現在は人体のみ、かつ、両手を広げたポーズなど骨格を入れやすい体型に限定されています。

Q．Apple Vision Proなどの台頭によるWebVR/ARの技術の未来は？

Apple Vision Proを購入したのであれば、リッチなネイティブアプリケーションが楽しめると思います。一方で、WebVR/ARの技術はこちらでも紹介したように社内のちょっとしたイベントで活用するなど、棲み分けがされていけば今後も活用されると考えています。

Q．既存のwebシステムに新機能としてメタバースを実装する最適な方法は？

A-FrameもしくはA-Frame内で使っている、中身はJavaScriptのthree.jsという技術を使って実装するのがよいかと思います。

Q．素材探しのコツは？

X（旧Twitter）で詳しい人をフォローして、発信される情報を参考にしています。

Q．ARが展開できるコンテンツの範囲は？

かなり幅広くコンテンツを展開できるのではないかと思っています。例えば目的地を設定しておき、着いたら知らせるタグが上がるなど。現実世界の建物や空間認識にARから情報を拡張する領域は、よりリッチになっていくと思っています。

NECソリューションイノベータ株式会社
https://www.nec-solutioninnovators.co.jp/

NECソリューションイノベータ株式会社の採用情報
https://www.nec-solutioninnovators.co.jp/career/