VR Inside

VRの未来を創るビジネスメディア

STYLY Suiteで自分だけのVRシアターを作ろう!(2)〜YouTube動画の挿入からHTC Viveでの没入体験まで〜 - VR Inside

STYLY Suiteで自分だけのVRシアターを作ろう!(2)〜YouTube動画の挿入からHTC Viveでの没入体験まで〜

        2017/08/30

※本記事はiFashion Lab公式ブログの中からSTYLY Suiteに関連する技術記事を寄稿いただいております。

こんにちは。先日Googleが発表したBlocksにハマっているiFashion Lab VR担当です。Blocksで造形したデータはSTYLY Suiteにも取り込めるので、3DモデリングからVR実装までが驚くほど簡単な時代がきたなぁ、としみじみ...

さて、今回もSTYLY Suiteを使って30分でできるVRシアターの制作方法(続き)をご紹介します。

前回のおさらい

一つ前の記事では、アカウントの取得方法からVR空間に映画館を設置し、人型モデルを指標に自身が映画館にいるように高さを調整しました。

f:id:yonemoto-taiga:20170707162517p:plain

今回で学ぶこと

後編の本記事では、VRシアターのスクリーンにまだ何も映し出されていないので、そこにYouTube動画を貼り付けます。その際、YouTube動画の位置や表示サイズを変更します。最後はHTC Viveで実際に作った空間に入ってみます。

YouTube動画を挿入する手順

STYLY Suiteではシーン内に簡単なステップでお気に入りのYouTube動画を挿入することができます。

まず、自身がVRシアター内で観たいと思うYouTube動画のURLを準備しておいてください。準備ができたらSTYLYエディタ画面左上の「Assets」ボタン(↓)を押します。

f:id:yonemoto-taiga:20170709232446p:plain

続いて「Video」ボタン(↓)を押します。

f:id:yonemoto-taiga:20170709232815p:plain

「Youtube」という文字(↓)があるのでクリックします。

f:id:yonemoto-taiga:20170709233820p:plain

「Paste YouTube URL here」(↓)という空欄ボックスに再生したいYouTube動画のURLを貼り付けます。その後、「Insert video」ボタンを押します。

f:id:yonemoto-taiga:20170709234455p:plain

次に、Youtube再生時のフレームを選ぶ必要があります。基本的にYouTube動画は16:9比率ですので「Simple video frame 16×9」(↓)を選択するのがよいでしょう。

f:id:yonemoto-taiga:20170709234702p:plain

押すとエディタ画面に戻ってきます。画面中央に矢印ツール(↓)が確認できます。

f:id:yonemoto-taiga:20170710000109p:plain

このツールの緑色の矢印を上向きにドラッグして引っ張ってきます。そうすると先ほど入力したURLのYoutube動画が流れているフレーム(↓)が現れます。

f:id:yonemoto-taiga:20170710000230p:plain

これでYouTube動画の挿入が完了です。しかし、フレームが小さすぎますね。

動画フレームの位置、サイズの変更

次に、挿入したYouTube動画フレームの位置を変え、大きくする方法をみていきます。

この動画フレームが選択された状態で、キーボードのAltキー(Macの場合、optionキー)を押しつつ、マウス左ボタンをドラッグすると次のように動画フレームを起点にくるくると周囲を見ることができます(↓)。

f:id:yonemoto-taiga:20170710002649g:plain

こうしてみると、位置もサイズも調整できていないことがわかります。動画フレームをスクリーンに近づけるために矢印ツールの青い矢印を奥に向かってドラッグしてあげましょう(↓)。

f:id:yonemoto-taiga:20170710003921g:plain

できる限りシアターのスクリーンに動画フレームを近づけてあげます。そうすると、このフレームが非常に小さかったと気づきます。これを大きくするために、動画フレームを選択した状態でエディタ画面右側の「<>」ボタン(↓)を押してあげます。小さい表記ですが、最初は「move」になっていると思います。

f:id:yonemoto-taiga:20170710004523p:plain

今までの矢印ツールはこの「move」状態での移動機能でした。このボタンを一度押すと、下部の文字が「rotate」に切り替わります。

f:id:yonemoto-taiga:20170710004528p:plain

さらにもう一度押すと、下部の文字が「scale」に切り替わります。

