Nodachisoft Nodachi Sword Icon
  
@Amaji✎ Update January -24-2021

How to create a looping texture image that can be used in games and other applications.

Pattern Texture

Pattern textures are images that form a loop when pasted onto a 3D object as a 3D texture, and if you do a keyword search, there are many great ones available as materials. In this section, I will summarize my own procedure for creating them.

Texture patterning (displayed in Unity3D)

Quickly, let's see the difference before and after we pattern the photo.

Pattern texturing (before/after comparison)

Texture patterning (displayed in Unity3D)

This is an image of a looped texture on each plane in Unity, and a comparison before and after the texture was patterned.

Before patterning

Before patterning, the image looks like it has vertical lines at regular intervals. You can clearly see that this is a seam in the image. The horizontal seams have no lines and are not noticeable, but this is because the gravel and shadows are of the same intensity at the top and bottom of the image.

After patterning

If you look at the image on the right, you can see that the seams in the image have been successfully faked so that when the image is pasted in a loop (tiling in a loop), it is difficult to see the border of the texture. You don't even see the seams that were there before the patterning!

How to create a pattern texture with the tool

We have created a simple tool to generate loop images in a browser, please click here and use it.

Loop Image Convertion Tools - ImageLooper for Web

If you use an image file for the above tool, you can generate an image like the one below.

Photos of stone walls

The example is a photo of a stone wall taken in Okinawa by me, which was made into a loop image using a tool. You can see that it is a looped image with no discernible joints!

How to create a pattern texture manually

The following is a memo of my own method of creating pattern textures. I'm still looking for a more efficient way, so if you know of one, please let me know.

Step 1. get the original image of the texture

Take a picture of the ground, a board, the bark of a tree, etc. with your smartphone camera. In my case, I use a digital camera called RICOH GR DIGITAL IV, which is strong in close-up photography and can take beautiful pictures. I wrote down the following points that I personally felt while going through trial and error.

