【Spoke】アプリ不要！WebだけでVR空間を作ろう！

はじめに

皆さんはMozilla Hubsをご存知でしょうか？
Firefoxを提供しているMozillaによって開発された、オープンソースのVR空間サービスです。
アプリ不要でWebのみでワールドの開発・参加が可能だったり、画面共有や画像ファイルの共有ができるなど、他のサービスではあまりみられない機能があるため、オンライン上の学会や会議などで利用されています。
また、ビジネス面でもさまざまに利用されており、Hubsを元にしたサービスもたくさんあります。

Hubsは様々なワールドが用意されており、そこからお気に入りのワールドを使用することができるのは魅力の一つですが、自分のオリジナルの空間を作ろうと思っても解説記事が少なく、なかなかハードルが高いのが実情です。

そこで今回はHubsのワールドを作成するために使われる「Spoke」というオンラインエディタを使用して簡単なワールドを作成してみます。

Hubsの特徴と、Spokeの開発ステップ

Hubsの特徴

Hubsの得意なこと、苦手なことはなんでしょうか。簡単にまとめてみました。

得意なこと

• 小規模（推奨人数は25人以内）での発表会や会議などの開催
• 動画や画面を空間にいる人に共有すること
• PC、スマートフォン、VRヘッドセットなどの使用端末を問わないこと
• Sketchfab（3Dモデルの共有サイト）からモデルを拝借してワールドに配置すること

苦手なこと

• 精密な3Dモデルを使用したリッチな表現
• インタラクティブ性のあること（ゲームなど）

Spokeの開発ステップ

また、本記事では下記の順番で解説していきます。
実際の作成では2~4 を行き来して、見え方や大きさを把握しつつ、納得のいくワールドを作成することになると思います。

ステップ1：Spokeの準備

メールアドレスの登録

※メールアドレスを登録しなくてもワールドの作成自体は可能です。今回は継続的に利用することも考え、アドレスを登録します。

メールアドレスの登録に関しては複雑なことはなく、よくあるサービスと同じ流れです。
Spokeのページにアクセスし、右上のLoginを押します。

登録画面になりますので、メールアドレスを入力し、「Send Magic Link」を押すと、メールが届きます。

届いたメールのURLをクリックすれば、ログイン完了です。

テンプレートの選択

Projectsから、NewProjectを選択します。Hubsであらかじめ登録されているテンプレートを選択し改造しても良いですし、「New Empty Project」から自分で好きなようにワールドを作成することも可能です。

今回は一例として、「Outdoor Meetup」を使用します。

ステップ2： エディタで編集

エディタ概要

選択すると、画像のような画面が出てくると思います。UnityやSparkARを使ったことがある方はとっつきやすい画面かもしれません。簡単に役割を解説します。

• 赤枠：Hierarchy。ワールドに設定されているオブジェクトや機能が全て見ることができる場所です。
  「あのオブジェクトどこだっけ？」「このオブジェクトは何？」というときに使用します。
  画面では机が選択されていることがわかります。（青く囲われている）
• 緑枠：Properties。Hierarchyで選択されているオブジェクトのステータスを管理する場所です。
  Position（位置）、Rotation（回転）、Scale(大きさ)の他に、そのオブジェクト固有の機能やアニメーション、テクスチャなどを選択できます。
• 青枠：Assets。ここからモデルや機能を選択し、ワールドに配置します。

また、ワールド作成の流れは、下記のどちらかが主になります。

• Assetsからモデルを選択してワールドに配置→Propertiesでパラメータを調整
• 画面上またはHierarchyからモデルを選択→Propertiesでパラメータを調整

シーンを編集してみよう

今回選択したテンプレートは、少し近未来的な反面、緑がなく殺伐とした印象を持ちます。
そこで木を追加してみましょう。
Asssetsから、Sketchfab>Collections>Medival Fantasy Contest>MedivalCastle with Villageと選択していくと、TreeやLowplyForestがあります。

ここからTreeを選択し、ワールドに配置してみます。（ワールド上でクリックを押します。）

1つだと寂しいので、2つ追加します！ いい感じに緑になりました！
少し大きいなと感じたらHierarchyからTreeを選択して（通常、一番下にあります）Scale調整していきます。
こう言ったことを繰り返して理想のワールドを作っていきましょう。

主要なAssetsについて

Assetsを使うことによって、Spokeでできる表現の幅がぐっと広がります。
今回は主に使うElementsの機能と、3Dモデル共有サービスであるSketchfabにおける、Mozillaによって提供されているモデルについてご紹介します。

主要なElements解説

機能としては実にたくさんのものが用意されています。今回はここから、waypoint、image、audio、spawner、link、particle Emmiter、Media Frameを簡単にご紹介します。

waypoint

Edit画面上では白い人形で表現されています。先の画像で台にずらっと並んでいる白いものがそうです。

Hubs内でスペースキーを押すと、人型が出現するようになり、クリックするとその場所に飛ぶことができます。
Propatiesからパラーメタを選択でき、飛んだ後に、移動できるかどうかや、すでに人がいる場合にクリックできるかなどの調整が可能です。

また、waypointのスケールをいじると、クリックした時に巨大化したり、逆に小人になったりできます。
こちらの動画がイメージとしてわかりやすいです。

image

