vci:sample:image:tutorial
差分
この文書の現在のバージョンと選択したバージョンの差分を表示します。
| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
|
vci:sample:image:tutorial [2019/09/24 20:46] oinari |
vci:sample:image:tutorial [2021/06/24 18:04] (現在) t-daihisa |
||
|---|---|---|---|
| ライン 1: | ライン 1: | ||
| ====== 画像を取り込んでVCI(3Dモデル)に張り付ける ====== | ====== 画像を取り込んでVCI(3Dモデル)に張り付ける ====== | ||
| - | 画像を取り込んでVCIで使用するまでの手順になります。\\ | + | 画像を取り込んでVCIで使用するまでの手順になります。 |
| - | + | ||
| - | ---- | + | |
| ===== CGで扱う画像について ===== | ===== CGで扱う画像について ===== | ||
| 画像のサイズは **64,128,256,512,1024…といった2の二乗で正方形のサイズ** である事が望ましいです。\\ | 画像のサイズは **64,128,256,512,1024…といった2の二乗で正方形のサイズ** である事が望ましいです。\\ | ||
| - | 長方形やそれ以外の解像度でも使用可能ですが、上記のサイズであれば**縮小された際に比較的綺麗に縮小されます。**\\ | + | 長方形やそれ以外の解像度でも使用可能ですが、上記のサイズであれば**縮小された際に比較的綺麗に縮小されます。** |
| - | \\ | + | |
| - | 一応、正方形でない比率の画像も使用する事は可能ですが、推奨ではありません。\\ | + | |
| - | ---- | + | 一応、正方形でない比率の画像も使用する事は可能ですが、推奨ではありません。 |
| ===== 画像を準備する ===== | ===== 画像を準備する ===== | ||
| - | {{:vci:sample:image:imageimport.jpg?direct&300|}}\\ | + | {{:vci:sample:image:imageimport.jpg?direct&300|}} |
| 上記の画像ではWindowsに最初からインストールされてる [[https://ja.wikipedia.org/wiki/Microsoft_Paint | ペイント]] を使って256ピクセルの画像を用意する例になります。\\ | 上記の画像ではWindowsに最初からインストールされてる [[https://ja.wikipedia.org/wiki/Microsoft_Paint | ペイント]] を使って256ピクセルの画像を用意する例になります。\\ | ||
| - | ペイントで任意の解像度の画像を作る場合、以下のように操作します。\\ | + | ペイントで任意の解像度の画像を作る場合、以下のように操作します。 |
| - 「サイズ変更」 をクリック | - 「サイズ変更」 をクリック | ||
| ライン 26: | ライン 22: | ||
| その後、[OK]を押し[ファイル]から[名前を付けて保存]を押して、保存先を選んで画像を保存してください。\\ | その後、[OK]を押し[ファイル]から[名前を付けて保存]を押して、保存先を選んで画像を保存してください。\\ | ||
| - | 今回のサンプルでは[ファイルの種類]を[PNG(.png)]にして保存してください。\\ | + | 今回のサンプルでは[ファイルの種類]を[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]]\\ | [[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に画像を取り込む ===== | ===== Unityに画像を取り込む ===== | ||
| - | {{:vci:sample:image:imageimport2.jpg?direct&600|}}\\ | + | {{:vci:sample:image:imageimport2.jpg?direct&600|}} |
| 書き出した画像はUnityのAssetフォルダへDrag&Dropすると取り込む事ができます。\\ | 書き出した画像はUnityのAssetフォルダへDrag&Dropすると取り込む事ができます。\\ | ||
| - | 今回はデフォルト設定のまま使用しますが、テクスチャの設定については[[https://docs.unity3d.com/ja/current/Manual/class-TextureImporter.html|テクスチャ(Unityドキュメント)]]から確認する事ができます。\\ | + | 今回はデフォルト設定のまま使用しますが、テクスチャの設定については[[https://docs.unity3d.com/ja/current/Manual/class-TextureImporter.html|テクスチャ(Unityドキュメント)]]から確認する事ができます。 |
| - | ---- | + | ===== マテリアル設定 ===== |
| - | ===== マテリアル設定 ===== | + | {{:vci:sample:image:creatematerial.jpg?direct&500|}} |
| - | {{:vci:sample:image:creatematerial.jpg?direct&500|}}\\ | ||
| 画像を取り込んだらマテリアルを設定します。\\ | 画像を取り込んだらマテリアルを設定します。\\ | ||
| マテリアルとは3Dモデルの材質の設定をまとめたものです。\\ | マテリアルとは3Dモデルの材質の設定をまとめたものです。\\ | ||
| - | 全体の流れとしては…「画像をテクスチャとして取り込む→画像を設定したマテリアルを作成する→3Dモデルにマテリアルを適用する 」という流れで3Dに画像を張り付けてゆきます。\\ | + | 全体の流れとしては…「画像をテクスチャとして取り込む→画像を設定したマテリアルを作成する→3Dモデルにマテリアルを適用する 」という流れで3Dに画像を張り付けてゆきます。 |
| - Assetsフォルダの中で右クリックを押す | - Assetsフォルダの中で右クリックを押す | ||
| ライン 55: | ライン 48: | ||
| - Materialの名前入力を行う | - Materialの名前入力を行う | ||
| - | {{:vci:sample:image:materialsetting.jpg?direct&400|}}\\ | + | {{:vci:sample:image:materialsetting.jpg?direct&400|}} |
| - Assetフォルダにある作成したマテリアルをクリックする | - Assetフォルダにある作成したマテリアルをクリックする | ||
| ライン 65: | ライン 58: | ||
| **VCIのパッケージをインポート済みの場合は VRM/UnlitTexture** のShaderに設定してください。 | **VCIのパッケージをインポート済みの場合は VRM/UnlitTexture** のShaderに設定してください。 | ||
| - | {{:vci:sample:image:materialsetting2.jpg?direct&500|}}\\ | + | {{:vci:sample:image:materialsetting2.jpg?direct&500|}} |
| - InspectorのTextureの設定項目にTextureをDrag&Dropします | - InspectorのTextureの設定項目にTextureをDrag&Dropします | ||
| - | |||
| - | ---- | ||
| ===== 画像を張り付ける3Dモデルを作成する ===== | ===== 画像を張り付ける3Dモデルを作成する ===== | ||
| - | {{:vci:sample:image:createquad.jpg?direct&400|}}\\ | + | {{:vci:sample:image:createquad.jpg?direct&400|}} |
| - | 画像を張り付ける為の3Dを作成します。\\ | + | 画像を張り付ける為の3Dを作成します。 |
| - hierarchyで右クリックを押してメニューを出します | - hierarchyで右クリックを押してメニューを出します | ||
| ライン 81: | ライン 72: | ||
| - [Quad]を選択してクリックします | - [Quad]を選択してクリックします | ||
| - 四角形の3Dモデルが作成されます | - 四角形の3Dモデルが作成されます | ||
| - | |||
| - | ---- | ||
| ===== 3Dモデルに画像を張り付ける ===== | ===== 3Dモデルに画像を張り付ける ===== | ||
| ライン 89: | ライン 78: | ||
| 既に作ってあるマテリアルを3DモデルへDrag&Dropします。\\ | 既に作ってあるマテリアルを3DモデルへDrag&Dropします。\\ | ||
| - | 3Dの柄がテクスチャに変化すれば3DへTextureを張り付ける作業は完了です。\\ | + | 3Dの柄がテクスチャに変化すれば3DへTextureを張り付ける作業は完了です。 |
| - | + | ||
| - | ---- | + | |
| ===== (補足)3Dモデルに画像を張り付ける仕組みについて ===== | ===== (補足)3Dモデルに画像を張り付ける仕組みについて ===== | ||
| - | {{:vci:sample:image:3dmodeluv.jpg?direct&400|}}\\ | + | {{:vci:sample:image:3dmodeluv.jpg?direct&400|}} |
| 3Dモデルには立体を表現するのに必要な**頂点の位置**の他に、様々な情報が付与されています。\\ | 3Dモデルには立体を表現するのに必要な**頂点の位置**の他に、様々な情報が付与されています。\\ | ||
| - | その中の１つに**UVマップ**というものがあります。\\ | + | その中の１つに**UVマップ**というものがあります。 |
| - | \\ | + | |
| UVマップとは、**3Dモデルにどの画像を張り付けるかを決める情報**です。\\ | UVマップとは、**3Dモデルにどの画像を張り付けるかを決める情報**です。\\ | ||
| 上記の画像では四隅の各頂点と、UVマップの対応を示したものです。UVマップを設定する事で画像のどの位置を3Dの面に張り付ければいいか判断できるようになるので、3Dに画像を張り付けられるようになります。\\ | 上記の画像では四隅の各頂点と、UVマップの対応を示したものです。UVマップを設定する事で画像のどの位置を3Dの面に張り付ければいいか判断できるようになるので、3Dに画像を張り付けられるようになります。\\ | ||
| - | \\ | + | このUVマップを設定する作業を**UV展開**と呼んだりします。 |
| つまり、UVマップが設定されてない3Dに画像(テクスチャ)を適用する事はできません。\\ | つまり、UVマップが設定されてない3Dに画像(テクスチャ)を適用する事はできません。\\ | ||
| - | 今回は、Unityのプリミティブを使用しましたが、Unityのプリミティブは事前にUVが設定されているのでUVを設定しなくても画像を張り付ける事ができました。\\ | + | 今回は、Unityのプリミティブを使用しましたが、Unityのプリミティブは事前にUVが設定されているのでUVを設定しなくても画像を張り付ける事ができました。 |
| - | \\ | + | |
vci/sample/image/tutorial.1569325573.txt.gz · 最終更新: 2019/09/24 20:46 by oinari