トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

「STYLY」ブラウザでVRを作る

STYLY

suite.styly.cc

VR空間を簡単に作れるwebサービス。ブラウザ上で動く。

f:id:bibinbaleo:20170807205007p:plain

www.moguravr.com

マニュアルページもある。日本語もあるしすごく丁寧

STYLY Manuals and Tutorials | Helping you to create the VR spaces you've always dreamed of!

作る

ホームページからstartを押してアカウントを作ったらすぐに開始。

こんな画面になる。

f:id:bibinbaleo:20170807194145p:plain

左上のAssetから空とか地面とかオブジェクトとかを選択し追加する。

f:id:bibinbaleo:20170807194141p:plain

するとこんな感じに配置される。

f:id:bibinbaleo:20170807194131p:plain

もちろんローカル環境から任意のモデルを持ってくることもできる。

f:id:bibinbaleo:20171007115514p:plain

できるんだけど、昔どうやってマテリアルまで読み込んだのか思い出せない

f:id:bibinbaleo:20171007120330p:plain

f:id:bibinbaleo:20171007115518p:plain

右側の3つのボタンのうち真ん中のやつで、オブジェクトの拡大・回転・位置移動を変えることができる。

f:id:bibinbaleo:20170807194545p:plain

水が綺麗。(追記:水なくなってる?)

f:id:bibinbaleo:20170807204630p:plain

フィルターをかけることもできます。

f:id:bibinbaleo:20170807210243p:plain

画像

画像は360度画像をアップロードすればスカイボックスみたいに表示できる。

f:id:bibinbaleo:20170807202851p:plainf:id:bibinbaleo:20170807202844p:plain

動画・音楽

動画はyoutubeから持ってくるのみ。360動画にも対応。すごーい

音楽はmp3をアップロードできる。もしくはsoundcloudから取ってくる。

音量は調節できないっぽい?

全体的に音がでかいので調整したいんだけどな〜

一時停止とかもない。

pdfを本に

pdfを入れて、矢印キーでページをめくれます。

f:id:bibinbaleo:20180203171132p:plain

配布

配置が終わったら左上のpublishから名前をつけてpublish.

open publish pageを押すとぐるぐるできる。

f:id:bibinbaleo:20170807194631p:plain

f:id:bibinbaleo:20170807201204p:plain

そのurlを配れば誰でもみれるのかな?

styly.world

VR

アプリをダウンロードしたら、作ったものがVRでもみれるっぽい。

store.steampowered.com

ブラウザから開いたらいろいろ選択肢が増えていた。

f:id:bibinbaleo:20180203170925p:plain

winMRはsteamからstylyを入れたら見れました。

f:id:bibinbaleo:20180203171303p:plain

コントローラーもちゃんと出る。

f:id:bibinbaleo:20180203171102p:plain

f:id:bibinbaleo:20170814105623p:plain

コントローラーで移動もできました。

Unityから直接アップロード

suite.styly.cc

unityaploaderというunitypackageが配布されていました。

Unity Plugin for STYLYという名前になって新しくなったそうです。

これを使うにはunityが5.6.3以前で、webGLMac&Windowsなどのビルドサポートも入っていないといけないくて、かつ3MB以内のものをアップローでできるそうです。

1. Requirements | STYLY Manuals and Tutorials

条件を満たした上での使い方としてはこれをunityに入れて、stylyのアカウントからAPIkeyをコピーして、

f:id:bibinbaleo:20170813172512p:plain

unityの上のとこに表示されているSTYLYからAsset Uploader Settingを選んでメアドとAPIkeyを入れて、

f:id:bibinbaleo:20170813172519p:plain

f:id:bibinbaleo:20171007112317p:plain

アップロードしたいプレハブを右クリックして一番下のSTYLYからアップロード。

f:id:bibinbaleo:20170813172700p:plain

でSTYLY側で取り込めるようになるそうです。

最後に

まさかこんなに簡単にできると思いませんでした。デフォルトのアセットが綺麗。

360度画像や動画に対応しているのもいいですね。

容量に上限があるみたいですが、今の所12.5MBで3.9%でした。300MBぐらい使える感じでしょうか??

ただ各オブジェクトの調整とかはできません。大きさ、位置、向きだけです。