====== 画像を取り込んでVCI(3Dモデル)に張り付ける ======

画像を取り込んでVCIで使用するまでの手順になります。

===== CGで扱う画像について =====

画像のサイズは **64,128,256,512,1024…といった2の二乗で正方形のサイズ** である事が望ましいです。\\
長方形やそれ以外の解像度でも使用可能ですが、上記のサイズであれば**縮小された際に比較的綺麗に縮小されます。**

一応、正方形でない比率の画像も使用する事は可能ですが、推奨ではありません。

===== 画像を準備する =====

{{:vci:sample:image:imageimport.jpg?direct&300|}}

上記の画像ではWindowsに最初からインストールされてる [[https://ja.wikipedia.org/wiki/Microsoft_Paint | ペイント]] を使って256ピクセルの画像を用意する例になります。\\
ペイントで任意の解像度の画像を作る場合、以下のように操作します。

  - 「サイズ変更」 をクリック
  - 「縦横比を維持する」のチェックを外す
  - 水平方向と垂直方向に任意の解像度を入力する

その後、[OK]を押し[ファイル]から[名前を付けて保存]を押して、保存先を選んで画像を保存してください。\\
今回のサンプルでは[ファイルの種類]を[PNG(.png)]にして保存してください。

画像を作成できるソフトでメジャーなものは下記のようなものがあります。\\
[[https://www.adobe.com/jp/products/photoshop/beginner.html | Photoshop]],[[https://www.clip-studio.com/clip_site/ | CLIPSTUDIO PAINT]],[[https://forest.watch.impress.co.jp/library/software/gimp/ | GIMP]]\\
画像を用意できるのであれば、どんなソフトを使っても問題ありません。

===== Unityに画像を取り込む =====

{{:vci:sample:image:imageimport2.jpg?direct&600|}}

書き出した画像はUnityのAssetフォルダへDrag&Dropすると取り込む事ができます。\\
今回はデフォルト設定のまま使用しますが、テクスチャの設定については[[https://docs.unity3d.com/ja/current/Manual/class-TextureImporter.html|テクスチャ(Unityドキュメント)]]から確認する事ができます。

===== マテリアル設定 =====

{{:vci:sample:image:creatematerial.jpg?direct&500|}}

画像を取り込んだらマテリアルを設定します。\\
マテリアルとは3Dモデルの材質の設定をまとめたものです。\\
全体の流れとしては…「画像をテクスチャとして取り込む→画像を設定したマテリアルを作成する→3Dモデルにマテリアルを適用する 」という流れで3Dに画像を張り付けてゆきます。

  - Assetsフォルダの中で右クリックを押す
  - メニューから[Create]を選択する
  - メニューから[Material]を選択し、クリックする
  - Materialの名前入力を行う

{{:vci:sample:image:materialsetting.jpg?direct&400|}}

  - Assetフォルダにある作成したマテリアルをクリックする
  - Inspectorから[Shader]を選択してドロップダウンを表示します
  - ドロップダウンから[Unlit]を選択します
  - メニューから[Texture]を選択します

※今回は**チュートリアルなので Unlit/Texture のShaderを使用しました**が、\\
　**VCIのパッケージをインポート済みの場合は VRM/UnlitTexture** のShaderに設定してください。

{{:vci:sample:image:materialsetting2.jpg?direct&500|}}

  - InspectorのTextureの設定項目にTextureをDrag&Dropします

===== 画像を張り付ける3Dモデルを作成する =====

{{:vci:sample:image:createquad.jpg?direct&400|}}

画像を張り付ける為の3Dを作成します。

  - hierarchyで右クリックを押してメニューを出します
  - [3D Object]を選択します
  - [Quad]を選択してクリックします
  - 四角形の3Dモデルが作成されます

===== 3Dモデルに画像を張り付ける =====

{{:vci:sample:image:3dmaterialsetting.jpg?direct&500|}}

既に作ってあるマテリアルを3DモデルへDrag&Dropします。\\
3Dの柄がテクスチャに変化すれば3DへTextureを張り付ける作業は完了です。

===== (補足)3Dモデルに画像を張り付ける仕組みについて =====

{{:vci:sample:image:3dmodeluv.jpg?direct&400|}}

3Dモデルには立体を表現するのに必要な**頂点の位置**の他に、様々な情報が付与されています。\\
その中の１つに**UVマップ**というものがあります。

UVマップとは、**3Dモデルにどの画像を張り付けるかを決める情報**です。\\
上記の画像では四隅の各頂点と、UVマップの対応を示したものです。UVマップを設定する事で画像のどの位置を3Dの面に張り付ければいいか判断できるようになるので、3Dに画像を張り付けられるようになります。\\
このUVマップを設定する作業を**UV展開**と呼んだりします。

つまり、UVマップが設定されてない3Dに画像(テクスチャ)を適用する事はできません。\\
今回は、Unityのプリミティブを使用しましたが、Unityのプリミティブは事前にUVが設定されているのでUVを設定しなくても画像を張り付ける事ができました。