ブラウザからアクセスできるWebAR「hubs」を体験してみた（2/2）
こんにちは！
ＢＦＴ名古屋支店・インフラ女子（？）のやまぐちです。
前回から時間がたってしまいました。
今回はまだまだ触ってみたレベルを超えないhubsについて、シーンをWeb上でカスタマイズできる「Spoke」と、VRで使用できるアバターをこれまたWeb上で簡単に作成できる「Ready Player Me」を使ってみましたのでそのレポートをしたいと思います。
社内公募のためのイベントを開催
ところでＢＦＴでは２０２１年８月から社内公募が始まり、エンジニアの意思で希望する部署へ異動しやすくなりました。
現在ＢＦＴ名古屋支店は１４名。私自身も一年ほど前に異動してきた身ですが、今後もっとできることを増やすために中堅層を募集中です。とはいえ、地理的に離れた名古屋支店への異動は他の部署よりハードルが高いのでは？と思い、気軽に何でも聞ける場を作る目的でイベントを開催、そのための準備として「Spoke」を使ってみました。
シーンを「Spoke」でカスタマイズしてみる
使用するにはログインが必要です。ログインと言っても、メールアドレスを入れるくらいです（多分）。さすがMozillaさん、関連商品含めかなりハードルを下げてくれています。当然無料で使用できます。
ベースとなるシーンを選択し、手を加えていきます。ベースとして選択したシーンもすべてエレメントという部品で構成されており、サイズや場所などを変更することができます。
エレメントを選択すると青枠で囲われ、下図のようにXYZ軸が表示されます。軸は軸ごとの方向にドラッグすることで場所を変更できるようになっています。回転は上の図の中で右にある [ Properties ] - [ Rotation ] で調整です。これがまた難しい…。
用意されたシーンに飽きたらこうして少しカスタマイズして使うのがおもしろそうです。今回はブログのリンクを入室する場所の正面に設置し、ロビーから入れない人向けに中期経営計画の資料をみせるため、ロビーの場所を変更するだけにしました。
いきなり３D空間を作るよりは何となくイメージができたように思います。次は一から作ってみる…！多分！
アバターを「Ready Player Me」で作ってみた
hubsでは無料で用意されたアバターもあるのですが、自分のアバターも作ってみたくなり、探すと簡単にアバターを作れるサイトがあるようなのでチャレンジしてみました。
写真を撮って（結局似ていないものになる）顔のパーツ、髪型、服装などを選ぶとものの10分ほどで自分専用のアバターができあがります。hubsだけでなくVRChatや他の様々なVRプラットフォームで使えるようです。
しかしいざhubsで使おうとすると…
埋まってる！怖い！！ガン飛ばされてる！！！
当然ながら他の人を見ると
ものすごく見上げることに (;'∀')
そんな時はアバターを一段階大きくするコマンド「/grow」をチャットに打ち込みます。
二回打ち込んだら大きくなりすぎました…。
小さくなるコマンド「/shrink」が効かず巨人（しかもバストアップのみ）になってしまいました。埋まってると思ったけどそもそもバストアップでしか存在していなかったようです…。
理想は本人とわかるようなアバターを作って（それを使う使わないは自由として）VR空間で社員同士のコミュニケーションをとりたいんですけど…まだまだ時間はかかりそうです。
今回のイベントで使用するのは断念しました。
おまけ：イベントの様子
参加者は開催側も合わせて１０名！多くはPCのブラウザからです。
PCでの操作は簡単、キーボードだと矢印キー（またはWASDキー）で前後左右に移動、QやEで視点の回転ができます。
マウスだともっと簡単です。左クリックしながら画面を動かせば視点が変わり、スクロールすることで近づいたり遠ざかったりでき、とても直感的な操作が可能です。
一時間という短い時間でしたが、近づいたり離れたりして声の強弱が変わるのを体験したり、複数人で一緒に話をした時にちゃんと相手の言っていることを理解できるのかテストしてみたり、アバターを変えたりしました。
終わりに
今回はSpokeやReady Player MeというWeb上でhubsのシーンやアバターをカスタマイズできるツールを使って、VRを作るということを少し意識してイベントを開催してみました。
ちなみにCPUもメモリも高くなりますが重くて何もできないという状態ではありません。さすがWebのツール、PCスペックが低くても動きました。
＜ 動作確認したPCのスペック ＞
CPU：Intel(R) Core(TM) m3-7Y30 CPU @ 1.00GHz 1.61 GHz
メモリ：4.00 GB
次回はもう少しVR開発らしいものにチャレンジしてみたいと思います！
ここまで読んでいただきありがとうございました～ ^ ^
この記事が気に入ったらサポートをしてみませんか？