CodeIQ MAGAZINECodeIQ MAGAZINE

WebVRと支える技術・コンテンツ作成入門ほか全セッションレポート──シン・WebVRとか文化祭

2017.02.17 Category:勉強会・イベント Tag: , , , , ,

  • 15
  • このエントリーをはてなブックマークに追加

html5j-Web プラットフォーム部のスピンアウト企画「シン・Web VRとか文化祭」が、1月14日に産業技術大学院大学で開催された。この日行われたMozilla Japanの清水智公氏の基調講演をはじめとする8本のセッションをレポートする。 by 馬場美由紀 (CodeIQ中の人)

基調講演を務めたのはMozillaの清水氏

基調講演に登壇したのは、Mozilla Japanの清水智公氏。講演タイトルは「WebVRとそれを支える技術」。

非営利団体Mozillaは、ブラウザベンダーの中でWebだけで勝負している唯一のベンダーである。Mozillaでも昨年より、ブラウザでVRを実現できるよう本格的にWebVRに取り組み、ようやく形になりつつある。

端末向けのVRコンテンツ流通の障壁はいろいろある。例えばプラットフォームに登録するときに審査があると、基準が変わってアップデートをしたくても審査がゲートキーパーの役割をしてしまうという問題も一つ。またユーザーがVRを再生するためのインストールをしなければならないという問題もあった。

そこで我々は、YouTubeで動画を見るような気軽さで楽しめるVRコンテンツを作りたいと考えたのである。だから、WebでVRという選択肢となった。というのもWebはエコシステムで、コンテンツを広げる仕組みを持っているからだ。

そこでW3CではWebVR APIの仕様についてディスカッションが行われている。WebVR APIは、ヘッドセットやセンサーの抽象化を行うAPI。Oculus RiftやHTC Viveなど異なるデバイスを抽象化して同じように扱えるようになるほか、120fpsでリフレッシュレートできるようにしたり、センサーの位置と向きを抽象化して撮れるようにするとか、着脱を検出するイベントも追加する。

WebVRにはこれ以外にも以下のようなAPIが必要となる。

GemepadAPI:Gamepadとコントローラーの状態を読み取るイベントを追加するためのコンポーネントである。出力関係で欠かせない

WebGL:3Dグラフィックの出力に必要。今はすべてのモダンブラウザに搭載されている。WebGLもバージョンが上がっており、今年の前半にはWebGL2が登場する。これはOpenGL3相当なので、OpenGL2で使えるシェーダーが使えるようになる。たとえばUnityであればGPU Instancingという同じモデルであれば一つのGPUで描けるようなシェーダーが使える。

WebAudioAPI:空間音響が使えるようになる。
このようなAPIを組み合わせてVRコンテンツを作る。APIについて詳しく知りたい場合は、こちらのサイトを参照してほしい。

WebVR APIを使うためにやるべきことの第一は、VRヘッドセットを取得すること。

そして次に、アニメーションループを記述すること。VRヘッドセットは120fpsで動くようにする。VRコンテンツは脳の動きと目から入ってくる情報にずれがあると酔うからだ。ブラウザは60fpsで描画されることを前提にしているため、120fpsにすることが求められる。

ヘッドセットの位置は、取得されたVRDisplayオブジェクトのgetPoseメソッドで取得できる。センサーの値は、関数を用いてワンショットで取るようになっている。これは酔いを防ぐことにつながるためである。

さらにWebらしくするために、次のバージョンではリンクを辿れるようになる。リンクをたどることで、HMDをかぶったまま、別のコンテンツへ移動できるようになる。ページの移動はwindow.location.hrefに移動先のURLを代入することで行える。

A-FrameでWebVRを開発する

開発環境の代表例はUnityだが、PLAYCANVAS、A-Frameがある。A-FrameはMozillaが提供しているフレームワークで、タグを書いていくだけでVRコンテンツが作れる。コンポーネントベースとなっており、a-entityというタグの中で、属性で振る舞いを増やしていく。

A-Frameはコンポーネントそのものも作ることができる。「AFRAM.registerComponet」というメソッドでコンポーネントを作成できる。またコミュニティでもコンポーネントを作っており、コンポーネントレジストリーで公開されている。

最近A-Frameでインスペクターを利用できるようになった。これを利用することで、コンテンツの調整や変更をグラフィカルに行える。インスペクターはページにインストールする必要なく、Ctrl + Alt + iを押せば起動する。

