NEWVIEW FEST 2021

2022.01.21(Fri.)~01.31(Sun.)
@SHIBUYA PARCO & VIRTUAL VENUE

XR作品体験、ライブ、トーク、ポップアップetc.XRカルチャーの最前線を発信
3次元空間での表現と体験のデザインを開拓するNEWVIEW初の複合型イベント

【Unity / Adobe Capture】身の回りの物をマテリアルにして使ってみよう

今回の記事ではAdobe Captureを使って写真からマテリアルを作成し、Unityで3Dモデルにアタッチして、シーンを制作する方法を紹介します。

マテリアルにしたい物を撮影するだけで良いので、非常に手軽にマテリアルを作れます。
シーンの制作に役立ちます。

Adobe Captureで作ったマテリアルを使ったシーン

Adobe Captureで作ったマテリアルを使ったシーン

サンプル

Adobe Captureで作成したマテリアルを使ったサンプル空間をSTYLY GALLERYから体験できます。
注意:こちらのシーンはWeb上では正しく反映されません。
VRアプリ上でのみ正しく動作します。

Adobe Captureとは

Adobe CaptureとはAdobe社が提供しているスマートフォンアプリの一つです。
写真からブラシやカラーテーマなどを作れます。

今回はCaptureの機能の1つであるマテリアル作成機能を使ってマテリアルを作り、Unityにインポートしてシーンを作ります。

Adobe Captureはこちらからダウンロードできます。(IOS・Android両対応)
https://www.adobe.com/jp/products/capture.html

写真を撮る

早速スマートフォンで写真を撮ってみましょう。
画面下の項目の「マテリアル」を選択し、撮影します。
中心に作成されるマテリアルのプレビューが表示されます。

撮影画面

撮影画面

中心上のアイコンからプレビューに使うマテリアルの形状を選択できます。

マテリアルの形状変更

マテリアルの形状変更

右上隅のアイコンからカメラにエフェクトを追加できます。
間接的にマテリアルにもエフェクトがかかることになります。

カメラエフェクトの変更

カメラエフェクトの変更

マテリアルを出力する

撮影ができたらマテリアルを編集する画面に切り替わります。
ここで微調整を加え、マテリアルを出力します。

マテリアルの調整画面

マテリアルの調整画面

調整タブではマテリアルの質感・ディテールの調整ができます。

  • 表面の粗さ
    マテリアルの表面の粗さを示しています。
    値を下げると粗さがなくなり、つるりとした質感になります。

  • ディテール
    マテリアルの表面に表示される画像のディテールを示しています。
    細かい模様がある場合などは値を上げることで質感を維持できます。

  • メタリック
    マテリアルの金属的な質感のレベルを示しています。
    値を上げると金属のようなテカりがマテリアルに生まれます。

  • エンボス
    マテリアルの凹凸のレベルを示しています。
    値は-100~100で表され、0に近いほど平らなマテリアルになります。

  • 線数
    マテリアルの表面の線数を示しています。
    値を上げるほど線数が増加し、細かく表示されます。

  • 繰り返し
    マテリアルの表面に画像を繰り返して表示できます。
    均等に模様を適用したい場合などに有用です。

  • エッジをブレンド
    マテリアルの色彩の境界をブレンドします。
    値を上げるほど色の変化がマイルドになります。

切り抜きタブでは作成に使う写真をトリミングできます。
マテリアルにしたい部分だけを切り抜くことで理想に近いマテリアルにできます。

マテリアルをプレビューしつつ設定し、完了したらマテリアルを保存しましょう。

マテリアルを保存

マテリアルを保存

Unityにインポートする

保存したマテリアルを開いてみましょう。
撮影画面右下のボタンからマテリアルの一覧画面に移れます。

マテリアルの一覧へ

マテリアルの一覧へ

 

マテリアル一覧画面

マテリアル一覧画面

作ったマテリアルをUnityにインポートします。
画像左下隅のマークからZip形式でマテリアルをエクスポートできます。

マテリアルを共有する

マテリアルを共有する

書き出し形式からマテリアルを選択し、共有方法を選択します。

書き出し形式を指定

書き出し形式を指定

ダウンロードしたらZipファイルを解凍してください。
解凍したファイル内にある、PNGファイルが4つ入っているフォルダをUnityにインポートします。

インポートするフォルダ

インポートするフォルダ

次にUnity内でPNGファイルを元にマテリアルを再現します。

Unityで新しくMaterialを作成します。
インスペクター内のMain Mapsの部分を編集します。

Main Mapsを設定する

Main Mapsを設定する

以下のように設定しましょう。
各項目の右にある小さな四角にテクスチャをドラッグ&ドロップすることで指定できます。

  • Albedoの部分にbasecolorのテクスチャを指定
  • Metallicの部分にmetallicのテクスチャを指定
  • Normal Mapの部分にnormalのテクスチャを指定
テクスチャを指定

テクスチャを指定

粗さのテクスチャは指定ができないため、Smoothnessの値を調整して粗さを整えます。

完成したマテリアルを3Dモデルにアタッチしてみましょう!

シーンを作る

では実際にCaptureで作ったマテリアルを使ってシーンを作成してみましょう

今回はマテリアルごとの違いがわかりやすいようにコーネルボックス(3DCGの品質チェックに使われる環境)のようなものを作り、その中で比較してみます。

今回作ったサンプルシーン

今回作ったサンプルシーン

このシーン内にあるマテリアルは、コルクボード・壁紙・机などの写真から作成されたものです。

今回のサンプルシーンは以下の記事の情報を元に、Global Ilumination(GI)を使ったシーンになっています。

Glを使うことでより美しくシーンを演出できます。
もし興味があればぜひご参照ください。

STYLYにアップロードする

今回はAdobe Captureを使って写真からマテリアルを作る方法を紹介しました。
Captureはカメラロールからもマテリアルを作れます。
外出先などでマテリアルにしたいものを見つけたら写真に撮り、シーン作成に役立ててみましょう。

実際に3DモデルをSTYLYにアップロードしてみましょう。

STYLYアカウントを作成する

アカウント作成方法

STYLYにアップロードする方法

UnityからSTYLYにアップロードする方法

newbview popup