画像を表示します。デフォルトで用意されている画像はありませんが、ドラッグ&ドロップで手持ちの画像を追加することができます。
通常の画像に加え、背景透過pngやgifにも対応しています。

audio

BGMや音楽を流すことができます。デフォルトの状態では空間全体に流れるというより、設置した場所からの距離によって音が増します。またHubs上でも音の増減や再生・停止を行うことができます。

BGMはspoke内で提供されているものもあります。
Assets>Hubs Sound Packにて様々なシーンに合わせたBGMや雑音が用意されています。

Override Audio Seetingsについて

プロジェクト全体で設定されている音声設定を上書きし、固有の音声設定を実装することができます。
試しにチェックを入れてみると、項目が出現します。
複雑な項目が多く、すぐに把握することは難しいため試行錯誤を繰り返す必要があると思います。

各パラメータについてはこちらの記事が詳しいです。

Mozilla Hubsの音響とアバターTips – 夏のインターン完了報告書より

また、プロジェクト全体の設定はHierarchyの一番上にあるオブジェクトから行うことができます。
ここではAudioだけでなくユーザーの声の設定も可能です。

spawner

ここに設定したモデルはHubs内で持つことができます。自動で複製もされるので、なくなることはありません。
画像ではコップを複製しています。

link

リンクを設定することができる。Hfubs内でクリックするとページを開くか、参照したオブジェクトに飛びます。
オブジェクトを参照する場合は「#オブジェクト名」と書きます。（ただし、リンク内に半角スペースがあるとうまく機能しないようです。）

この画像の場合はWayPointを参照しています。

particle Emmiter

パーティクルを表示します。使い方はunityに近いため、そちらに慣れている人は迷うことはないでしょう。
パーティクルに使用する画像、粒子の量、大きさ、色など様々な項目を設定できます。

これを使うと、桜や雪を降らせたり、下からぼんやりと球を浮かび上がらせることができます。

Media Frame

Hubsには画像や画面を共有する機能がありますが、そのままだと自分の目の前に出るだけで、周囲の人からは見にくい状況になります。Media Frameに共有するものを持っていくと、枠に合わせて表示してくれるため見やすくなります。

今回使用したプロジェクトでもプロジェクター投影するようなイメージでMedia Frameが使われています。

Sketchfabについて

Spokeでは3Dモデルの共有サービスであるSketchfabに投稿されたモデルを利用することができます。
無数のモデルを流用できるのは非常にありがたい反面、大きなデメリットもあります。
Sketchfabで投稿されているモデルの多くは、HubsやSpokeに向けて作られた物ではないため、Spokeの推奨するサイズを大きく超えてしまうモデルも多数存在します。
モデルの重い/軽いなどの情報はProperiesの「gltf Info」よりみることができます。試しにTreeを見てみましょう。

Totalで10KBと書いてあります。非常に軽いですね！

Sketchfab内のCollectionsにカテゴライズされているものは、Hubsでも使用ができるような高クオリティかつサイズの小さいモデルが多くあります。

テンプレートに使われているようなモデルが多数登録されており、建物から小物まで一通り揃っています。
そのため、Spokeでワールドを作る際は背景や建物などの大部分をこのCollections内から流用し、よく見せたいものやメインのものを自作あるいはSketchfabから流用すると良いのではないでしょうか。

ステップ3：公開

ワールドができたら、いよいよ公開してみましょう！

画面右上にある「Publish to Hubs」をクリックします。

その後出てくる画面は何も触らず、「Save and Publish」を押します。（他の人がこのプロジェクトを流用できるかなどの設定です。）

ここで表示される画像が、OGPとして表示される画像になります。
ちなみに、この画像は「Scene Preview Camera」によって撮影されているものなので、納得いかないものであれば調整も可能です。

最後に、パフォーマンスチェックがあります。ここでワールドが重いのか、どこを修正すべきかみることができます！

試しに、Sketchfabから適当にモデルを追加すると下記のようになりました。

ポリゴン数や容量によってLow~Highの指標が出てきます。重いからと言ってリリースできないわけではありませんが、読み込みに時間がかかったり、端末によっては動作が重くなることが考えられますので、できるだけLowを目指しましょう。

画像右下の「Publich Scene」を押すと作業終了です！お疲れ様でした！

「View Your Scene」から実際にワールドに入るもよし、OKを押して作業に戻るもよしです。

少々分量の多い記事になってしまいましたが、最後までご覧いただきありがとうございました。
ワールド作成の一助になれば幸いです！

参考リンク

• Mozilla Hubs Cloudを使用した国産バーチャルSNSまとめ
  https://note.com/gugenkamikami/n/n51d573e8dce5
• Mozilla Hubsの音響とアバターTips – 夏のインターン完了報告書より
  https://labs.gree.jp/blog/2020/09/20816/
• VRSionUp!7-Spokeを使ったイベント設営TIPS
  https://www.slideshare.net/vrstudiolab/vrsionup7spoketips
• [字幕付き]Spoke入門⑥：Image、Media Frameなど
  https://www.youtube.com/watch?v=b8E-vHyQoZ0&t=430s
• Hubsドキュメント日本語訳
  https://github.com/gree/hubs-docs-jp
• Highlight: Putting Waypoints into a Hubs scene and testing them out together
  https://youtu.be/c7uG9eJGL3M