A-FrameはMozillaの他のプロジェクトと同じでオープンソースとなっている。公式サイトはarame.io。コードはGitHubで公開されている。

Slackもあるので、それに参加すると現在、どんなディスカッションがされているかもわかる。A-frameのサイトに行くと、今週面白かったプロジェクトなども紹介されている。

A-frameのサイトでいろいろ試してみよう!

WebVRの開発にチャレンジしよう

続いて登壇したのは比留間和也氏。セッションタイトルは「WebVRコンテンツ作成入門」。趣味でWebVRを作成するなど活動を行っている。

今回のゴールは「WebVRでコンテンツを作ってみよう」と思わせること。

昨年はVR元年と呼ばれ、さまざまなヘッドマウントディスプレイ(HMD)が発売された。では今後VRは流行るのか。中には今年はVR幻滅機期と言う人もいる。VRの成功・活性化はWebがカギだと考えている。

その理由はガチのVRに比べて、Webだと少しだけ使うことができる(ちょこっとVR)。例えばすでに海外のサイトだと、ECサイトの商品紹介をVRにする、というような使われ方をしている。

さらには「経験」を検索して体験できるようにすることも検討されている。例えばグーグルでは検索結果を文字や写真、動画などのカテゴリニーに分けて提示しているが、これにVRを追加するというようなことを検討されている。

「折紙 折り方 体験」と検索すると、実際に折紙を折るVRコンテンツが提示され、ユーザーはそれを追体験できるというようなことだ。さらに最近では、WebVRコンテンツ同士をハイパーリンクでつなぐという話も登場している。

このようにWebにもVR活用のネタはたくさんあり、むしろVRはWebでこそ生きるのではないかと考えられる。だからといって、WebVRとネイティブVRは対立関係にあるわけではない、補完関係にあると考えられる。

しかも簡単に作るためのフレームワークもいろいろ登場している。

WebVR Boilerplate:Three.jsを使ったことのある人はオススメ
A-Frame:基調講演を参照
Vizor:VR専門のエディター。手軽にコンテンツが作成できる

WebでVRといってもWebGLでレンダリングが基本となる。WebVR APIは姿勢の位置などを取得してきて表示させるところのみで、ほとんどの部分がWebGLのコンテンツとなっているからだ。

つまりWebVR APIの出番はあまり多くないというわけだ。VRコントローラーはGamepad APIを使う。

ここまで説明し、比留間氏はThree.jsを使ってライブコーディングを実施。コードについては公開されている資料を参照してほしい。コードを見ればわかるが、Three.jsの場合、VR関連の記述はプラグインで対応するコトになる。

VR化する処理は4行か5行のコードを追加するだけで、WebVRとして見ることができるようになる。

展示ルームではさまざまなデバイスでVRコンテンツのデモを実施

午後からは展示ルーム講談社のHopStepSing!新曲「kiss×kiss×kiss」(G-GEAR VIVE推奨PC)が体験できるTSUKUMOのデモや、HoloLenzの実機の展示およびKinectを使ったコンテンツなど、さまざまなデバイスを使ったデモを実施。

GMOクラウドによるVRコンテンツの制作・公開・分析を1ツアーたったの800円で実現するCMS「panocloud VR」の紹介や、ドスパラから機材を借りて、A-painterという3D空間で絵を描けるWebVRコンテンツのデモ(Mozilla / GALLERIA)などが行われた。


  • ライトセイバー体験/テレビ朝日メディアアプレックス
  • VRストリーミングシステム”SHINOBI”/ Nice+Day
  • VIVE体験デモ HopStepSing!新曲「kiss×kiss×kiss」/TSUKUMO
  • Fly to Kuma / コロプラ
  • HoloLens Zone /Microsoft MVP 前本さん、初音さん
  • MobileVR Zone /ソニックス 立花優人さん、html5j Webプラットフォーム部
  • Life Style VR/ソニックス 立花 優人さん
  • Tangoの実機の展示/html5j Webプラットフォーム部
  • panocloud VR / GMO クラウド
  • Mozilla WebVR デモ / GALLERIA

UnityでVRコンテンツを作成する

午後一番のセッションに登壇したのは、古波倉正隆氏。セッションタイトルは「Unity入門ガイド」。Unityを使ったことがないなどの初心者向けのセッションとなった。

