iFashion Lab|ブログ公式|ファションとテクノロジーの融合

テクノロジーとファッションの融合を書いていきます。

Photoshopユーザー必見!PNGファイルを挿入して、VR空間を表現しよう!〜STYLY SuiteでVR制作 [第25回]〜

今回は、STYLY Suiteを使って10分でできる、PNGファイルの挿入だけでVR空間を作る方法をご紹介します。

完成イメージはこちら(↓)

http://styly.world/Shotay/70ecebb8-96d4-11e7-af2f-fb1a918a0060

PNGファイルからでもVR空間が作れる!

Photoshopユーザーの皆さん、VR空間を作るのは難しいと思っていませんか?

実はSTYLY SuiteにはPNGファイルをアップロードできる機能があり、簡単にVR空間を作ることができます。Photoshopから書き出したPNGファイルを挿入して、VR空間で表現してみましょう!

必要なもの

・PC(Mac / WindowsどちらでもOK)

Google Chrome(推奨ブラウザ 制作時)

Adobe Photoshop

 VR制作にはSTYLYを利用

今回もVR制作ツール「STYLY」を活用して制作していきます。

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

STYLYのUI説明や基礎機能(オブジェクトの移動、回転など)はこの記事では割愛します。もし確認したい方はSTYLYの公式チュートリアルか、前回私たちが書いた記事を覗いてみてください。

Photoshopで描いたものを挿入

