====== Import image and apply them on VCI (3D model) ======

Here are the steps to import an image and use them on a VCI.\\

----

===== Tips on images to use in CG =====

It is favorable to use 1:1 square images in the size of the square root of two, such as **64, 128, 256, 512 and 1024**.\\
Rectangles and images in other sizes could be used, however, the sizes listed above result in **better quality when the image is shrunk**. \\
\\
You could use an image that is not a 1:1 square, but it is not recommended.\\

----

===== Prepare an image =====

{{:en:vci:sample:image:imagetutorial_paint.png?direct&400|}}\\

The figure above shows an example of preparing 256-pixel image using [[https://en.wikipedia.org/wiki/Microsoft_Paint |Microsoft Paint]], a painting software pre-installed on Windows.\\
Operate as follows to create an image in a specific resolution using Microsoft Paint.\\

  - Click on [Resize]
  - Remove the check on [Maintain aspect ratio]
  - Type the resolution of preference on Horizontal and Vertical input field

Press [OK], then, from [File], choose [Save As] to save the image in your preferred location.\\
In this example we will choose the image type [PNG (.png)].\\
\\
Here are some of the major image creation software:\\
[[https://www.adobe.com/products/photoshop.html | Photoshop]], [[http://www.clipstudio.net/en | CLIPSTUDIO PAINT]], [[https://www.gimp.org/ | GIMP]]\\
You can use any software as long as you can create an image with it.\\

----

===== Import the image into Unity =====

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

You can import the image you just created by drag & dropping it into Unity's Asset folder.\\
We will use it in its default settings this time, but you can find detailed information on [https://docs.unity3d.com/2018.3/Documentation/Manual/class-TextureImporter.html|Texture (Unity document)]].

----

===== Material configuration =====

{{:vci:sample:image:creatematerial.jpg?direct&500|}}\\
After the image is imported, we will configure a material.\\
Material is a collection of settings for the look of a 3D model.\\
The workflow to apply an image to 3D looks like this: Import an image as a texture > Create a material with the texture configured > apply the material to 3D model.\\

  - Right-click in the Assets folder
  - Select [Create] from the menu
  - Click [Material] from the menu
  - Input the name for the material

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

  - In Assets folder, click on the material you just created
  - Select [Shader] from the Inspector and show the drop-down
  - Select [Unlit] from the drop-down
  - Select [Texture] from the menu

* This time, **we choose [Unlit/Texture] Shader for the tutorial purpose**,\\
　however, if you have VCI package already imported into the project, choose [VRM/UnlitTexture] Shader.

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

  - Drag & drop the texture onto the Texture area in the Inspector.

----

===== Create a 3D model to apply the texture on =====

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

Let's create a 3D model to apply the texture on.\\

  - Right-click in the Hierarchy to open context menu
  - Select [3D Object]
  - Click on [Quad]
  - A square 3D model is created

----

===== Apply the texture on the 3D model =====

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

Drag & drop the material we created on to the 3D model.\\
The surface of the 3D model changes and we are finished.\\

----

===== (Supplement) How the texture works in 3D model =====

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

3D models contain various information such as **vertex positions** to depict solid.\\
One of the information is **UV map**.\\
\\
A UV map is a **set of information to decide how to apply textures on a 3D model**.\\
The figure above shows the correlation between vertexes on each corner and the UV map. By specifying a UV map, Unity can decide where and which image to apply on each polygon of the 3D surface.\\
\\
This means you cannot apply a texture on a 3D model that doesn't have a UV map specified.\\
In this example, we used a primitive in Unity. As Unity's primitives have UV map preconfigured, we were able to apply the texture without specifying UV.\\
\\