Unityとはマルチプラットフォーム対応のゲームエンジンだ。3D/2Dゲームを制作することができ、さらにはVRコンテンツも製作が可能。Unityで作れば、すべてのプラットフォーム向けにゲームを出力できる。

元々は3Dをメインに作っていくゲームエンジンだったが、2年ぐらい前から2Dゲームの機能も強化している。ほとんどの機能が無料で開放されており、個人デベロッパーでもプロと同じ環境が使える。

Unityはゲーム制作だけではなく、Unity Adsによる広告埋め込み、Unity Cloud Build(コンパイルをサーバに任せる機能)なども、時間制限はあるが、無料ユーザーも使える。

Unityは3Dモデルのレンダリング機能や物理演算をサポートしている。Inspector上でAdd Componetを加えるだけでUnityの物理演算機能を使用することができる。

2Dゲームも作ることができ、2Dの物理演算もUnity側で用意している。

またUnity公式がUI機能をサポート(通称uGUI)しており、ボタンやスライダー、リストなどさまざまな機能を提供している。

アニメーション機能も提供しており、ステートマシンのように状態を一つ一つ作って、カウント1以上のときはこの状態に遷移するというのを画面一つで組み込むことができる。VR対応も容易にできる。

Edit->Project Settings->
  Player\>Virtual reality Supoortedにチェックを付けるだけでVR対応が完了。

ただ、各コントローラーを使用するには、プラグインを公式ページやAsett Storeからダウンロードする必要がある。

最後にUnity内のスクリプトのちょっとした話を。UnityではC#かJavaScriptでスクリプトを記述することができる。ただ、JavaScriptを触っている人が、UnityのJavaScriptを触ると「これJavaScript?」と違和感を覚えるとのこと。

できるならC#で書く方がオススメだ。作成したスクリプトを実行するには、そのスクリプトをAddComponetしたGameObjectをScene上に配置することで完了する。

スクリプトの基本的な関数である「Start」はScene上にGameObjectが配置されたときに一度だけ呼ばれ、「Update」は毎フレーム呼ばれる。

コードを書くときは、スクリプトリファレンスというUnityのページがあり、そこでイベント関数の実行順が紹介されているので、ぜひ、チェックしてほしい。

VRを作りたいと思っても、素材を持っていないというエンジニアも多い。そんな人も心配は無用だ。Unityにはアセットストアというサービスを用意している。

そこを訪ねれば3D画像や音源などが自由にダウンロードできる。

複数の異なるデバイスで一つのコンテンツをシェアして楽しむ世界を実現

続いて登壇したのは、一般社団法人T.M.C.N Microsoft MVPの前本知志氏。セッションタイトルは「ARもVRもMRもまとめてドーン!」。

TMCNはセンサーとデバイスに関するオープンなコミュニティ。Facebookページがあるので、ぜひ、見てほしいとのこと。

今日はきゃらみらーを紹介する。きゃらみらーはユニティちゃんと一緒に踊れ、抱っこだってできる、現実空間とCGのミックス、Kinectを使ったMixed Reality。

人とユニティちゃんと前後になったり、小さいユニティチャンを抱いたりするなど、当たり前のことが実現できている。

実現に必要だった考え方の第一は座標系を会わせること。これが非常に大切になる。Kinectで3D骨格情報(メートル単位。小数点1桁)を取得する。

それをUnityの座標系と対応させ、1Unity=1メートルと設定。VRコンテンツを作るときは物差しを合わせることが重要になる。

次にリアルとバーチャルのカメラをシンクロさせる(モノの位置を合わせる)。2つのカメラが世界に存在していると考える。Kinectのカメラ、UnityのCGを表示させるカメラもの位置、角度、視点を合わせる。

これは物差しが揃っている上に、同じところから見えているので、同じものが見えるようになるという考えからだ。そしてKinectのリアルカメラ映像とシンクロを取る。

ここでの三種の神器はメジャー、養生テープでマーキング、三角関数で計算する。実はこのアナログ部分が苦労したポイントでもある。

今回はアバターを使ったので、3Dモデルを操ることを行った。Kinectで取得した骨格情報をリアルタイムに3Dモデルのリグに反映した。

