Tilt Brushで描いたVRイラストをSTYLYに飾ってみよう！

今回はTilt Brushで描いたVRイラストなどをSTYLYに飾る方法を紹介します。 VRの知識や機材がなくても簡単にできるので是非やってみてください☺️

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」をクリックするとユーザー登録画面が表示されます。

「User name」「Email Address」「Password」を入力し、「Sign up」をクリックしてユーザー登録してください。 既にユーザー登録している場合は、 左下の「Log in here」をクリックしてログインしてください。

ユーザー登録して「Launch STYLY Editor」をクリックすると、STYLY Editorが起動します。

「Create Scene」タブを選択し、「Title」にシーン名を入力して「Create」をクリックします。

これでVR空間を作る準備が整いました。 STYLY Editorはそのまま開いておいてください。

Tilt BrushのVRイラストを飾る

VRイラストをSTYLYに読み込むために、まず「Google Poly」（以下、Poly）へアップロードします。 PolyはGoogle社が運営する無料の3Dオブジェクトライブラリです。

Polyにアップロード

Tilt Brushのパレットの下側にある「雲アイコン」(Upload)を選択するとアップロードされます。

Tilt BrushにGmailアドレスでログインしていない場合は、PCにログイン画面が表示されます。 お使いのGmailアドレスでログインするとアップロードできるようになります。

作品の情報を設定

PCのブラウザでPoly（https://poly.google.com/）へアクセスして、画面左上のボタンをクリックします。

左側のメニューから「アップロード済み」をクリックすると、先ほどアップロードしたVRイラストが表示さるのでクリックします。

右上の「詳細を編集して公開」をクリックして、VRイラストの情報を設定します。

設定したら右下の「公開」をクリックします。

作品ページの「共有」をクリックして、作品のURLをコピーします。

STYLY Editorに読み込む

再びSTYLY Editorを開きます。 まず、画面左上の「写真アイコン」（Assets）をクリックします。

次に「3D Model」をクリックします。

「Poly 3D Models」タブを選択し、検索バーに先ほどコピーした作品のURL（作品のタイトルでも可）を貼り付けて「Search」をクリックします。

アップロードしたVRイラストが表示されるのでクリックします。

VRイラストがSTYLY Editorに読み込まれました。

絵によっては地面に埋もれたり小さかったりするので、下記の説明を読みながら位置や大きさ、角度を調整してください。

移動・拡大縮小・回転

STYLY Editorに配置したもの（以下、アセット）の「移動、拡大縮小、回転」は、画面右端のボタンから行えます。

まず、配置を調整したいアセットをクリックして選択してください。 （画面左側のリストをクリックしても選択できます）

移動

アセットを選択した状態で、画面右側のボタンを「move」にします。 移動させたい方向の矢印をドラッグして位置を調整します。

拡大縮小

アセットを選択した状態で、画面右端のボタンを「scale」にします。 拡大縮小したい方向のキューブをドラッグして大きさを調整します。 中央の白いキューブをドラッグすると比率を保ったまま拡大縮小できます。

回転

アセットを選択した状態で、画面右端のボタンを「rotate」にします。 球状の線を回転させたい方向にドラッグします。

これらの操作を上手く使ってアセットの配置を調整してください。 その他、STYLYの詳しい操作方法を学びたい方は、下記のチュートリアルをご覧ください。 →Scene作成・公開方法を学べるチュートリアル

３Dモデルを飾る

STYLYはVRイラストだけでなく、３Dモデルや２Dイラスト、動画を簡単に飾ることができます。 折角なので3Dモデルの「イーゼル」や「額縁」に２Dイラストや動画を飾ってみたいと思います。 まず、画面左上の「写真アイコン」（Assets）をクリックします。

次に「3D Model」をクリックします。

「Poly 3D Models」からイーゼルを飾る

Polyで公開されている３Dモデルを簡単に読み込むことができます。 「Poly 3D Models」タブを選択し、検索バーに「easel」と入力して「Search」をクリックすると様々なイーゼルが表示されます。

お好みのイーゼルをクリックすると配置されるので、VRイラストと被らないように位置などを調整します。

「3DModels」から額縁を飾る

STYLYには自由に使える３Dモデルが豊富に用意されています。 「3D Models」タブを選択し、額縁(DecorationFrame)をクリックすると配置されます。

額縁がVRイラストと被らないように位置などを調整します。 今回はイーゼルの反対側に配置しました。

画像を飾る

まず、画面左上の「写真アイコン」（Assets）をクリックします。

次に「image」をクリックします。

「Select」からアップロードする画像を選択して「Upload」をクリックします。 対応フォーマットはPNG 、JPEG、 GIF（アニメーションGIFも可）です。

次に画像の表示方法（Screen）を設定します。 今回は「Original Aspect Screen」を選択しました。

読み込んだ画像をイーゼルにのせるように配置します。

YouTube動画を飾る

まず、画面左上の「写真アイコン」（Assets）をクリックします。

次に「Video」をクリックします。

YouTube動画のURL（動画のタイトルでも可）をコピーして検索バーに貼り付け、「Search」をクリックします。

動画の音声（Sound mode）は「音あり」(Nomal)「音なし」(Mute)を選べます。 動画の形（Regular Screens）は四角、球体、立方体など様々なスクリーンが用意されています。 今回は「16:9 Screen」を選択しました。

動画を額縁に収まるように配置します。

空と地面を変更

空と地面をシーンの世界観にあわせて変更します。 まず、画面左上の「写真アイコン」（Assets）をクリックします。

次に「3D Model」をクリックします。

「Sky and Grounds」タブを選択し、シーンに合う地面や空を選びましょう。

公開・シェア

最後に、全体のバランスを見ながら各アセットの配置を調整します。 VR HMDをお持ちの方は、SteamでSTYLYをダウンロードして確認してみましょう。 STYLYを起動すると「My Scenes」に作成中のシーンが表示されるのでクリックします。 作品が読み込まれてVR HMDで確認できるので、気になる所をSTYLY Editorで調整してください。

シーンが完成したら公開（Publish）しましょう。 まず、画面左上の「地球アイコン」(Publish)をクリックします。

作品名（Title）と説明(Description)を入力して、右下の「地球アイコン」(Publish)をクリックすると公開されます。

公開されると作品ページが表示されるので、SNSアイコンからシェアしてみましょう。 STYLYの作品はVR HMDが無くてもブラウザで見られるので、ぜひ色々な人に見てもらってください。

今回はTilt Brushで描いたVRイラストなどをSTYLYに飾る方法を紹介させていただきました。 自分の作品がVRで間近に見られるのはとても楽しいですし、SNSでシェアすれば世界中の人に見てもらえます。 みなさんも是非STYLYでVR空間に作品を飾ってみてくださいね。