f:id:yonemoto-taiga:20170710004520p:plain

ここの表記が「scale」になった状態であれば、動画フレーム上から出ているツールがこのように切り替わります(↓)。

f:id:yonemoto-taiga:20170710005727p:plain

「scale」は縮尺を意味し、この白い中央のボックスをドラッグしながら右に引っ張るとサイズが大きくなります。

f:id:yonemoto-taiga:20170710010340g:plain

move(移動)ツールとscale(縮尺)ツールをうまく活用しながら、微調整を加えてゆき、シアターの大型スクリーン一面にYouTube動画を貼り付けましょう(↓)。

f:id:yonemoto-taiga:20170710010838p:plain

おめでとうございます!これでセットは完了です!あなただけの映画館ができました!

YouTubeが流れない場合

現在の仕様ですと、YouTube動画は基本的に自動ループ再生されるはずですが、万が一何も再生されない場合、可能性として次の二点が予想されます:

⑴読み込みに時間がかかっている(インターネット環境、速度の影響 等)

⑵YouTube投稿者がアップした動画の再利用を許可していない

したがって、少し待ってみたり、もう一度動画挿入を試みてもうまくいかない場合は、権利関係の可能性があるため、残念ながら諦めなければなりません。

ちなみに、STYLY SuiteではYoutube以外にMP4動画を挿入することができますので、代わりに自分で作った動画をアップしてみるのもよいでしょう(参考サイト)。

HTC ViveにVRシアターに没入する

(*ここから先はHTC ViveとVR Ready PCを持っている方のみが対象となります。)

STYLY Suiteではウェブエディタ上で作ったVRシーンにHTC Viveで入り込むことができます。その機能を利用するためにまず専用のソフトウェアをダウンロードしなければなりません。

エディア画面上部の「Scenes」ボタン(↓)を押してください。

f:id:yonemoto-taiga:20170710012500p:plain

次の画面で「Back to Main page」(↓)をクリックします。

f:id:yonemoto-taiga:20170710013614p:plain

STYLYのメインページに戻りますので、「Get VR Client」(↓)をクリックします。

f:id:yonemoto-taiga:20170710013827p:plain

そうしますと、ZIPファイルが自動ダウンロードされます。(今日現在では「STYLY-VR-Client_v0.0.4.zip」というヴァージョンでした。)

f:id:yonemoto-taiga:20170710030946p:plain

これを開封してデスクトップに置きます。

f:id:yonemoto-taiga:20170710031024p:plain

開いて中を見てみましょう。「STYLY_VR.exe」というファイル(↓)がありますので、それをクリックします。

f:id:yonemoto-taiga:20170710031059p:plain

SteamVRが起動され、「STYLY_VR.exe」ファイルが読み込まれているのがわかります(↓)。

f:id:yonemoto-taiga:20170710031504p:plain

同時に、次のウィンドウ(↓)が開きますので、ご自身のSTYLY Suiteアカウント用のEメールとパスワードを打ち込みます。

f:id:yonemoto-taiga:20170710031208p:plain

そうしますと先ほどウェブエディタ上で作ったシーン名が表示されます。今回はリストから「VR Theater」を押します。これでシーンが起動します。

f:id:yonemoto-taiga:20170710031354p:plain

最後に、HTC ViveのHMDを装着すれば作ったVR空間に入り込むことができます(↓)。

f:id:yonemoto-taiga:20170710033623g:plain

本当に映画館の中にいるような気持ちになります!というわけで、これにてVRシアターの制作から体験まで終了です!お疲れ様でした!

※元記事:自分だけのVRシアターを作ろう!(2) 〜STYLY SuiteでVR制作 [第22回] 〜 - iFashion Lab公式ブログ ©edoga inc. All Rights Reserved

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

TwitterでVRInsideをフォローしよう!

iFashionLab

Writer: ファッションをイノベーティブに演出するラボチームです。東京・名古屋を中心にVRを活用した新しいブランドPR手法を開発・提案しています。iFashion Lab公式ブログ(http://blog.ifashion-lab.com/

技術開発関連の寄稿受け付けています VRに関する開発メモやブログ、関連記事の寄稿をしていただける方は以下のフォームよりご連絡ください。
技術開発記事の寄稿フォーム