まずPhotoshopで好きなものを描きます。筆者は絵心がないので、へのへのもへじを描きました(

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

 ファイル形式を.psdから.pngへ書き出して保存します(

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

STYLY Suiteのエディター画面へ移動し、「Assets」ボタンを押してください(

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

次に「Image / Gallery」を選択します(

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

Select」を選択します(

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

ファイルを選択して開くと、ファイル名が表示されるので「Upload」選択します(

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

ゲージが緑になったのを確認して、「Next」を押します(

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

次の画面では「Photo Flame (Original)」を選択します(

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

するとPhotoshopで描いたものが挿入されています。デフォルトの[Ground]と[Skybox]は消しておきましょう(

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

360度画像で空間を覆う色味を挿入

「Start Position」を中心に、空間全体を覆う色味をPhotoshopで作ります。筆者はカラフルなレインボーを作りました(

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

次も上記と同じ要領で進め、最後に「360 Sphere Image」を選択します

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

 天球画像になり、360度上下左右がレインボーに囲まれるようになりました

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

Photoshopで色を切り取り挿入

さらにPhotoshopで切り取ったカラーなどを作って、空間内に配置してみましょう(

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

 

筆者のオススメは、グラデーションカラーです(

 

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

色々なカタチで切り取ってみましょう(

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

 

最後に、自分で作った素材を空間内に挿入してみましょう(

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

いかかでしょうか。PNGファイルを配置したり、天球画像を重ねてみたりするだけでも、VR空間を作り表現することができました。

以上で、PNGファイルの挿入だけでVR空間を作る方法の解説は終了です。お疲れ様でした!

子供も楽しめる!VRサファリパークを作って、ハコスコで観賞しよう!〜STYLY SuiteでVR制作 [第24回]〜

今回は、STYLY Suiteを使って30分でできるVRサファリパークの制作方法から、ハコスコで観賞(二眼は対象年齢7歳以上)するまでをご紹介します。
完成イメージはこちら(↓)

子供も笑顔になる、わくわくサファリパークを作ろう!

「ウチの子供にもVRを体験させたい!でも、対象年齢が、、、」

HTC Viveなどにある対象年齢(13歳以上推奨)の問題。せっかくなら親子で一緒にVRを楽しみたいのに、諦めなければいけないのは悲しいですよね。

しかし、STYLY Suiteの豊富なアセットでVRサファリパークを作り、ハコスコ(二眼は対象年齢7歳以上)を使用すればVR体験ができます!

*ハコスコは単眼で使用した場合のみ、対象年齢が全年齢となります。

必要なもの

・PC(Mac / WindowsどちらでもOK)

Google Chrome(推奨ブラウザ 制作時)

スマホiOS / AndroidどちらでもOK)

・ハコスコ

 VR制作にはSTYLYを利用

今回もVR制作ツール「STYLY」を活用して制作していきます。

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

STYLYのUI説明や基礎機能(オブジェクトの移動、回転など)はこの記事では割愛します。もし確認したい方はSTYLYの公式チュートリアルか、前回私たちが書いた記事を覗いてみてください。

 

空、地面のアセットを挿入

では始めていきましょう!画面左上に3つ並んでいる黒いボタンのうち、真ん中にある「Assets」ボタンを押してください。

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

次の画面で「3D Model」を選択します(↓)

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

次の画面は3Dモデルの種類が分類されています。空のアセット「EpicSky」を選択します(↓)

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

次に下へスクロールし、地面のアセット「Grass」を選択します(↓)

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

元のエディタ画面に戻り、空と地面が挿入されてサバンナのような、広大な大地ができあがります(↓) 

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

動物の3Dモデルを挿入

同じ要領で今度は、「3D Models」を選択します(↓)

f:id:yonemoto-taiga:20170901152104p:plain下にスクロールしていくと様々な動物のアセットがあり、「Elephant」という名前の3Dモデルを選択してみます(↓)

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

元のSTYLYエディタ画面に戻り、「自分だけのVRシアターを作ろう!(1)」と同じ要領で好きな位置へ調整します(↓)

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

このような手順で楽しそうなVR空間をイメージしながら、好きな動物を好きな場所へ挿入していきましょう *3Dモデルの複製は「Shift + D」で可能です(↓)

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

草、木の3Dモデルを挿入

再び「3D Models」を選択します(↓)

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

下にスクロールして「TallTree」という名前の木の3Dモデルを選択してみます(↓)

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

元のSTYLYエディタ画面に戻り、調整したらこんな感じに(↓)

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

動物たちと同じ手順で様々な草、木の3Dモデルを挿入していけば、動物園よりも開放的なVRサファリパークの完成!(↓)

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

完成したら、最後はハコスコで覗いてみよう!

完成したら画面左上の「Publish」ボタンを選択します(↓)

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

次の画面では作ったVR空間の名前を変更可能です。OKなら真ん中の「Publish」を選択します(↓)

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

そうすると、「Open Published Page」が出てくるので選択します(↓)

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

そして、このVR空間のURLが発行されて360度デモページが実行されます(↓)

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

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

最後に、発行されたURLをスマホのブラウザで開き、「Enter VR」をタッチ。あとはハコスコにスマホを入れたら完了!*現状では静止画ですが、今後は動画再生も可能になるそうです(↓)

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

スマホを横すると画面が二眼に切り替わります。*スマホの画面回転をロックすれば、単眼で観ることもできます。(↓)

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

以上で、VRサファリパークの制作方法から、ハコスコで観賞するまでの解説は終了です。お疲れ様でした!

自分で音楽フェスをプロデュース、VR音楽フェスを作ろう! 〜STYLY SuiteでVR制作 [第23回] 〜

今回は、STYLY Suiteを使って30分でできるVR音楽フェスの制作方法をご紹介したいと思います。

好きなアーティストだらけなフェス空間を作ろう!

水曜日のカンパネラ東京スカパラダイスオーケストラのタイムテーブルが被ってる!泣」

フェスで好きなアーティストのタイムテーブルが被ってしまう問題。どっちも観たい!という欲望は叶わず、苦渋の二者択一をしなければいけないですよね。

しかし、VR空間であれば自分で選んだアーティストでフェス会場を作ることができます!

もちろん、アーティストが生演奏してくれるわけではありませんが、フェスの会場のビッグスクリーンで好きなアーティストを観ることができます。そんな誰もが持つわがままを叶える方法をお伝えしたいと思います。

 VR制作にはSTYLYを利用

今回もVR制作ツール「STYLY」を活用して制作していきます。STYLYのUI説明や基礎機能(オブジェクトの移動、回転など)はこの記事では割愛します。もし確認したい方はSTYLYの公式チュートリアルか、前回私たちが書いた記事を覗いてみてください。

ライブステージの3Dモデルを挿入

では始めていきましょう!画面左上に3つ並んでいる黒いボタンのうち、真ん中にある「Assets」ボタンを押してください。

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

次の画面で「3D Model」を選択します(↓)

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

次の画面は3Dモデルの種類が分類されています。空、地面、エフェクト、等々たくさんのアセットが入っています(↓)

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

次の画面は3Dモデルの選択画面です(↓)

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

下にスクロールしていくと「LiveStage」という名前の3Dモデルが見つかります。クリックしてみましょう(↓)

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

元のSTYLYエディタ画面に戻り、「自分だけのVRシアターを作ろう!(1)」と同じ要領で好きな位置へ調整します。ここではステージ上の特等席にセットしました(↓)

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

「Reset Position」の背面側にもライブステージを挿入します。手順は上記と同じで今度は、「RockFestivalStage」を選択、設置しました(↓)

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

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

YouTube動画をライブステージに挿入

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

STYLYエディタ画面左上の「Assets」ボタンを押します(↓)

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

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

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

「Search videos」の「Keyword」に好きなアーティスト名を入れて、「Search」を押します(↓)

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

検索結果が下方に列挙されるので、「Insert this video」を押します(↓)

*「Prohibited」は権利関係上、使用できないものとなっています。

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

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

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

「自分だけのVRシアターを作ろう!(2)」と同じ要領で位置やサイズを変更します。そして、先ほどセットした「LiveStage」に設置します(↓)

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

今度は「Reset Position」の背面側に配置した、「RockFestivalStage」にも上記と同じ手順でビデオフレームを挿入します(↓)

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

するといかがでしょう。頭上から見下ろすと、前方に水曜日のカンパネラのステージ、後方には東京スカパラダイスオーケストラのステージが完成(↓)

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

「空」と「地面」を挿入してみて、360度見回すとこんな感じに(↓)f:id:yonemoto-taiga:20170901204203g:plain

以上で、VR音楽フェスを作ろう!の解説は終了です。お疲れ様でした!

 

 

自分だけのVRシアターを作ろう!(2) 〜STYLY SuiteでVR制作 [第22回] 〜

こんにちは。先日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シアターを作ろう!(1) 〜STYLY SuiteでVR制作 [第21回] 〜

こんにちは。書いているブログの2%がなぜかロシアからのアクセスというiFashion LabのVR担当者です。 

今回はSTYLY Suiteを使って30分でできるVRシアターを制作方法をご紹介したいと思います。

自分だけの映画館を作ろう!

「自分だけの映画館が欲しい」

そんな夢を持ったことはないでしょうか。大きなスクリーンで好きなドラマや映画が見れたらいいですが、映画館は高くてなかなかいけないですよね。

しかし、VR空間であれば自分だけのシアターを作ることができます!そんな夢を叶える方法を2回に分けてお伝えしたいと思います。

必要なもの

・PC(Mac / WindowsどちらでもOK)

Google Chrome(推奨ブラウザ)

・マウス

・HTC Vive(VR体験をする際)

HTC Viveは最終的にVR体験をする際に必要ですが、VRシアターの制作ステップまでであれば必要ありません。

VR制作ツール「STYLY Suite」

今回はプログラミングが全くできない人も対象としているため「STYLY Suite」を活用します。

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

STYLY Suiteは誰でも簡単にVRを作ることができるVRクリエイティブツールです。

2017年8月1日、ついにSTYLY Suiteが正式リリース!

STYLY Suiteを初めて使う方はまずアカウント登録をしましょう。2017年8月1日に待望のSTYLY Suite正式版が発表されますので、ここではその開設方法を先取りしてお伝えします。

(*注:2017年7月現在はクローズドβ版で、そちらのアカウント登録方法はこちらをご参考ください)

アカウント登録の方法

まずこちらのURL(↓)にアクセス。

https://webeditor.styly.cc/

次の画面に進んだら「Sign up now」(↓)を選択しましょう。

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

登録ページで各種情報(↓)を埋めていきます。

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

・Screen Name:スクリーン名*

・Full Name:氏名

・Email Address:メールアドレス

・Company name (Optional):会社名(任意)

・Password:パスワード

・Password (Confirm):パスワード(確認用)

*一つ注意なのが、Screen Name(スクリーン名)です。これは制作したVRにURLとして割り当てられ、後々変更が効きません

記入が終わって「Sing up」を押すと次の画面(↓)が表示されます。

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

表示を確認したら、ご自身が登録したアドレスのメールボックスを開けてみてください。次のようなメール(↓)が届いていると思います。

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

英語で「このサービスを開始するにあたって、次のURLをクリックしてアカウントを有効化してください」とあります。

それでは、赤枠で囲まれた方のURLを押してみてください。

アカウントの設定終了

最後に、この画面(↓)が表示されればアカウント開設、有効化の完了です。

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

ちなみに有効化が失敗すると次のような画面(↓)が出ます。

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

その場合は次の原因を検討しもう一度プロセスをやり直すか、info@styly.ccまで連絡してみるのがよいでしょう:

・URLの期限が切れている

・元々使っていたブラウザと異なるブラウザで開いてしまった

シーンの作成

アカウントができたら実際にVRを作ってみましょう。

まずVR空間のことを「シーン」と呼びます。ログインしたら次のページ(↓)に遷移します。「Create Scene」を押して、入力ボックスに「VR Theater」と入力し「Create」ボタンを押します。

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

こちらの画面(↓)に移ります。これはSTYLYエディタといわれるVRを作るための画面です。

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

まだ何もありませんね。

映画館の3Dモデルを挿入

画面左上に3つ並んでいる黒いボタンのうち、真ん中にある「Assets」ボタンを押してください。

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

次の画面(↓)で「3D Model」を選択します。

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

次に現れる画面(↓)は3Dモデルの選択画面で、ここには初めから無料で使える3Dモデルがたくさん入っています。

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

下にスクロールしていくと「MovieTheater」という名前の3Dモデル(↓)が見つかります。クリックしてみましょう。

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

元のSTYLYエディタに戻ってくると、画面に赤い物体が見えます(↓)。

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

マウスのホイールをクリクリと回してみると画面が前方や後方に進みます。うまく前方に進めるとこの赤い物体が映画館の建物だということがわかるでしょう(↓)。

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

ちなみに、何か誤った操作を行ってしまったらCtrlキー(Mac: Controlキー)を押しながらZキーを押せば、一つ前の操作に戻ることができます。

映画館の高さを調整する

次に、画面右側にある目玉のマーク(↓)を押してみてください。

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

これを押すと画面が次のような高さに画面が推移します(↓)。

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

これは「reset position」といい「元の位置」に戻ることを意味します。ここでいう元の位置とは、自分がVRゴーグルをかぶった時に見える視界の位置を意味しています。マウスのホイールで視界を引いてあげると人型の青いワイヤー(↓)が現れます。

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

これはあなた自身で、この目線の高さから見える風景を意識しながら3Dモデルを配置しなければなりません。したがって、画面内にある映画館の高さを変えてあげないと映画館にいるように感じることができないのです。

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

3Dモデルが選択状態の場合、「MovieTheater」が黄色くなります(↓)。

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

そうすると画面中央に次の矢印の塊ようなもの(↓)が現れます。

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

これはこの映画館を上下・左右・前後ろに動かすためのツールです。

現状、映画館は自分の目線より高い位置にあるため、緑色の矢印を下方向に向かって引っ張ってあげます。その際、映画館の3Dモデルに近すぎるとあまり大きく動いてくれないので、少し引き気味の状態から引っ張ってあげるとグッと下がります(↓)。

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

「Reset Position」ボタンを押して高さを確認しながら、人型モデルの目線の位置が映画館にいるように見えたら調整完了です(↓)。

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

まるで始まる前の映画館に座っているようですね。

次回は動画をVR空間に挿入する方法を確認していきたいと思います。今日はここまで、お疲れ様でした。

「Price」と「Compare at price」の違い

shopifyでProduct登録をしているとわからない単語に出会います。

今回は「Price」と「Compare at price」の違いについてです。

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

Priceを10,000円、Compare at priceを15,000円としてみました。そうすると公開した商品ページでは次のように価格が現れます(↓)。

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

したがって、

・Price = 現在の価格

・Compare at price = 値下げ(or値上げ)前の価格

と考えれば良いでしょう。

VR空間で自己紹介をしてみよう!(2)〜STYLY SuiteでVR制作 [第20回] 〜

ついに本番当日となった『Women in VR/AR Japan』主催の女性限定VR開発ワークショップ!筆者はSTYLY Suiteの機能説明をする講師として参加予定です。

それでは前回に引き続き、VR空間で自己紹介をする方法をご紹介します。

⑶インスタグラムの写真挿入

さて、前回は仮想現 実子(かそうげん じつこ)さんは動物園のような空間を作りましたね。彼女はインスタグラムも大好きで、撮ってアップした写真も挿入してみることにしました。

f:id:yonemoto-taiga:20170617105904j:plain

それでは方法を見てましょう。まずは「Assets」ボタン(↓)を押します。

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

次に「Image / Gallery」(↓)を押します。

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

Instagram」タブ(↓)をクリック。

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

次のボタンを押します(↓)。

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

そうするとインスタの写真をはめ込むフレームレイアウト選択画面(↓)にいきます。

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

今回はスクロールして9枚用のフレームを選んでみました。9枚の写真がタイル状に出現しました(↓)。

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

Youtube動画の挿入

仮想現 実子(かそうげん じつこ)さんは映画を見るのが大好きで、その中でもミニオンズがお気に入りです。大きな画面でミニオンズを観たいな〜と思っています。

そこでYoutube動画をVR挿入してみることにしました。「Assets」ボタンを押します(↓)。

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

「Video」(↓)を押します。

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

次の画面に移ったら、「Youtube」タブ(↓)をクリックします。

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

Youtube挿入用の専門画面(↓)に切り替わります。

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

Youtube挿入には二つの方法があります。

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

①URL挿入

②キーワード検索

すでにお気に入りのYoutube動画のURLを持っている場合は①を、これから探す場合は②の方法をとります。今回は②の方法で、この画面からよいYoutube動画を探してみます。

 検索したいキーワードを入れたら、青いボタンを押しましょう(↓)。

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

一見何も変わって見えませんが、下にスクロールすると動画の候補が出現しています(↓)。

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

試しに観てから決めたい場合はPlay on Youtube(視聴ボタン)、決まったらInsert this video(挿入確定ボタン)を押しましょう(↓)。

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

フレームの挿入画面にきたら「16:9」型のフレームを選びましょう(↓)。

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

無事に空間内に動画が挿入、再生されました(↓)。

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

完成、あとはイマジネーション次第

というわけで、ざくっと完成しました(↓)。もはやワケがわかりませんが、こんな自分だけの自由なVR空間を作れるのがSTYLY Suiteの醍醐味です。

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

完成したら画面左上の「Publish」ボタン(↓)を押しましょう。

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

次の画面では作ったVR空間の名前を変更可能です。OKなら真ん中の「Publish」を押してください(↓)。

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

これで完成です。出来上がったら早速友達と見せ合いっこをしてみましょう!

そして、ここから先はみなさんのイマジネーションを最大限に生かして自分なりのコンテンツを作ってみてくださいね。それではお疲れ様でした!

 

VR空間で自己紹介をしてみよう!(1)〜STYLY SuiteでVR制作 [第19回] 〜

ついに米AppleがVR対応を発表し、VR業界もますます盛り上がりを見せはじめていますね。日本も負けじとVR熱が高まっていくと良いですね。

女性がVRを開発できるワークショップ開催

そんなVR熱を高める活動として2017年6月17日にWomen in VR/AR Japanが主催する女性限定VR開発体験ワークショップがあります。(今回iFashion Labは協力枠で携わらせていただきます。)

プログラミング初心者の女性を対象としており、HTC Nipponの西川美優氏、VRアーティスト せきぐちあいみ氏もゲストで登場するなど豪華なイベントになっています。

制作体験テーマはずばり「VR自己紹介」!もちろん制作ツールはおなじみのSTYLY Suite。そこで、どうすれば自己表現ができるのか書いてみたいと思います。

人物設定

今回は「仮想現 実子 [かそうげん じつこ] 」ちゃんという女性(なんか「假屋崎省吾」みたいなリズム、、、)を想定し、彼女の興味あるものをリストに並べてみました。

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

・晴れたきれいな草原に行きたい

・動物が大好き

・インスタに写真を貯めてる

・映画を観るならミニオン

技術的に分解すると、、、

実子ちゃんの趣味をVR技術的に置き換えていくと

⑴ 晴れたきれいな草原→空間と地表を作る

⑵ かわいい動物→プリセットの3Dモデル挿入

SNS→インスタ挿入

ミニオンズ→Youtube挿入

ビヨンセSoundCloud挿入

となります。

⑴空間と地面を作る

VR空間は最初「無」の状態にあります。まるで宇宙空間のような場所(↓)なんです。

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

ですからはまずはそこに空と地表にあたるものを作ってみましょう。画面内の「Assets」ボタンを押します(↓)。

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

次に「3D Model」を押します(↓)。

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

このような画面に移動します(↓)。

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

下にスクロールしてあげると空を連想させるイメージが並んでいるエリアがあります(↓)。

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

この中で自身のイメージに近い空を選んであげましょう。今回の実子さんは晴れた空がよいので右上の「Epic BigCloudsSoft」を選択しました(↓)。

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

次に地表を加えたいと思います。同じくAssets > 3D Modelsを選択し、次の画面をスクロールしていくとこんな床材だらけのエリアがあります(↓)。

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

草原をイメージさせる「Grass Ground」を選びました(↓)

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

 これでベースとなる空と地面が出来上がりです。

⑵動物のモデルを挿入する

実子ちゃんは大の動物好きです。この空間を動物園みたいにしたいなと思っています。

STYLYでは動物に限らず椅子や木などを「3Dモデル」と呼びます。これら3Dモデルを挿入する方法は空や地面を挿入する方法と全く同じです。「Assets」を押します(↓)。

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

「3Dモデル」を押します(↓)。

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

この画面をスクロールすると動物のエリアがあります(↓)。

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

この中から好きな動物を選んでみます。鹿を押すと空間に出現しました(↓)。(※動物の移動、回転、縮尺変更に関する方法はこちら

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

同じ方法でいろんな動物やついでに木を置いてみましょう(↓)。

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

動物園というかなんだかサファリパークみたいになってきました。。。気にせずいきましょう。

それでは次号はインスタ挿入、Youtube挿入、音楽挿入について解説していきます。

日本初「子供服×VR ヴァーチャル展示会」開催

VR展示会を開催します!

iFashion Labは6月6日から8日にかけて「子供服 × VR」をテーマにヴァーチャル展示会(↓)を開催しております。

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

子供服×VRで日本初の試み!

女の子向け日本製ブランド「toitoitoi」とコラボし、VR(ヴァーチャル・リアリティ)空間に子供服を展示します。

キッズファッションにおけるブランド訴求の未来体験が可能です。

開催概要

【日程】

6/6 10am~5pm

6/7 10am~5pm

6/8 10am~3pm

【参加費】

無料

【会場】

So-SPACE(Fルーム)

東京都渋谷区千駄ヶ谷3-16-3シルヴァキングダム

【運営】

iFashion Lab

【協力】

toitoitoi

ファッションVR制作における特徴

ブランドの世界観を伝えるヴァーチャル空間制作において次の技術を活用します:

 ・HTC Vive - 没入感の高いハイエンドVRデバイス

 ・STYLY Suite - VR実装をするための

 ・STYLY Scannerによる洋服の3次元データ取込み

最後に

お気軽に会場へお越しくださいませ。皆様にお会いできることを楽しみにしております。

事前の連絡や取材に関するお問い合わせはこちら(↓)

担当者Eメール(米本宛): info@ifashion-lab.com

Tilt Brushから書き出したFBXデータを挿入する〜STYLY SuiteでVR制作 [第18回] 〜

6/6~6/8にかけてVRの子供服展示会を開催することになり大忙しの筆者です。もちろんVRはSTYLY Suiteで実装予定です!

VRペイントツール「Tilt Brush」

さて、今回はVR空間でお絵かきをするツール「Tilt Brush」の活用法についてです。みなさんはTilt Brushを知っていますか?

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

これはGoogleが出したHTC ViveとOculus Rift専用ソフトで、VR空間でのお絵かきができます。

f:id:yonemoto-taiga:20170527004510j:plain

このソフトを使っていま世界中のクリエイターたちが近未来の3次元アートを生み出しています。

f:id:yonemoto-taiga:20170527004744j:plain

こんなゴッホ調の3次元クリエイターもSketchfabで見つけました(↓)。

なんとこのデータはダウンロードしSTYLY Suiteで利用可能のようです!(やり方はこちらの過去のブログをご参照ください↓)

作成データはFBXでエクスポート

では、なぜTilt Brushのお絵かきデータはSTYLY Suiteで利用可能かというと、Tilt Brushは制作した3次元ペイントデータをFBXファイルとして書き出すことができるからです。

筆者もTilt Brushでこんなドレスを創ってみました(↓)。

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

エクスポートの手順

Google公式のTilt Brushヘルプページ(英語)の手順に従いましょう(↓)。

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

1. 手元のToolパネルからMore > Labs > Export の順に選択

2. .fbxファイルがTilt Brush/exportsフォルダに保存される

これで簡単にエクスポートできました。

STYLY Suiteへの挿入

.fbxファイルが手に入ったら、あとはSTYLY Suiteにアップロードするだけです。アップ方法は以前ご紹介した.skpファイルと同じ手順です(↓)。

挿入が出来ました(↓)!でもちょっと違和感が、、、

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

試しにSketchfabから上記のゴッホ調データも挿入してみました(↓)。こちらはいい感じに!

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

なぜこんな違いが出てしまったのでしょうか。。。

書き出しは完全ではない?

現在のTilt Brushにおける.fbxエクスポート仕様では、VR内でペイントしたものが完璧にファイル変換できるわけではない場合があるようです。

仮説では、筆者はTilt Brushで制作中に桜の花びら感を出すために特殊なブラシを選択、利用していました。花びらに大小区別をつけたはずなのに、大きさが統一されて出力がされてしまっていました(↓)。

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

SketchfabにもSTYLY Suiteにアップロードしたデータと同じ.fbxファイルをアップ(↓)してみましたが似た症状でしたので、やはりエクスポート時点に起こっている問題のようです。

というわけで、Tilt Brush内からFBXファイルに書き出す予定がある場合はブラシ選択に気をつけたほうがよい可能性があります(私もこれから色々試して検証していきたいと思います)。
とはいえ、Tilt Brushは非常に面白いソフトなので、ぜひ使ってみてくださいね。 それでは今日はここまで。ありがとうございました。

Mayaで作ったデータをVRに入れる(2)〜STYLY SuiteでVR制作 [第17回] 〜

90年代のミリオンヒット集をBGMにしながら書いている筆者です。 今日よりエネルギッシュな輝きと切なさに満ち溢れた楽曲たちに驚かされます。

前回うまくいかなかったこと

さて、前回のブログではMayaでFBX書き出ししたデータをSTYLY Suiteに入れた結果、次の問題が発生しました:

⑴ 要らないデータが出現した

⑵ 目と鼻が消えてしまった

⑶ モデリングがカクカクしている

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

一つずつ解決策を考えていきましょう。

⑴ 要らないデータの出現

一見Hardware Renderer上では不要なデータ(↓)はないようです。

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

しかし、Outlinerを見直してみると要らないデータを非表示(Hide : Ctrl+H)にしていました。再表示(Unhide : Shift+H)したらVR空間に現れた不要データと同じものが出現しました(↓)。

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

したがってFBX書き出しする際には二つの手段が考えられます:

a. 不要なデータはすべて消してから書き出す

b. 選択したデータだけ書き出す

aの手法は単純にOutliner上から要らないデータを削除してから「File > Export All」をします。bでは書き出したいデータのみを選択した状態で「File > Export Selection」を押します(↓)。

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

⑵ 目と鼻が消えてしまった

消えた理由は簡単で目と鼻がNURBSで作成したままになっていたようです(↓)。

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

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

これをポリゴンに変換しましょう。「Modify > Convert > NURBS to Polygons」でポリゴンに変えることができました(↓)。

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

モデリングがカクカクしている

モデルの丸みはレンダラー(Viewport 2.0)上で3番キーを使用していましたが、FBXデータの書き出しには反映されないようです。そのため、ポリゴン数を増やすことで対応しましょう。「Mesh > Smooth □ 」でSmooth Optionsを開きます(↓)。

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

Expontential ControlsのDivision levelsを1から2に変更してApplyします(↓)。

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

ポリゴン数を増やすことで、1番キー状態でもきれいな曲線のモデリングができました(↓)。

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

丸みがあってキレイな出力

さて、こうしたプロセスを経ていつもの手順でアップしてみました(↓)。成功ですね!これで一安心です!

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

 ※3DデータをSTYLY Suiteにアップする方法は以前まとめたSKPファイルと同じなので割愛します。わからない方はこちらをご参照ください(↓)。

※STYLY Suiteの利用はこちらから(↓)

Mayaで作ったデータをVRに入れる(1)〜STYLY SuiteでVR制作 [第16回] 〜

香川照之さんの昆虫番組は好きだけど、虫が苦手な筆者です。春になって虫が増えビクっとする回数が増えました。

今回からは3DCGクリエイターさん向けに複数回にわたって記事を書きたいと思います。

3DCGモデラーがVRを造る時代

STYLY Suiteの登場によって3DCGモデラーがVRクリエイターになれる時代がきました。

これまではSTYLY Suiteの操作性や無料データの活用について書いてきましたが、外部で自身が作った3Dデータを取り込めばもっと豊かな表現が可能になります。

Mayaユーザー向け

今回の内容は特に3DCGソフト「Maya」のユーザーさん向けです。

f:id:yonemoto-taiga:20170519120820j:plain

かくいう私も普段Mayaを使い、こんな制作をしています(↓)。

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

一生懸命作ったモデリングデータですが、これをVRに生かすことはできないのでしょうか。もちろん、STYLY Suiteはそんな要望に答えてくれるVR制作ツールです!

FBXとOBJが対応

STYLY SuiteではMayaで書き出せるフォーマットは次の2つが対応しています:

・FBX

・Obj+Mtl+Jpeg

どちらもよく目にする中間フォーマットですが、私も普段Maya内のMAファイルで完結していたので特性を調べました。対比表を見つけたので引用(↓)します。

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

*The image is quoted from this article.

FBXはアニメーション、スケルトン(ジョイント)、シーン内の階層構造等の情報を保持したままデータの受け渡しができるようです。

一方、OBJはメッシュやマテリアル等3Dデータとして最低限の部分のみが受け渡されます。つまり、動かしたりしないデータであればOBJの方がシンプルなデータと言えるでしょう。

FBXで書き出してみた

今回はよりリッチなデータが格納できるFBX Exportした3DデータをVRに挿入してみます。Maya上で作ったモデルはこちら(↓)。

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

各パーツのモデリング、シェーダは以下の通り:

・目、鼻 - NURBS、Blinn

・それ以外 - Polygon、Lambert

これをFile > Export AllからFiles of Typesを「FBX Export」にして書き出してみました(↓)。

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

ちなみに、3DデータをSTYLY Suiteにアップする方法は以前まとめたSKPファイルと同じなので割愛します。わからない方はこちらをご参照ください(↓)。

気をつけることがそこそこある!

早速STYLY SuiteのVRエディタに挿入してみた結果、意図していたデータと異なって出現しました(↓)。

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

モデリングがカクカクしている

・要らないデータが出現した

・目と鼻が消えてしまった

・Lambertシェーダなのにハイライトが入った

といったズレが生まれています。これはデータ移行のクセを理解していく必要がありそうですね。次回はなぜこういったずれが生じたかを検証していきたいと思います。

エフェクトで雰囲気を変えてみる〜STYLY SuiteでVR制作 [第15回] 〜

STYLY SuiteでVR制作する上で特有の機能は「エフェクト」だと思います。空間の雰囲気をガラリと変えてしまう優れものです。

最近16種類までエフェクト機能が追加され、いろんな雰囲気を楽しめるようになったので一部を紹介します。(2017年5月17日現在)

VR空間を準備

まずVR空間に3Dモデルを設置します(↓)。

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

ちなみに、今回はプリセットの「Living Room」(↓)を用いています。

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

エフェクトをつける手順

エディタ画面左上の「Assets」(↓)をクリックします。

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

次に「3D Model」(↓)を選びます。

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

選択候補から「Effect」(↓)と書かれたカテゴリを探します。

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

様々な種類が見つかりますね(↓)。

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

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

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

試しに一番効果がわかりやすい「PostEffect DayTime Sketch」(↓)を押してみます。

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

画面が一面鉛筆のスケッチ画のように変化しました(↓)!

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

ボタンひとつでここまでガラッと雰囲気が変わってしまうのはすごい!

いろいろなエフェクト

他にも種類を試してみましょう。

・「PostEffect Night Hell」(↓)

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

暖かそうな部屋になりました(↓)

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

・「PostEffect DayTime Monochrome」

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

モノクロになりました(↓)

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

・「PostEffect Night Ghost」

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

寂しくて寒い感じになりました(↓)

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

・「PostEffect DayTime Psychedelic」

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

怪しい感じになりました(↓)

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

いかがでしょうか?それぞれ全く異なる部屋のようですね。みなさんもぜひ試してみてください。

Sketchfabから3Dモデルを取得する〜STYLY SuiteでVR制作 [第14回] 〜

前回まで2回にわたって3D Warehouseで無料データを入手(前半)し、それをアップしVR挿入する(後半)ところまでお話ししました。今回はもう一つオススメのフリーサイトをご紹介します。

3Dモデル界のYoutube「Sketchfab」

Sketchfabをご存知でしょうか?これはYoutubeの「3Dモデルデータ版」として世界中で認知されはじめたサービスです。

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

Youtubeでは誰かがアップした動画を視聴できますが、Sketchfabでは誰かがアップした3Dデータを見たり動かしたりできます(例 :押してぐりぐりしてみてください ↓ )。

これは埋め込み表示ですが、実際のサイトに飛ぶとこんな感じ(↓)です。

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

ちょっとYoutubeっぽい雰囲気ですね。

3Dデータの無料ダウンロードが可能

Sketchfabではアップした作者が承諾していれば3Dデータをダウンロードできます。ダウンロードできるデータにはこんな高精細なもの(↓)もありました。

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

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

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

ダウンロードまでの手順

ダウンロード出来るかは欲しいデータがダウンロード可能な設定になっている必要があります。ちなみに残念ながら先ほどの青い靴はダウンロードできません。代わりにダウンロード可能な靴(↓)を探してみました。

 

実際にこの靴のページに行ってみましょう。

f:id:yonemoto-taiga:20170512123013p:plain
見分け方は青い「DOWNLOAD」ボタンがあるかないかです。

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

このボタンを押すとダウンロード用画面(↓)が出ます(注:ログイン状態が求められるため、ログインか新規アカウント取得をしてください。)

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

今回はobj形式で1.8MBのファイル、「Commercial use is allowed」とありCreative Commons規約のもと商業利用もOKです(データ毎に内容が異なるので確認ください)。それでは青いボタン「DOWNLOAD」を押しましょう。自動的にダウンロードが始まるはずです。

効率的な探し方

欲しいと思ったファイルがダウンロードできないとショックが大きいので、初めから検索制限をかけることでダウンロード可能なファイルだけを表示させることができます。まずはトップ画面にある検索欄をクリックします(↓)。

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

検索専用の画面になるので「MODELS」タブをクリックし、その後現れる「Filters」をクリックします。

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

次に「Features」を押し、リストの中から「Downloadable」にチェックを入れます(↓)。

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

「Models / Downloadable」(↓)と出ればダウンロード可能な3Dモデルのみ表示される設定になっています。

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

あとは検索欄に好きな言葉を入れて欲しいファイルを探しましょう。

STYLY Suiteで対応しているフォーマット

 STYLY Suiteでは次のフォーマットファイルであれば3Dモデルとして取り込めます:

・SKP(2014/2015モデル)

・FBX

Blender

・Obj+Mtl+Jpeg

したがって、Sketchfabが上記のどれかであるかどうかご確認ください(違ったデータはここで脱落、ごめんなさい)。

STYLY Suiteへのアップロード方法

STYLY Suiteへのデータの取り込み方は前回ご紹介したskpファイルの手順と全く同じですのでこちら(↓)をご参照ください。

アップロード後の注意

最後に、アップロードできたデータもVR空間ですべて綺麗に使えるとは限りません。フォーマット、ファイルの構成、作られたソフトなど様々な要因でSTYLY Suite上でうまく出現しない場合があります。人様から無料で拝借したデータですので、使えたらラッキーくらいの心持ちがよいでしょう。

Sketchfabを詳しく知るには

ちなみに、Sketchfabについてさらに興味がある方はiFashion Labチームでまとめたスライド資料(↓)をご覧ください。

 

それではお疲れ様でした。ありがとうございました。 
 
※STYLY Suiteの利用はこちらから(↓)

リッチな無料3Dモデルを活用しよう(後半)〜STYLY SuiteでVR制作 [第13回] 〜

前回は3D Warehouseから無料の3Dデータを取得する方法をご紹介しました。後半の今回はそのVR空間挿入までを解説します。

STYLY Suiteはskpファイル対応

STYLY Suiteのエディタ画面から「Assets」(↓)を選択します。

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

「3D Model」(↓)を選択します。

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

3Dモデルの選択画面で「Upload」タブ(↓)を押します。

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

「Select」(↓)を押します。

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

読み込みたいskp拡張子のファイルを選択します(↓)。

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

画面が戻ってskpファイル名が現れているのを確認し、読み込んだファイルに新たに登録したい名前をつけ、「Upload」を押します(↓)。

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

ゲージが緑に変わると、下部のProcessing Statusにアップロード作業をしたskpファイルの情報が現れます(↓)。

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

Statusでアップロード状況を確認

通常3Dファイルは何〜何十MBもあるので、アップロードが完了するまで時間がかかります。ファイルが自由に利用できる状態かどうかは「Status(ステータス)」で確認します(↓)。

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

ステータスはこの2通りです:

・Uploaded - アップロード作業中(= まだVRへ挿入不可)

・Completed - アップロード作業が完了(= VRへ挿入可能)

アップロードには数十秒〜数分、データ量によっては数十分かかるので気長に待ちましょう。(その間、まだファイルを追加したい場合は「Upload another model」を押します。)

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

My ModelsからVR挿入

「My Models」タブから自身がアップロードした3DデータのVR空間挿入が可能です(↓)。

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

エッフェル塔が登場しました!!(↓)

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

以上でステップ終了です。お試しください。今日もお疲れ様でした。

PS. 混戦のフランス大統領選にちなんでエッフェル塔でやってみました。

 

※STYLY Suiteの利用はこちらから(↓)

suite.styly.cc