しかしこのままだとカメラ映像は常に後ろに表示されてしまう。そこでリアルとバーチャルの重なりを考慮することに。Kinectはモノの距離が取れる。

KinectのDepthとCGのZバッファGPUで高速に比較し、物体の前後関係を判定して表示する。そうするとどっちが前にあるか出してあげると、前にあるモノは前にあるし、後ろにあるモノは後ろにあるようになる。

GPU側での処理はUnityでShaderを書く。ただShadarにまともに送ると秒間30フレーム以下になるので、スムーズな体験ができない。

そこできゃらみらーでは、少々送るのがずれても体験とし気にならないものを見極め、メインメモリーからGPUへのデータ転送を数フレームにわたって分割したり、送る頻度を下げるなどのこの処理対象とするなど工夫している。

今回のタイトルに掲げた「まとめてドーン!」とは、AR・VR・MRデバイスにかかわらずマルチデバイスで、現実世界と重ね合わされた世界を同時に体験するために必要な考え方を表している。つまりデバイスにかかわらず、これは世界感をいかに作っていくかがこれから求められてくる。

通常のコンテンツは、各デバイスでVRアプリを起動するので固有のVR空間が創られる。各デバイスの関連はない。異なるデバイスで同じ世界をシェアするには、世界の絶対中心0を定義し、そこを中心とした基準座標系を定義する。

そして各デバイスは自世界のどこにいてどこを見ているかが分かるようにすることだ。しかしデバイスはそれぞれが原点0となり、それぞれの座標系で世界を見つめてしまっているのが課題だ。

ではどうやって解決するか。まずは基準座標系を定義することだ。床面にメジャーで測って原点0を定義する。そこから床面にはった赤マーク方向のベクトルが世界の前方と決める。

Kinectのカメラ映像からKinectが原点0に対し、3次元的にどの位置に配置され、どこを注視しているかを逆計算する(GPSの即位計算と似ている計算方法。算出にはカメラから最低3点への距離情報が必要になる)。

そうすると、カメラがどこから見ているかが決まる。これでKinectを使って世界の中心と座標系が決定できた。それに対して、他のデバイスを参加させる。他のデバイスに世界の中心と自分の位置を逆計算しながら、各コンテンツを表示する。

これまでは世界の中心はデバイスだったが、一つの世界をのぞくのぞき窓に役割を変えると、複数デバイスで同じ映像を見られるようになる。

試作したものも紹介。今後はHTC VIVEやOculus Riftなどを参加できるようにしていきたい。みんながそこに入ってこられるようになる。早い通信とサーバサイドレンダリングできたら、Webでもできないかなと考えている。

VRアプリが5分で作成。配信できるVRクラウドCMS「InstaVR」

午後の部3番目に登壇したのは、InstaVR代表取締役の芳賀洋行氏。セッションタイトルは「VRアプリを5分で作成・配信。世界140カ国、10000社採用のVRクラウドCMS InstaVR」。

10歳でプログラミングを始め、最初に触ったマシンはMSX。1999年にVRのプロジェクトを参加。2003年会津大学コンピュータ理工学部ソフトウェア科を卒業後、カナダのAlias wavefrontに入社。「Maya」アプリケーションエンジニアとして2004年アジアNo.1エンジニア賞受賞。米Autodeskに転職し、開発エンジニアとして働いた後、グリーに入社した。

グリーではスマホアプリを作ったり、CTO補佐なども経験。その後フリーのエンジニアとして、さまざまなアプリを開発。14年、2時間ぐらいでVRアプリを作って公開したところ、150万ダウンロードを達成。世界でダウンロード数トップ10に入った。

それがきっかけでVRアプリ完成させられない世界中の人から依頼されるようになった。しかし当時はSDKを手に入れるのにお金もかかるため、ギャラ的によかったドバイ案件に着手することに。しかしどんどん同じ様な案件が来るため、フレームワーク化を決意。そして開発したのが「InstaVR」である。

InstaVRは、約5分でVRアプリを作成・配信・分析ができるCMS。Webツールでインタラクションとかを追加していくだけでVRアプリが完成。ネイティブアプリにも変換できる。基本料は無料(プロ用は有料)。

すでに1万社で採用されている。ワシントンD.C.スミソニアン博物館やトヨタ、ルノーなどの自動車メーカー、HP、VMwareなどのトップITベンダー、ソニーピクチャーズ(映画会社)、米スタンフォード大学などはその一例だ。多言語、203カ国の決済に対応。365日24時間全世界サポート体制も構築している。

