2022年3月25日

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

目次

  1. はじめに
  2. Hubsの特徴と、Spokeの開発ステップ
  3. ステップ1:Spokeの準備
  4. ステップ2:エディタで編集
  5. 主要なAssetsについて
  6. ステップ3:公開
  7. 参考リンク

はじめに

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

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

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

POINT!

  • Mozilla Hubs…アプリ不要で、Webで参加できるVR空間サービス
  • Spoke…Hubsの空間を作るためのオンラインエディタ

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

Hubsの特徴

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

得意なこと

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

苦手なこと

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

Spokeの開発ステップ

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

開発ステップ

  1. 1Spokeの準備(メールアドレスの登録とテンプレートの選択)
  2. 2エディタで編集
  3. 3公開
  4. 4部屋に入ってみよう!

ステップ1:Spokeの準備

メールアドレスの登録

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

メールアドレスの登録に関しては複雑なことはなく、よくあるサービスと同じ流れです。
Spokeのページにアクセスし、右上のLoginを押します。
スクリーンショット 2022-03-11 12.44.54.png (311.1 kB)
登録画面になりますので、メールアドレスを入力し、「Send Magic Link」を押すと、メールが届きます。
スクリーンショット 2022-03-11 12.59.13.png (24.4 kB)
届いたメールのURLをクリックすれば、ログイン完了です。

テンプレートの選択

Projectsから、NewProjectを選択します。Hubsであらかじめ登録されているテンプレートを選択し改造しても良いですし、「New Empty Project」から自分で好きなようにワールドを作成することも可能です。
スクリーンショット 2022-03-11 17.33.12.png (1.7 MB)

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

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

エディタ概要

選択すると、画像のような画面が出てくると思います。UnityやSparkARを使ったことがある方はとっつきやすい画面かもしれません。簡単に役割を解説します。
スクリーンショット 2022-03-11 18.03.25.png (3.2 MB)

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

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

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

シーンを編集してみよう

今回選択したテンプレートは、少し近未来的な反面、緑がなく殺伐とした印象を持ちます。
そこで木を追加してみましょう。
Asssetsから、Sketchfab>Collections>Medival Fantasy Contest>MedivalCastle with Villageと選択していくと、TreeやLowplyForestがあります。
スクリーンショット 2022-03-14 12.29.55.png (197.5 kB)
ここからTreeを選択し、ワールドに配置してみます。(ワールド上でクリックを押します。)
スクリーンショット 2022-03-14 12.34.55.png (894.2 kB)
1つだと寂しいので、2つ追加します! いい感じに緑になりました!
少し大きいなと感じたらHierarchyからTreeを選択して(通常、一番下にあります)Scale調整していきます。
こう言ったことを繰り返して理想のワールドを作っていきましょう。

主要なAssetsについて

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

主要なElements解説

機能としては実にたくさんのものが用意されています。今回はここから、waypoint、image、audio、spawner、link、particle Emmiter、Media Frameを簡単にご紹介します。
スクリーンショット 2022-03-14 12.47.47.png (79.9 kB)

waypoint

Edit画面上では白い人形で表現されています。先の画像で台にずらっと並んでいる白いものがそうです。
スクリーンショット 2022-03-14 12.34.55.png (894.2 kB)
Hubs内でスペースキーを押すと、人型が出現するようになり、クリックするとその場所に飛ぶことができます。
Propatiesからパラーメタを選択でき、飛んだ後に、移動できるかどうかや、すでに人がいる場合にクリックできるかなどの調整が可能です。
スクリーンショット 2022-03-14 12.54.31.jpg (167.2 kB)
また、waypointのスケールをいじると、クリックした時に巨大化したり、逆に小人になったりできます。
こちらの動画がイメージとしてわかりやすいです。

image

画像を表示します。デフォルトで用意されている画像はありませんが、ドラッグ&ドロップで手持ちの画像を追加することができます。
通常の画像に加え、背景透過pngやgifにも対応しています。
スクリーンショット 2022-03-14 14.42.36.png (76.0 kB)

audio

BGMや音楽を流すことができます。デフォルトの状態では空間全体に流れるというより、設置した場所からの距離によって音が増します。またHubs上でも音の増減や再生・停止を行うことができます。
スクリーンショット 2022-03-14 15.16.40.png (81.4 kB)

BGMはspoke内で提供されているものもあります。
Assets>Hubs Sound Packにて様々なシーンに合わせたBGMや雑音が用意されています。
スクリーンショット 2022-03-14 15.41.34.png (171.8 kB)

