In many texturing applications it is necessary to be able to "tile" the texture over a larger region than the texture segment covers. In the ideal case the texture segment automatically tiles, that is, if it laid out in a grid it forms a seamless appearance. For example consider the following texture.

Many textures of tiles form such seamless surfaces easily because they are naturally bounded by rectangular discontinuities. For example consider the tile

Laid out it forms the tiling below

Other regular tiles fit together in more subtle ways.

For texture segments that don't have strong directional structure a common tiling method involves mirroring each second segment so that adjacent edges match, this is illustrated below

and here in a real example

This larger segment can now be repeated in the normal way indefinitely as all the edges will now join without discontinuities. Sometimes a mixture of mirroring and direct tiling can be applied, that is, mirror tile in one direction and do a straightforward tile in the other direction.

In part 1 the types of tiling were inherent in the tiles themselves. Here one method will be discussed for making any image tile without seams.

In what follows all the images are links that will display the image tiled within the browser window.

The following image on the left will be used as an example, it clearly doesn't tile. The discontinuities between the tiles can be illustrated by swapping the diagonal halves of the image as shown on the right. Sometimes it is possible to edit the image on the right, smoothing out the center vertical and horizontal seams, the result would then tile. In general this is difficult and has the disadvantage of being a manual process.

Original 1. Original image to be tiled. Courtesy Roger Bagula.

Original 2. The original image with the opposite quadrants swapped. This clearly shows the discontinuities that would result from the tiling.

In what follows, let the original image be represented as O, for simplicity consider the image to be square with N pixels vertically and horizontally. Each pixel is indexed (C conventions) as O[i][j] where i and j range from 0 to N-1.

The diagonally swapped image will be referred to as O^d. Each pixel in O^d is found as follows (assuming N is even):

Two masks are created, there are many alternatives but the example shown below is a radial linear ramp from black to white. Other masks can be used, the requirement is that the mask tends smoothly to pure white at the image boundary. The second mask on the right is diagonal swapped version of the mask on the left.

Mask 1.

Mask 2.

The mask shall be referred to as M. The mask above can be formed by the following:

Where i and j range from 0 to N/2-1. M^d is calculated as for O^d above.

The following two images are created by multiplying the two original images by their respective masks. I've chosen a slightly different convention here to normal, here for purposes of the multiplication black has a value of 1 and white 0. These two images tile (although rather boringly) because the left image decays to zero at it's edges.

Multiplication of the original image (Original 1) with mask 1.

Multiplication of the diagonal swapped image (Original 2) with mask 2.

And finally, the tilable image on the left is created by averaging the two images above. On the right is a reduced 2x2 tiling of the tile on the left showing the absence of any discontinuities.

The average of the two tiles above.

A 2x2 tiling of the tile on the left.

If T is the tilable texture, this can be written as

Note that to avoid zero divide by the denominators above it is customary constrain the mask values to positive (non zero) values.

Applying this technique to the diagonal grey scale tile above can give some further insight into how the method works.

This is the resulting tilable grey scale image.

Often a linear mask is used as illustrated above in order to minimise the introduction of circular structure into the tile.

This shows the linear tile applied to the previous grey scale diagonal ramp.

This linear mask is calculated as follows:

For perhaps a more realistic texture, consider the following photograph of some grass.

A detailed leaf example.

Software

• C source
  This very crude/simple C source is what I initially used to experiment with these techniques, you may find it useful.

• PhotoShop has a filter called "offset" that makes the diagonal flipped images. You can then create the masks with the ramp tool and form the tile with the appropriate operations on layers comprising of original image, mask and their respective diagonal images. Use the "screen" to apply the masks to each image. To combine the two resulting images, invert one of them and then take the "difference".

• GIMP has a tiling function that seems to work on the same principle as outlined here using a linear mask.

• A Shake implementation has been put together by Emmanuel Mogenet, a screen shot is here (shot.jpg) and the source is here (SoftTile.h).