InstaVRは使い方も簡単だ。Webで登録することから始まる。ちなみに同ツールのフロントエンドはすべてAngularで開発しているとのこと。360度画像、360度動画に対応。またqMapにも対応した。

同ツールではベーシックなVRができることに特化している。例えば、窓の外に動画を埋め込んだりすることも、難しいことは何も考えなくても実現できる。使いたい動画があれば、ドラッグアンドドロップするだけ。今後もユーザーやクライアントのフィードバックをもとに機能拡張を図っていく。

絵がなくてもこんなに怖い!HoloLensの立体音響で実現するホラーゲーム

午後の部の4番目に登壇したのは、Microsoft MVP 初音玲氏。セッションタイトルは「絵心なくても大丈夫。Holoなホラーゲームの提案」。

VRコンテンツというとビジュアルの面が必要になるが、思い描いたモノを実装しようとするといろんな技術が必要になる。

今日はビジュアルを気にしなくてもゲームを作ろうという提案をする。今回使うデバイスはHoloLens。HoloLensは立体音響なので音でホラーを演出しようというわけだ。

開発環境は次の通り。

Windows10 64ビット EnterpriseかProのエディションが必要になる。これはHyper-Vの環境を使うためである。しかし実機があれば、特にHyper-Vは必要ない。CPUは4コア以上。Unityを使うと、レンダリングの時にパワーが必要なので、Corei7搭載が望ましい。

開発ツールはVisual Studio2015 Update 3を用意する。

エミュレータも記載しているが、特になくてもよいかもしれない。そしてUnity5.5。

Visual StudioとUnityの両方がなぜ必要か。VRアプリは基本Unityで作るが、デプロイはVisual Studioを使う。つまりUnityで作ったアプリをUWPでラッピングするのである。したがって、作成したアプリは普通にWindowsストアで配付ができる。

HoloLensのツールキットは便利なので、必ずインストールすること。このあたりの情報は日本語の情報もかなり充実してきており、今後、ハンズオンとか勉強会、ハッカソンなども増えてくると思われる。ぜひ参加してノウハウを貯めていってほしい。

●Holographicアプリの定型作業

  1. Unityを立ち上げて、[New]-[Create project]
  2. AssetsにHoloToolkit-UnityのAssetsをコピー
  3. Assets-HoloToolkitから
    ・Input-Prefabs-HoloLensCameraを配置
    ・SpatialMapping-Prefabs-SpatialMappingを配置
    ・Input-Prefabs-InputManagerを配置
  4. HoloToolkit-Configureメニューの下の
    ・Apply HoloLens Scene Settingsメニューをクリック
    ・Apply HoloLens Project Settingsメニューをクリック
    ・Apply HoloLens Capability Settingsメニューをクリック
  5. File-Build SettingsのBuildボタンをクリックする
    ・UWPフォルダに出力すると、UnityをラッピングしたUWPアプリが出力される

●Holographicアプリの疎動作確認

  1. 実機のSettings-Update & Security
    ・For Developers-Pairボタンクリック
    ・家の中でHoloLensを持ってうろうろすると家の中のデータがスキャンできる。
    ・1回スキャンすると毎回、スキャンしなくても同じWi-Fiをつなぐと、周囲360度のデータが入ってくる。
    ・使う場所ごとにWi-Fiの名前を変える。

  2. USB接続

  3. UWPフォルダの中にslnファイルを開く
    ・x86でデバイスにデプロイ
    ・PINにPairボタンクリックしたときのPIN入力

立体音響を操る方法の第一は空間音響を有効化することだ。

●有効化する方法。

  1. [Edit]-[Project Setting]-[Audio]-[Spatializer]
    ・[Spatializer Plugin]を「MS HRTF Spatializer」
  2. [GameObject]-[3D Object]-[Cube]を配置
  3. Cubeに
    ・[Add Component]で[Sound Source]を追加
    ・Audio ClipにWavファイル設定
    ・[Play On Awake]のチェックを外す
    ・[Spatialize]をチェック←2の手順で増えている項目
    ・[Spatial Blend]を「3D」
    ・[Volume Rolloff]を「Custom Rolloff」
    ・PlaySound.csを追加

