読者です 読者をやめる 読者になる 読者になる

うさがにっき

読書感想文とプログラムのこと書いてきます

VR prototypeツール紹介

概要

VRにおけるprototypeツールを二つ紹介する

  • VR Prototyping Template
  • Sketch-to-VR

詳細

VR Prototyping Template

facebookから最近出たVRのPrototyping環境
facebook.design
technical-creator.com

使い方

TECHNICAL CREATORさんに書いてある通り、各々見ていってもよくわからないので説明にもくもく従う
1) Use the Sketch or Photoshop template to create the screen flow or several iterations of your design and export your files.
Sketchを使う、どのようなファイルを作ればいいかよくわからないのでデフォルトのものをexportする、Photoshopでも多分同じ
f:id:tiro105:20161221134933p:plain

2) Unzip Unity project and place your files in ‘Assets/StreamingAssets’ folder
UnityProjectを開く、先ほどエクスポートしたファイルを配置
ガンガンエラー出てるけどビルド出てるので無視
f:id:tiro105:20161221135114p:plain

3) Open the project in Unity 5.5 or above and click ‘Play’ to preview your prototype.
実行ボタン押下
先ほどSketchで作成したイメージがVR的に見るのが確認できる
youtu.be

こんな感じ
ちなみにGearVRにいれて実機確認しようとしたら、Unityのsplashまで確認できたが、それ以降はクラッシュして動かなかった・・・謎

Sketch-to-VR

VR Prototyping Templateを使おうとしていたら見つけた
こっちもいい感じ
GitHub - auxdesigner/Sketch-to-VR: Personal fun project - turn your mocks into VR

黙々と説明に従う

install
  1. Download Zip and Extract it. There’s a demo sketch file and a SketchToVR.sketchplugin.
  2. Double click on SketchToVR.sketchplugin. Sketch will install the plugin.

ダウンロードして、sketchpluginをinstall

使い方
  1. Open the demo Sketch file. The “background” artboard is a 360° photo. The “ui” artboard is the interface on top of the photo. In order to be seamless, the 360° photo you use should be equirectangular. There are some examples on Flickr. The one in my file is from Nick Hobgood.
  2. Go to Plugins > Sketch to VR > Export. The export may be slow due to the size of the 360° photo.

背景とUIを別々のartboardで管理
Sketch to VRのexportでexport
f:id:tiro105:20161221141755p:plain

VRの見かた
  1. The exported folder will be used to run A-Frame, an open-source Web VR library developed by MozVR. It needs a local server to work (simply opening the HTML page will not work). I recommend the SimpleHTTPServer by Scott Garner. Right click on the exported folder and choose SimpleHTTPServer. Use click & drag to navigate.
  2. To preview on your phone with a Cardboard, there are a few options. If you own a website, just upload this folder to your website and access the URL from your phone. Or you can use Chrome port forwarding to open localhost:8000 on your phone (initial page load may be slow due to the size of the 360° photo). Tap on the bottom right Cardboard icon to switch to VR mode!

MozVR使ってるからだと思うがexportしたものはFirefoxじゃないと見れない(Preview版とかならchromeでも見れるかも?)
あとCardboard(二眼)にするためにはいろいろやる必要あるけどやってない、見る限りそんな難しく無い

こんな感じになる
youtu.be

まとめ

インタラクティブなものはまだ難しいが360写真に対する見せ方や、メニューの出しかたなどに絞ればどのようにVRで見れるかprototypeできるようになってきた
どんどん進化していってほしい