今回はTilt Brushで描いたVRイラストなどをSTYLYに飾る方法を紹介します。 VRの知識や機材がなくても簡単にできるので是非やってみてください☺️
![00 - STYLY 完成イメージ](https://styly.cc/wp-content/uploads/2018/09/00.png)
完成イメージ
VRイラストの描き方は下記の記事をご覧ください。 →Tilt BrushでVRイラストを描いてみよう!【入門編】
Google Poly終了に関して(2021年3月19日追記)
この記事内ではTilt Brushで制作した3Dモデルのアップロードの方法を「Google Poly」を使用して説明しています。
しかし、Google Polyは2021年6月30日をもってサービスを終了します。
Google Polyを使用せず、STYLYへTilt Brushの3Dモデルをアップロードする方法は以下の記事を参考にしてください。
STYLYにユーザー登録
まず、PCのブラウザ(Chrome 推奨)でSTYLY(https://styly.cc/)へアクセスします。 中央の「CREATE YOUR VR SPACE FOR FREE」をクリックするとユーザー登録画面が表示されます。
![1_1 - STYLY STYLYトップページ](https://styly.cc/wp-content/uploads/2018/09/1_1.png)
STYLYトップページ
「User name」「Email Address」「Password」を入力し、「Sign up」をクリックしてユーザー登録してください。 既にユーザー登録している場合は、 左下の「Log in here」をクリックしてログインしてください。
![1_2 - STYLY ユーザー登録画面](https://styly.cc/wp-content/uploads/2018/09/1_2.png)
ユーザー登録画面
ユーザー登録して「Launch STYLY Editor」をクリックすると、STYLY Editorが起動します。
![1_2b - STYLY STYLY Editorを開く](https://styly.cc/wp-content/uploads/2018/09/1_2b.png)
STYLY Editorを開く
「Create Scene」タブを選択し、「Title」にシーン名を入力して「Create」をクリックします。
![1_3 - STYLY 新規シーンを作成](https://styly.cc/wp-content/uploads/2018/09/1_3.png)
新規シーンを作成
これでVR空間を作る準備が整いました。 STYLY Editorはそのまま開いておいてください。
![1_4 - STYLY 新規シーン作成完了](https://styly.cc/wp-content/uploads/2018/09/1_4.png)
新規シーン作成完了
Tilt BrushのVRイラストを飾る
VRイラストをSTYLYに読み込むために、まず「Google Poly」(以下、Poly)へアップロードします。 PolyはGoogle社が運営する無料の3Dオブジェクトライブラリです。
Polyにアップロード
Tilt Brushのパレットの下側にある「雲アイコン」(Upload)を選択するとアップロードされます。
![2.1_1 - STYLY VRイラストをPolyへアップロード](https://styly.cc/wp-content/uploads/2018/09/2.1_1.png)
VRイラストをPolyへアップロード
Tilt BrushにGmailアドレスでログインしていない場合は、PCにログイン画面が表示されます。 お使いのGmailアドレスでログインするとアップロードできるようになります。
作品の情報を設定
PCのブラウザでPoly(https://poly.google.com/)へアクセスして、画面左上のボタンをクリックします。
![2.2poly_1 - STYLY メニューを開く](https://styly.cc/wp-content/uploads/2018/09/2.2poly_1.png)
メニューを開く
左側のメニューから「アップロード済み」をクリックすると、先ほどアップロードしたVRイラストが表示さるのでクリックします。
![2.2poly_2 - STYLY アップロードしたVRイラストを表示](https://styly.cc/wp-content/uploads/2018/09/2.2poly_2.png)
アップロードしたVRイラストを表示
右上の「詳細を編集して公開」をクリックして、VRイラストの情報を設定します。
![2.2poly_3 - STYLY VRイラストの詳細情報を開く](https://styly.cc/wp-content/uploads/2018/09/2.2poly_3.png)
VRイラストの詳細情報を開く
設定したら右下の「公開」をクリックします。
![2.2poly_4 - STYLY VRイラストの情報を設定](https://styly.cc/wp-content/uploads/2018/09/2.2poly_4.png)
VRイラストの情報を設定
作品ページの「共有」をクリックして、作品のURLをコピーします。
![2.2poly_5 - STYLY VRイラストのURLをコピー](https://styly.cc/wp-content/uploads/2018/09/2.2poly_5.png)
VRイラストのURLをコピー
STYLY Editorに読み込む
再びSTYLY Editorを開きます。 まず、画面左上の「写真アイコン」(Assets)をクリックします。
![Assets - STYLY Assetsを選択](https://styly.cc/wp-content/uploads/2018/09/Assets.png)
Assetsを選択
次に「3D Model」をクリックします。
![Assets_3d - STYLY 3D Modelを選択](https://styly.cc/wp-content/uploads/2018/09/Assets_3d.png)
3D Modelを選択
「Poly 3D Models」タブを選択し、検索バーに先ほどコピーした作品のURL(作品のタイトルでも可)を貼り付けて「Search」をクリックします。
![2.3_1 - STYLY VRイラストを検索](https://styly.cc/wp-content/uploads/2018/09/2.3_1.png)
VRイラストを検索
アップロードしたVRイラストが表示されるのでクリックします。
![2.3_2 - STYLY VRイラストを選択](https://styly.cc/wp-content/uploads/2018/09/2.3_2.png)
VRイラストを選択
VRイラストがSTYLY Editorに読み込まれました。
![2.3_3 - STYLY VRイラスト配置完了](https://styly.cc/wp-content/uploads/2018/09/2.3_3.png)
VRイラスト読み込み完了
絵によっては地面に埋もれたり小さかったりするので、下記の説明を読みながら位置や大きさ、角度を調整してください。
移動・拡大縮小・回転
STYLY Editorに配置したもの(以下、アセット)の「移動、拡大縮小、回転」は、画面右端のボタンから行えます。
![2.4_0 - STYLY 画面右側のボタン](https://styly.cc/wp-content/uploads/2018/09/2.4_0.png)
画面右側のボタン
まず、配置を調整したいアセットをクリックして選択してください。 (画面左側のリストをクリックしても選択できます)
![2.4_4 - STYLY アセットを選択](https://styly.cc/wp-content/uploads/2018/09/2.4_4.jpg)
アセットを選択
移動
アセットを選択した状態で、画面右側のボタンを「move」にします。 移動させたい方向の矢印をドラッグして位置を調整します。
![2.4_1 - STYLY 移動(move)の操作方法](https://styly.cc/wp-content/uploads/2018/09/2.4_1.png)
移動(move)の操作方法
拡大縮小
アセットを選択した状態で、画面右端のボタンを「scale」にします。 拡大縮小したい方向のキューブをドラッグして大きさを調整します。 中央の白いキューブをドラッグすると比率を保ったまま拡大縮小できます。
![2.4_2 - STYLY 拡大縮小(scale)の操作方法](https://styly.cc/wp-content/uploads/2018/09/2.4_2.png)
拡大縮小(scale)の操作方法
回転
アセットを選択した状態で、画面右端のボタンを「rotate」にします。 球状の線を回転させたい方向にドラッグします。
![2.4_3 - STYLY 回転(rotate)の操作方法](https://styly.cc/wp-content/uploads/2018/09/2.4_3.png)
回転(rotate)の操作方法
これらの操作を上手く使ってアセットの配置を調整してください。 その他、STYLYの詳しい操作方法を学びたい方は、下記のチュートリアルをご覧ください。 →Scene作成・公開方法を学べるチュートリアル
3Dモデルを飾る
STYLYはVRイラストだけでなく、3Dモデルや2Dイラスト、動画を簡単に飾ることができます。 折角なので3Dモデルの「イーゼル」や「額縁」に2Dイラストや動画を飾ってみたいと思います。 まず、画面左上の「写真アイコン」(Assets)をクリックします。
![Assets - STYLY Assetsを選択](https://styly.cc/wp-content/uploads/2018/09/Assets.png)
Assetsを選択
次に「3D Model」をクリックします。
![Assets_3d - STYLY 3D Modelを選択](https://styly.cc/wp-content/uploads/2018/09/Assets_3d.png)
3D Modelを選択
「Poly 3D Models」からイーゼルを飾る
Polyで公開されている3Dモデルを簡単に読み込むことができます。 「Poly 3D Models」タブを選択し、検索バーに「easel」と入力して「Search」をクリックすると様々なイーゼルが表示されます。
![3.1_1 - STYLY Polyからイーゼルを検索](https://styly.cc/wp-content/uploads/2018/09/3.1_1.png)
Polyからイーゼルを検索
お好みのイーゼルをクリックすると配置されるので、VRイラストと被らないように位置などを調整します。
![3.1_2 - STYLY イーゼルの位置などを調整](https://styly.cc/wp-content/uploads/2018/09/3.1_2.png)
イーゼルの位置などを調整(Title: easel Author: yentc atmcdg URL: https://poly.google.com/view/52cDlIgLNvv)
「3DModels」から額縁を飾る
STYLYには自由に使える3Dモデルが豊富に用意されています。 「3D Models」タブを選択し、額縁(DecorationFrame)をクリックすると配置されます。
![3.2_1 - STYLY STYLYの豊富な3D素材](https://styly.cc/wp-content/uploads/2018/09/3.2_1.png)
STYLYの豊富な3D素材
額縁がVRイラストと被らないように位置などを調整します。 今回はイーゼルの反対側に配置しました。
![3.2_2 - STYLY 額縁の位置などを調整](https://styly.cc/wp-content/uploads/2018/09/3.2_2.png)
額縁の位置などを調整
画像を飾る
まず、画面左上の「写真アイコン」(Assets)をクリックします。
![Assets - STYLY Assetsを選択](https://styly.cc/wp-content/uploads/2018/09/Assets.png)
Assetsを選択
次に「image」をクリックします。
![Assets_img - STYLY Imageを選択](https://styly.cc/wp-content/uploads/2018/09/Assets_img.png)
Imageを選択
「Select」からアップロードする画像を選択して「Upload」をクリックします。 対応フォーマットはPNG 、JPEG、 GIF(アニメーションGIFも可)です。
![4_1_img - STYLY PCから画像をアップロード](https://styly.cc/wp-content/uploads/2018/09/4_1_img.png)
PCから画像をアップロード
次に画像の表示方法(Screen)を設定します。 今回は「Original Aspect Screen」を選択しました。
![4_3 - STYLY 画像の表示方法](https://styly.cc/wp-content/uploads/2018/09/4_3.png)
画像の表示方法
読み込んだ画像をイーゼルにのせるように配置します。
![4_2 - STYLY 画像の位置などを調整](https://styly.cc/wp-content/uploads/2018/09/4_2.png)
画像の位置などを調整
YouTube動画を飾る
まず、画面左上の「写真アイコン」(Assets)をクリックします。
![Assets - STYLY Assetsを選択](https://styly.cc/wp-content/uploads/2018/09/Assets.png)
Assetsを選択
次に「Video」をクリックします。
![Assets_video - STYLY Videoを選択](https://styly.cc/wp-content/uploads/2018/09/Assets_video.png)
Videoを選択
YouTube動画のURL(動画のタイトルでも可)をコピーして検索バーに貼り付け、「Search」をクリックします。
![5_1 - STYLY YouTube動画を読み込み](https://styly.cc/wp-content/uploads/2018/09/5_1.png)
YouTube動画を読み込み
動画の音声(Sound mode)は「音あり」(Nomal)「音なし」(Mute)を選べます。 動画の形(Regular Screens)は四角、球体、立方体など様々なスクリーンが用意されています。 今回は「16:9 Screen」を選択しました。
![5_2 - STYLY 配置する動画の設定](https://styly.cc/wp-content/uploads/2018/09/5_2.png)
配置する動画の設定
動画を額縁に収まるように配置します。
![5_3 - STYLY 動画の位置などを調整](https://styly.cc/wp-content/uploads/2018/09/5_3.png)
動画の位置などを調整
空と地面を変更
空と地面をシーンの世界観にあわせて変更します。 まず、画面左上の「写真アイコン」(Assets)をクリックします。
![Assets - STYLY Assetsを選択](https://styly.cc/wp-content/uploads/2018/09/Assets.png)
Assetsを選択
次に「3D Model」をクリックします。
![Assets_3d - STYLY 3D Modelを選択](https://styly.cc/wp-content/uploads/2018/09/Assets_3d.png)
3D Modelを選択
「Sky and Grounds」タブを選択し、シーンに合う地面や空を選びましょう。
![6_1 - STYLY 空と地面の設定](https://styly.cc/wp-content/uploads/2018/09/6_1.png)
空と地面の設定
公開・シェア
最後に、全体のバランスを見ながら各アセットの配置を調整します。 VR HMDをお持ちの方は、SteamでSTYLYをダウンロードして確認してみましょう。 STYLYを起動すると「My Scenes」に作成中のシーンが表示されるのでクリックします。 作品が読み込まれてVR HMDで確認できるので、気になる所をSTYLY Editorで調整してください。
![7_4 - STYLY 作品をVR HMDで確認](https://styly.cc/wp-content/uploads/2018/09/7_4.png)
作品をVR HMDで確認
シーンが完成したら公開(Publish)しましょう。 まず、画面左上の「地球アイコン」(Publish)をクリックします。
![7_1 - STYLY 作品を公開するボタン](https://styly.cc/wp-content/uploads/2018/09/7_1.png)
作品を公開するボタン
作品名(Title)と説明(Description)を入力して、右下の「地球アイコン」(Publish)をクリックすると公開されます。
![7_2 - STYLY 作品の情報を設定](https://styly.cc/wp-content/uploads/2018/09/7_2.png)
作品の情報を設定
公開されると作品ページが表示されるので、SNSアイコンからシェアしてみましょう。 STYLYの作品はVR HMDが無くてもブラウザで見られるので、ぜひ色々な人に見てもらってください。
![7_3 - STYLY 作品をSNSでシェアしよう](https://styly.cc/wp-content/uploads/2018/09/7_3.png)
SNSで作品をシェアしよう
今回はTilt Brushで描いたVRイラストなどをSTYLYに飾る方法を紹介させていただきました。 自分の作品がVRで間近に見られるのはとても楽しいですし、SNSでシェアすれば世界中の人に見てもらえます。 みなさんも是非STYLYでVR空間に作品を飾ってみてくださいね。