Override Audio Seetingsについて

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

スクリーンショット 2022-03-14 15.27.32.png (147.3 kB)

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

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

また、プロジェクト全体の設定はHierarchyの一番上にあるオブジェクトから行うことができます。
ここではAudioだけでなくユーザーの声の設定も可能です。
スクリーンショット 2022-03-14 15.43.15.png (181.3 kB)

spawner

ここに設定したモデルはHubs内で持つことができます。自動で複製もされるので、なくなることはありません。
画像ではコップを複製しています。
スクリーンショット 2022-03-15 14.51.17.png (172.3 kB)

スクリーンショット 2022-03-15 14.49.39.png (46.5 kB)

link

リンクを設定することができる。Hfubs内でクリックするとページを開くか、参照したオブジェクトに飛びます。
オブジェクトを参照する場合は「#オブジェクト名」と書きます。(ただし、リンク内に半角スペースがあるとうまく機能しないようです。)
スクリーンショット 2022-03-15 15.07.58.png (32.2 kB)
この画像の場合はWayPointを参照しています。

particle Emmiter

パーティクルを表示します。使い方はunityに近いため、そちらに慣れている人は迷うことはないでしょう。
パーティクルに使用する画像、粒子の量、大きさ、色など様々な項目を設定できます。
スクリーンショット 2022-03-15 15.12.03.png (134.0 kB)
これを使うと、桜や雪を降らせたり、下からぼんやりと球を浮かび上がらせることができます。
スクリーンショット 2022-03-15 16.11.36.png (643.8 kB)

Media Frame

Hubsには画像や画面を共有する機能がありますが、そのままだと自分の目の前に出るだけで、周囲の人からは見にくい状況になります。Media Frameに共有するものを持っていくと、枠に合わせて表示してくれるため見やすくなります。
スクリーンショット 2022-03-15 16.36.04.png (512.4 kB)
今回使用したプロジェクトでもプロジェクター投影するようなイメージでMedia Frameが使われています。

スクリーンショット 2022-03-15 16.37.14.png (37.8 kB)

Sketchfabについて

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

Sketchfab内のCollectionsにカテゴライズされているものは、Hubsでも使用ができるような高クオリティかつサイズの小さいモデルが多くあります。
スクリーンショット 2022-03-16 16.51.38.png (180.9 kB)
テンプレートに使われているようなモデルが多数登録されており、建物から小物まで一通り揃っています。
そのため、Spokeでワールドを作る際は背景や建物などの大部分をこのCollections内から流用し、よく見せたいものやメインのものを自作あるいはSketchfabから流用すると良いのではないでしょうか。

ステップ3:公開

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

画面右上にある「Publish to Hubs」をクリックします。
スクリーンショット 2022-03-16 17.00.25.png (15.1 kB)
その後出てくる画面は何も触らず、「Save and Publish」を押します。(他の人がこのプロジェクトを流用できるかなどの設定です。)
スクリーンショット 2022-03-16 17.04.38.png (160.9 kB)
ここで表示される画像が、OGPとして表示される画像になります。
ちなみに、この画像は「Scene Preview Camera」によって撮影されているものなので、納得いかないものであれば調整も可能です。

スクリーンショット 2022-03-16 17.29.58.png (660.5 kB)

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

試しに、Sketchfabから適当にモデルを追加すると下記のようになりました。
スクリーンショット 2022-03-16 17.23.04.png (99.8 kB)
ポリゴン数や容量によってLow~Highの指標が出てきます。重いからと言ってリリースできないわけではありませんが、読み込みに時間がかかったり、端末によっては動作が重くなることが考えられますので、できるだけLowを目指しましょう。

画像右下の「Publich Scene」を押すと作業終了です!お疲れ様でした!
スクリーンショット 2022-03-16 17.14.17.png (124.3 kB)
「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

WebAR/VRのお仕事に関するご相談

Bageleeの運営会社、palanではWebAR/VRに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

0

0

AUTHOR

nagao

SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRの企画・開発をやっています。森に住んでいます。

ゲスト bagelee

ゲスト bagelee

かっきー

かっきー

まりな

まりな

suzuki

suzuki

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

デザイナーをしています。 好きな食べ物はラーメンです。

kobari

taishi kobari

フロントエンドの開発を主に担当してます。Blitz.js好きです。

shogokubota

kubota shogo

サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!

nishi tomoya

aihara

aihara

グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。

nagao

SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

kainuma

Kainuma

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

sugimoto

sugimoto

asama

ando

iwasawa ayane

CONTACT PAGE TOP