立体音響の音源を用意することなく、普通の音源で実現できる。

続いて自分の周りの音が回るようにする。自分=HoloLens=Main Cameraとし、Main Cameraの周りを回転させるようにする。このとき、自分は移動することに注意する。毎回カメラ位置を取得するのである。

コードは次の通り。

var target = GameObject.Find("HoloLensCamera").transform;
var targetPos = target.position;
Vector3 axis = transform.TransformDirection(Vector3.up);
transform.RotateAround(targetPos, axis, Angle * Time.deltaTime);

ここまでできればあとはどうやってホラー演出をするかである。人が怖がる状況は次の2つに分かれる。

1.日常からの違和感

  • あるはずのものがない、ないはずのモノがある
  • いるはずの人がいない、いないはずの人がいる
  • 聞こえるはずの声が聞こえない
  • 聞こえないはずの声が聞こえる(簡単にできる)

2.逃げられない

  • 近づいてくる
  • 追ってくる
  • いつの間にか近くにいる

またエンターテイメントなので気持ちよく怖がらせなければならない。そこで考慮するのは

  • 期待を裏切らない
  • 怖さの予想曲線
  • 予想を裏切る
  • 静かに、そして大胆にたたみかける

作成したのは、

  • 最初は後ろの方でささやき声が聞こえる
  • 周りをまわる
  • 雰囲気が変わる
  • 耳元で何か急に…

というアプリ。

これらを実現する音源は、キーワード検索すると簡単に見つけることができる。あとはタイミングを計って、どの角度で、どの距離でどんなセリフを言うのか計算していくだけだ。

今回披露したアプリのプログラミングに要した時間は約4時間。それでも、十分、ホラーコンテンツが実現できた。

UI/UXの基本は極限まで引き算することだ。かつて昔のホラー映画は予算が潤沢ではなかったので、見せない形で恐怖を引き出している、その頃の映画を観ると参考にしてみることをオススメする。

立体音響機能を持つHoloLensは、ホラーに相性がよい。今年の夏はHoloLensでキャアキャア言わせてみよう。

「Hop Step Sing!」開発で気付いたキャラクターものVR実現の難しさ

5番目に登壇したのは、講談社 第四事業局キャラクターVRチームの松下友一氏。セッションタイトルは「キャラクターものVRをやるとここで悩みます『Hop Step Sing!』で考えたこと」 

今回は、半年間、キャラクターものVRに取り組む中で苦労したことを話す。「Hop Step Sing!」とは500年生きるアイドルを生み出す企画から始まった。

VRで楽しむミュージックビデオであり、Unityで作成したリアルタイムCGアニメーションである。スマホ配信版はレンダリングした360度動画。ViveRiftCV1、OSVSR2の3機種対応で、いずれSteamにも対応を予定している。

Playcanvasもいじり始めたため、WebVRでも何かやりたいと考えている。Windows Hodographicにも何か出す予定でやっている。VRの名の付くところには全部に出て行くキャラクターだ。

なぜ出版社がこのような取り組みをしているのか。講談社は100年以上前に講談を本にまとめるところから始まった会社で、これまでずっと文字やマンガで「愛されるキャラクター」を世に出す送り出す取り組みをしてきた。

講談社の歴史はキャラクターの居場所を作ってきた歴史でもある。新しい技術に対して新しい人気者を生み出してきた。新しい技術であるVRでも人気者を生み出したい。

しかしいきなり著名な作品をお借りすると、研究や試行錯誤がしにくい。そこで、自分たちでリスクを引き受けられる企画を作ろうと考えたのだ。これは表向きの理由で、裏側では単純にカワイイキャラクターに会いたかったから、VRに取り組んでいる。

課題もあった。キャラクターの存在感がインタラクションの邪魔をするのである。VRの醍醐味はインタラクションである。ではキャラクターとの最大のインタラクションとは何か。それはコミュニケーションである。

現状の技術で可能なのは、事前に作ったパターンを状況に応じて返す程度である。2Dなら成立するかも知れないが、これをVRでやると、人間のカタチをした圧倒的な存在感のキャラクターなのにプログラム通りの返答しか返さないので、興ざめしてしまうのである。

例えばMikulusは、「会話」とか「大きな動き」を制限すると同時に、プリセットのアニメーションを使わずプロシージャル(都度都度の演算)で小さな動きを出すことによってプレゼンスを出している。