Shooting Points

  • Try not to cast a shadow on the subject.
  • Shoot from the front as much as possible. (Be aware of the normals of the subject's surface.
  • Make sure that the color of the edge of the image is as uniform as possible.
  • If the direction of the pattern is fixed, such as a wooden board, adjust the shooting position so that the seam of the wood is at the edge. Also, adjust the shooting position so that the edge is vertical or horizontal to the seam of the wood.
  • Be aware that shadows cast by uneven surfaces, such as walls, will be burned into the image if the sun is shining on them. (If you don't want to do this, find a shaded area and shoot with a view of the exposure.

Gravel ground photographed by me Gravel

Step 2. processing textures

Reduce or cut the image size so that it becomes a multiple of 2. The reason why it is a multiple of two is that it is generally a more efficient size for games and other applications to handle on memory at high speed.

In this case, the image is processed to 256 pixels in height and 256 pixels in width.

Partially cropped and reduced the size of the photo of the gravel road Photo of a gravel road, partially cropped & reduced in size

Step 3. apply texture scroll filter

Here is how to do it in Photoshop. I'll just write it down as an example of how to do it.

Image editing software

Even if you don't have Photoshop, you can use the standard Windows Paint to copy, move and crop the image, or you can use CliptStudio or other free image editing software (such as Gimp). Please use the one you like.

First, copy the target image to another layer and name it "Scrolled Image". Also, name the original image "Original Image".

PhotoShop layer naming example

layer naming example

「Scrolled Image」のみ選択した状態で、「メニューバー:フィルタ(T) その他スクロール」を選択し、スクロールフィルターを以下のように設定します。 そして ラップアラウンド(巻き戻す) にチェックを入れておけば、スクロールしてキャンバスからはみ出た画像部分、キャンバスの反対側から描画されます。

With only Scrolled Image layer selected, click Menu Bar: Filter (T) -> Other -> Scroll and set the scroll filter as follows. And if you check wraparound, the part of the image that scrolls and goes out of the canvas, will be drawn from the other side of the canvas.

Step 4. Faking texture seams

Use the Eraser Tool to erase the seams of the 'Scrolled Image' layer. It is good if the image is well combined with the 'Original Image' layer. It's a good idea to control the hardness of the eraser tool to some extent. In the image below, you can see the seams in the center vertical and horizontal parts of the image.

Gravel ground photo (scrolling filter applied)

Gravel ground photo with scrolling filter applied

Step 5. Texture check

Select both "Original Image" and "Scroll Image" and use the scroll filter again to move the image around to make sure there are no strange seams.

Gravel ground photo (Remove the discomfort with an eraser)

Gravel ground photo (Remove the discomfort with an eraser)

It's finished! You now have a loopable gravel image.

These 5 steps complete the creation of the pattern texture. If you have a pattern that is difficult to create simply by blurring the seams, the basic flow is the same, and instead of blurring the seams with the eraser tool, you can edit the image to make the seams look better.

If you want to create a normal map (or height map) by hand, you can use the same method, but it may take a long time.

Translated with www.DeepL.com/Translator (free version)

Generate automatically

There is also a way to dynamically generate pattern textures programmatically instead of manually. The technique is called procedural texture , which allows you to put parameters into a texture generation function to generate color and normal information that matches the coordinates.

It is possible to generate images with realistic textures and colors from the program, and the resolution can be increased as much as you like, but the drawback is that it takes a long time to generate and is heavy. I think this will become the mainstream method of generating pattern textures in the future as the specifications of PCs and game consoles improve.

Textures that don't look rough no matter how close you get.

For example, it can be used in combination with VR equipment to dynamically generate detailed textures of the object being viewed as the player adjusts their viewpoint or moves closer to it, and show a high resolution image that is not rough no matter how close the player gets. If you only use photos, you have to prepare a high resolution image beforehand, so there is a limit.

Update

update modified content
2021.1.24 page translated and published

Comment

pu 2018-11-12 1:25 PM

Thanks for the great post!
It's easy to create a normal map with crazybump -

Amaji 2018-11-13 9:27 PM

TO: pu
Thanks for the valuable info!
crazybump, I see that the software can automatically generate normal maps from textures.
I've heard that it can generate not only normals, but also specular maps and diffuse maps.

There is also an evaluation version.
I've been using it for a few years now, and I'm very happy with it.
I'm sure you'll like it.
I'm now ready to try it out. Thank you very much! I'm very happy with it.

 
 
Message sent

Thank you for your message.

Something error has occured!

Sorry. The Error has occurred.We apologize for the inconvenience.Please try again in a few minutes or contact us via DM below.

Twitter:@NodachiSoft_eng
Name:
 
Replay To:
 
Message:
 
Back
Check the content!

Send the following information to us. If you are happy with your submission, please click "Send". If you want to modify it, please click "Back".

Name:
 
Reply To:
 
Message:
 
Enter a confirmation key to make sure that you are not operating from a Robot.
Confirmation Key is 95
Back
 / 
Go to Confirmation
Entry fields
Go to Confirmation

There are 0 articles that may be relevant!

Table Of Contents
How to create a looping texture image that can be used in games and other applications.
How to create a looping texture image that can be used in games and other applications.
Pattern Texture
Pattern Texture
Texture patterning (displayed in Unity3D)
Texture patterning (displayed in Unity3D)
Before patterning
Before patterning
After patterning
After patterning
How to create a pattern texture with the tool
How to create a pattern texture with the tool
How to create a pattern texture manually
How to create a pattern texture manually
Step 1. get the original image of the texture
Step 1. get the original image of the texture
Step 2. processing textures
Step 2. processing textures
Step 3. apply texture scroll filter
Step 3. apply texture scroll filter
Step 4. Faking texture seams
Step 4. Faking texture seams
Step 5. Texture check
Step 5. Texture check
Generate automatically
Generate automatically
Update
Update
Comment
Comment
Nodachisoft © 2021