ユーザ用ツール

サイト用ツール


vci:sample:image:tutorial

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

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


CGで扱う画像について

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

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


画像を準備する


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

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

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

画像を作成できるソフトでメジャーなものは下記のようなものがあります。
Photoshop, CLIPSTUDIO PAINT, GIMP
画像を用意できるのであれば、どんなソフトを使っても問題ありません。


Unityに画像を取り込む


書き出した画像はUnityのAssetフォルダへDrag&Dropすると取り込む事ができます。
今回はデフォルト設定のまま使用しますが、テクスチャの設定についてはテクスチャ(Unityドキュメント)から確認する事ができます。


マテリアル設定


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

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


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

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


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

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


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

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

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

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


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


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

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

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

vci/sample/image/tutorial.txt · 最終更新: 2019/09/24 20:46 by navana

ページ用ツール