UE4 Intro To Materials - Page 2


Index


Creating a Diffuse Map - Page 2


  1. A diffuse map is normally square in aspect ratio. To properly mipmap you need to keep the resolution in multiples of 2 (2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192). We pick the resolution based on how close we will get to this texture and the complexity of the detail. Some platforms like cell phones might not be able to take the largest texture size. Open the file OfficeCarpet.jpg that is in the Import folder with Photoshop. It is a jpg because I shot it with my phone. One really should shoot in raw mode on an slr camera with fixed lenses.
Create new sprite with button

  1. Since this is a carpet and the detail is quite small and will be on the floor, then I think we can get away with a 1K or 2K (1024 or 2048) texture. The image is big enough and the top of the carpet has a shadow that we don’t want. First, select the crop tool. Change the resolution of the crop to 2048 by 2048. It is hard to hit this number so you can make it a bit bigger. Press the Check Mark to crop the image.
Create new sprite with button

  1. Go to Image | Image Size in the top menu to find out what the size is:
Create new sprite with button

  1. If it is not 2048 by 2048, change the size to make it a power of 2 number. Press OK:
Create new sprite with button

  1. Lets look to see if we can tighten the range based on the image so that we can maximize the range of colors that can be represented. Go to Image | Adjustments | Levels :
Create new sprite with button

  1. There is not much information on the left hand side of the curve. Make adjustaments to maximize the range and adjust the image to your liking:
Create new sprite with button

  1. Go to Filter | Other | Offset. This will move the image over to expose the seams. If we clean up the seams then it will be a seamless texture in all directions.
Create new sprite with button

  1. Now lets put the seam in the middle by select 1024 for both Vertical and Horizontal. Make sure it is set to Wrap Around:
Create new sprite with button

  1. Now the seam down the center is hard to see, so here is this done on an image with an obvious pattern:
Create new sprite with button

  1. Here is a close up of the seam on the image I created:
Create new sprite with button

  1. Now we need to remove the seam. There is a quick and efficient way of doing it. This doesn’t work with every image, but since this is so geometrical it is an effective technique. Select the Lasso tool:
Create new sprite with button

  1. Now you are going to trace around the seam, picking a logical part to hide the edit. Follow a line, stain, or pattern. I have removed the background to better demonstrate the selection I made:
Create new sprite with button

  1. Lets replace what is selected and remove the seam. Press Edit | Fill.
Create new sprite with button

  1. Select the Contents: Content-Aware. This replaces what is selected with a machine learning algorithm to fill in with what is around it and try and have continuity. It does amazing work of removing seams in geometric patterns.
Create new sprite with button

  1. Now the seam is gone as Photoshop has guessed the best way to fill the missing portion of the image (some really clevel AI going on there).
Create new sprite with button

  1. Lets save what we have as a .psd file format.
Create new sprite with button

  1. This was the easy part. Now we want to see what this texture looks like tiled. Even though we have removed the seam, there could be a distinctive pattern that gives away the repeat. Right click on the .psd file and duplicate it:
Create new sprite with button

  1. Now open this copy up and select Image | Image Size and reduce the size to 512 by 512.
Create new sprite with button

  1. Create a pattern that we can use to repeat and look at the texture tiled. Press Edit | Define Pattern:
Create new sprite with button

  1. Name the pattern. I called mine Carpet.
Create new sprite with button

  1. Create a new psd file and make the canvas 2048 by 2048.
Create new sprite with button

  1. Select Edit | Fill in this new document.
Create new sprite with button

  1. This tie we want the fill Contents to be Pattern. Select the pattern you just made and press OK:
Create new sprite with button

  1. The staining on the carpet creates an obvious repeated pattern.
Create new sprite with button

  1. I went back to the origina copy. I copied the background rotated it and tried different ways of blending it with the layer below. I then applied a Filter | Other | High Pass Filter to a combined version of those two layers. I then reduced the repeat to one stubborn stain. I repeated the above process to preview the texture wrapping in photoshop.
Create new sprite with button

  1. I used the clone tool to remove this distinctive spot and retiled it. I think I will stop here as it is good enough for now.
Create new sprite with button

  1. For Unreal we want a copy of this in the TGA format. This is an uncompressed format that allows for multiple channels and bit depths. Unreal does the compression on its own so we don’t have to worry about file size and compression for going into Unity. Select File | Save As.
Create new sprite with button

  1. We will name it using UE4 naming conventions. We will preceed the name of the texture map with T_ and end the name with an indication of what kind of texture map this is with BC_ for Base Color. So I called the file T_OfficeCarpet_BC (Photoshop will add the extension for you). On the next page we will take this texture and put it into Unreal.
Create new sprite with button

  1. Select 24 bits as we will have 8 bits per RGB channel. We do not have an Alpha in this so it should be fine!
Create new sprite with button



<- Previous   Home    Continue ->