だが私たちのキャラクターは快活で、好き嫌いがはっきりしていて状況を変革すべく自らから行動するというアイドル。コミュニケーションというインタラクションを実現するには、個性を表現できるAIの実現を待つしかない。

では今の技術でプロシージャルに動かせることを大前提としたVRキャラクターを作るにはどうするか。

その答えはインタラクションなしで成立するシチュエーションに置くこと。ライブの観客席のように、キャラクターとのコミュニケーションがなくても違和感のないシチュエーションを作るのである。

目線がちらりと送られるような、言われないと気がつかないようなプログラムも入れた。さらに、立体視が使える特性を生かして泡や花などいろいろ飛ばすと、驚きがあって飽きにくくなる。

しかし悩みもあった。表現が制限されるため、ストーリーテリングが作りにくいのである。普通の映像作品ようにカット割りやカメラワークが使えないからだ。

そこで参考にしたのがPPAP。PPAPを見れば分かるが、歌とダンスだけでコンテンツは戦える。そこにすべてを込めて他は捨てることにした。目指すは世界に通用したPPAPである。

2曲目の「kiss×kiss×kiss」(Vive版)では、空間音響を導入した。ユーザーが動いてもちゃんとキャラのいる方から声がするようにしたのである。

音による存在感にこだわればこだわるほど、体験の質が上がることがわかった。大変だったのは、音楽としてのバランスが崩れること。本来はCDのミックスを担当する音響エンジニアさんにCGスタジオまできてもらい、いろいろ調整した。これは頑張れば必ず解決できる問題だと考えている。

ディテールとの戦いもあった。VR演出手法は限られる。だからカメラ演出がなくても立っているだけで魅力的であることは必須。そして忘れてはならないのは、近さがキャラクターVRの醍醐味であるということ。そのため細かなディテールまで凝ることが必要になるのだ。そうすれば何度でも見たくなる。

そこで見るたびに発見がある衣装にしたが、これを実現するには処理能力との戦いが発生する。VRは通常の7倍の処理能力が必要になるからだ。

でき上がってからはVRコンテンツとして面白いことを認知させるために体験会に出しまくり、ひたすら「すごい」と言い続けることを行った。

我ら日本が戦うべきフィールドはキャラクター。ぜひ、日本をキャラクターVR大国にしよう。

トランスコスモスが展開するVRビジネスと心地よいVRのEXとは

本イベントの最後の登壇者は、トランスコスモスの平山智予氏。セッションタイトルは「VRのビジネス展開例とUI/UX作りの基礎知識」。

平山氏はトランスコスモスでアプリの開発、VRの企画、提案、開発に従事している。

またhtml5j Webプラットフォーム部、Tokyo Mobion Contorl Networkというコミュニティ活動も行っている。

トランスコスモスというと、コールセンターやBPOビジネスで有名だが、VR開発も多数手がけている。直近ではユナイテッドアローズ向けに新しい店舗の魅力を360度体験できるアプリの開発を行った。またVRの自社アプリもリリースしている。

現在、当社のVRビジネスでは、資料で説明するのではなく、ゴーグルを付けてコンテンツを見てもらうことから始めている。そうすると面白いねという話になるが、ビジネスにはなかなか結びつかない。それは次のようなハードルがあるからだ。

●費用面

  • 一般的なプロモーションに追加コストがかかる
  • 効果の予想ができない
  • 回収できる見込みが立てられない
      → 利益での回収は正直に難しいことも多い。VRをフックにしてほかのところでマネタイズするのも一案。

コンテンツの作成方法

  • 360度のコンテンツの作り方が予想できない
  • VRを使わないとできない企画が思いつかない

このようなハードルを乗り越えるために、当社ではパッケージ化してサービスを提供することにした。それが「360度・VRコンテンツスタートアップパッケージプラン」である。

各アプリストアへの登録作業もサポートしており、VRゴーグルのデザインサービスしている。また分析レポート(ヒートマップ分析)も提出する。どのポイントにどのくらい視点が滞在したのか、どうしてそこに人が集まったのか分析してレポートするのである。

もちろん、コスト面の問題を解消するよう、定額で試しやすい価格帯を実現している。

VRのUXで気をつけたいのは、ユーザーが不自然に思わないことである。VRコンテンツの最大の敵は酔いである。どんなに良いものを作っても酔ってしまうと二度と見たくなくなる。

ではどうすれば酔いを防げるか。

まずはフレームレート最低60~90fpsにすること。PC接続のHMDの場合はPCのスペックにより左右されるので注意してほしい。

次に傾きも大事である。静止画でも傾きがあるとベクション(視覚的な運動が観察者の身体の位置や方向に影響を与える)が起こるからだ。

また過剰な頭部運動に気をつけること。初めて見るコンテンツの場合、人は左右をあまり見ない。したがって360度をすべて見せる必要は無いのである。正面に見せたいモノを置いて、左右へ誘導展開する。

配置するものにもこだわりたい。視野は中心視野域と周辺視野域の2つに分かれる。中心視野域は静止物体の形状の把握(文字・記号を認識する)し、周辺視野域は物体の運動を知覚する(感覚・知覚能力に優れる。酔いを起こす)。

つまり中心視野域には情報を伝達する要素(コンテンツメニュー、テキスト)を置き、周辺視野域には空間の雰囲気の演出など、空間を伝達する要素を置くのである。こうすることで、不必要な頭部運動を軽減させることができる。

そこで今注目しているのはアイトラッキング(視線追跡)である。VRヘッドマウントディスプレイ「FOVE」に搭載されている機能だ。これであれば、頭部運動が軽減される。VRにおける視野追跡技術の今後に期待したい。

こうしてすべてのセッションは終了。VRについて学べる1日となった。日本でも開発者向けだが、HoloLensも発売された今年は、さらにVR関連は盛り上がっていくはず。関心のある人はぜひ、WebVRにチャレンジしてほしい。

関連情報

  • 15
  • このエントリーをはてなブックマークに追加

■関連記事

VRコンテンツはいかにして開発するか?「VR Tech Tokyo #5」でそのコツが解明された... VRアクティビティの企画作りにはゲーム制作経験が邪魔 VR関連の開発者向け勉強会「VR Tech Tokyo」。 第5回目となる今回は、土曜日の午後に開催。時間的にも余裕のある中で、セッションが開催され、また同セッションで紹介されたさまざまなVRがデモ展示された。 最初に登壇したのは、バンダ...
Adobe XD、Sketch、Prott、Origami Studio、ストーリーボード──自分に... 話題のプロトタイピングツールを紹介! 12月21日、日本マイクロソフト品川オフィスのセミナールームで、html5j Webプラットフォーム部「第15回勉強会」が開催された。今回のテーマは「プロトタイピングツール」。 Webアプリの開発において、プロジェクトメンバー、クライアントとの間で考えや意図...
ジーズアカデミー山崎大助氏、ヌーラボ林由子氏が「未経験からエンジニアを選択した理由」... 未経験からエンジニアへの転身した理由とは リクルートキャリア本社のセミナールームで開催された同イベントには、エンジニアという仕事に興味を持つ100人以上が参加。通常、エンジニア向けのイベントでは9割近くを男性が占めるが、今回のイベントは女性の割合も多く、2割を超していた。 第1部では、未経験...
WebVR・MRなど、最新のVRテクノロジーを体験できる「WebVRとか文化祭」はいいぞ!... WebVRを支える技術を紹介 html5jプラットフォーム部勉強会「WebにVRを求めるのは間違っているだろうか?」が大盛況に終わったことで、今回そのスピンアウト企画「Web VRとか文化祭」が11月23日に開催された。 最初に登壇したのはMozilla Japanの清水智公さん。清水さんはMo...
Google AppsとOffice365を使いこなすためのGoogle Apps Script・O... Google AppsとOffice365のそれぞれの強みを知ろう 今回の勉強会タイトルは、「Office真夏の最強ツール決定戦 O1 CLIMAX 14」。Office系アプリケーションの2強、Google AppsとOffice365のそれぞれの強みを知ろうというもの。 これはプロレスフ...
2016年はVR元年──これからはVR/AR/MRを活用したサービス・アプリ開発が主流になる!?... VRの普及で私たちの生活はどう変わるのか? 2016年はVR元年と言われているように、主要メーカーからヘッドマウントディスプレイが出そろい、また従来までのエンタメ分野だけではなく、産業への応用が期待されている。 VR技術は医療業界や建設・不動産業界、スポーツ業界などで採用され始めており、今後ます...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートグループサイトへ