Seamless Texture for Dummies
Seamless Texture for Dummies
Seamless textures for dummies
(and a reference for the rest of us)
Author: Chiron Kentaur
Seamless textures used to work miracles back then when every saved bit was worth a small fortune, and they still work
miracles today when we’ve got used to buying gigabytes in spades without worrying seriously about the price.
But what are we talking about exactly?
By definition a seamless texture (AKA a ‘tileable texture’) is an image you can repeat indefinitely to fill an area without
making too obvious where one ‘tile’ ends and the next one begins.
Today the concept belongs mostly in the world of computer graphics, however it’s by no means limited to it: look at a
Victorian wallpaper, at the walls of your bathroom, at the floor beneath your feet… in most cases you’ll see an apparently
endless pattern it would take an artist years to complete – and yet a craftsman did the job in a few days. Where’s the trick?
Look more closely and you’ll easily find it: the picture is not endless, it’s made by just repeating the same basic pattern over
and over, but if the job has been done well enough it will be very hard or plainly impossible to tell the edges of this basic
‘cell’. You will be able to tell its size though as soon as you spot a repeated element and look for its nearest matches, but
after a while you’ll realize that any part of the picture having that size would fill the whole area equally well.
It’s a seamless pattern.
Yet the definition above puts all eggs in one basket.
For instance you can draw a white diamond on a black background (as in fig. 1) and call it a seamless textures; few people
will take you seriously but all the same you can rightfully claim that it meets the definition: no-one can spot the seams, it
can fill regularly a large area, and any part cut off the filled area will be seamless as long as it has the right size (in this case
128×128 pixels just like the original). Try and see for yourself.
However deal with it: the end effect (fig. 2) will hardly get you any gold medal for the best seamless texture of the year 
.
fig. 1 fig. 1a fig. 1b fig.2
Or you can draw a simple geometric pattern made to be seamless (as in fig. 3) and call it an infinite beehive: it will still
comply with the definition and the net effect will be a tad more interesting than with the diamond, if not exactly astonishing
fig. 3 fig. 4
Or else you can draw a single kitchen tile and use it to cover all the walls of the 3D kitchen you’re been modeling, and it
will be the same story: easy job, indisputably seamless, little fantasy required, banal results. Good to keep the children quiet
for a while but non much more.
The real challenge lies several stories higher: it consists of taking a suitable image (not just any image, as we’ll see later)
and making it seamless.
At first glance it looks impossible: quite obviously in order to be seamless the right side of the first tile must match exactly
the left side of the next one (that’s to say, its own left side – they are the same) not only as colour and intensity but also as
lines direction, curvature, trends, shadows… how the hell should you adjust all that by hand? And not only right-left but
also top-bottom… it would take forever!
No, it won’t.
Bringing in the edges
The trick is, everything inside the image matches perfectly its own neighbourhood; the problem is only with the edges,
placed where you would need four eyes and a good magic wand to work on two of them at the same time. If only we could
move those confounded edges to a more convenient position…
… which is surprisingly easy to do 
.
Let’s take an ordinary image, for instance some pebbles on a beach, and mark its edges in colours so that we can easily
follow them: red is left, blue is bottom, orange is right and green is top.
Suppose now to push the whole image to the right, about halfway out of the screen, like this:
and then let’s cut off the excess on the right, and put it back on the screen to fill the area left empty:
At first glance it doesn’t really look like a great achievement: what we have now is an image with a vertical ‘gash’ in the
middle… but that’s exactly what we were looking for: we brought the vertical edges to the centre. And the outer right
and left edges of the new image now match exactly, because they were the edges of the cut in the middle we split the
original picture with. Of course we can now repeat the same procedure vertically, which will produce an image ‘broken’
both horizontally and vertically in the middle, but whose edges will all match exactly those of any identical neighbouring
tile. The original image and the new one would look more or less like this,
(before) (after)
or, once we remove the edge markers we put to follow what edge lands where, like this:
the 'edge cross' brought to the centre
If you have Photoshop**), even an ancient version of it, it’s easier done than said: just navigate to Filter -> Other -> Offset,
then in the small window that opens cross the “preview” box (to see what you’re doing), select “wrap around” (important!),
and set the two sliders to about half the horizontal and vertical sizes (in pixels) of your image. Et voila, done. You don’t
even have to enter exactly the half-sizes of your image, just make sure that the ‘edge cross’ falls more or less in the middle,
for it will make your life easier in the following.
The basic principle doesn’t change if you use a different (but good) image processing program: you may have to devise
another suitable procedure, but bring the edges inside and you’ll live happily ever after. However, since Photoshop has
become a sort of high-quality standard for image processing, in the following I will assume that you are familiar enough
with it.
Back to the point: is such a ‘split’ image seamless? Obviously not yet: before you had four mismatching edges and a clean
middle, now you have four perfectly matching edges and a rather messy middle.
But inside the image you are lord and master: as long as you don’t mess up too close to the edges you can do whatever you
wish there without affecting the seamlessness of the outcome (which however won’t prevent it from being excruciatingly
ugly if you work sloppily ).
**) Photoshop is a registered trademark © Adobe Systems Inc.
Hiding the edge cross
We are now coming to the interesting part of the job: clearing up the mess inside until you can’t quite make out the ‘edge
cross’ anymore. Depending on the image you start with, this can be an easy job, or a very demanding one, or just anything
in between.
Comparatively homogeneous images (a sandy beach, a lawn, a rock face…) will require just a few touches with the PS
Healing Brush Tool (the one that looks like a sticking plaster), properly sized to retouch only the areas you want to affect
without interfering with the outer edges. It’s a great tool that copies the details from the source area while adjusting their
brightness and colour to the target area, thus making the retouch almost invisible.
Man-made regular objects (a filigree, a fence, a wooden or brick wall, a floor, an arabesque…) may pose more of a
challenge. First thing before starting, choose very carefully the area you want to work on: any picture big enough contains
many possible ‘tiles’, and it’s up to you to choose the most regular one to make it your original image. Cut it out, bring the
edges to the centre and see what the problem is going to be.
Unless you’re indecently lucky several former edges (now in the centre) will be displaced against their counterparts on the
other half, but don’t pull out your hairs for this: just go back to the original image, bring only the vertical edges to the centre
and split the two halves on two different layers; then some discrete warping (Edit -> Transform -> Warp) on both layers
will easily take care of the mismatch, after which you can merge back the two halves together. Once you’re done, repeat the
process with the horizontal edges and be surprised by how easy it was.
And never, ever, forget that as long as you don’t touch the outer edges, they are already done: no matter how weird they
may look, they will match.
Of course at this point there are still some fine details to retouch, but a quick dab with the sticking plaster (or even with the
clone stamp tool, if you dare) should easily dispose of them.
Another kind of challenge is posed by images that contain many clearly discernible objects (large leaves, fruits, stones,
rubbish…). There you cannot just cheat with the sticking plaster everywhere, it would leave too many places where one
object fades into another smoothly but visibly.
In such cases swear under your breath, roll up your sleeves and start cutting out a few conspicuous objects and copying
them each on an own layer; don’t forget a modicum of feather*) while doing that because the eye is damn sensitive to sharp
edges, and it won’t hurt to add to each a tad of shadow as well. Then you may place them strategically to cover the most
embarrassing points of the edge cross, whilst a moderate use of the sticking plaster will take care of the rest.
Cutting off dozens of irregular objects is pretty boring, so be smart: just two or three will do the job fine if you use them
repeatedly many times, each time slightly deformed and/or rotated in order not to be too obvious – just be careful with
the rotation lest the wrongly oriented lights and shadows reveal the trick.
The above are just examples and by no means an exhaustive classification of the image types you might run into, nor of the
possible solutions. Each image will pose its own problems and it will be up to your ingenuity to devise a suitable way to
come to terms with them.
However choosing the right image is crucial to a successful ‘seamlessing’ as well as to keeping your sanity.
How shall I choose the starting image?
That depends only on your personal taste and on where you want to get, thus there are no specific rules. Nonetheless there
are some common-sense based criteria for how an image should not be chosen.
– Let’s keep in mind that we want to fill a large surface without letting on that to this purpose we’re going to use just a
comparatively small tile. Thus the first criterion is to avoid images that contain one particularly conspicuous element:
the eye would notice it immediately and the repetition would be too obvious. If you have a lawn dotted with daisies and
one of them is considerably larger than the others, remove it without hesitation with the sticking plaster.
Generally speaking, remove or mask all the elements that can betray you: individual colour dots, large single details,
too visible lines, and so on. But be careful not to overdo, lest you're left with an image totally despoiled of any
personality.
*) For non-Photoshop users: nothing to do with birds. In this context ‘feather’ means the presettable fuzziness of a selection that makes any further action 100% active inside and gradually decreasing outwards until it reaches 0% outside. Precious to make inconspicuous touch-ups.
If the picture has been shot at an angle (i.e. not perpendicularly to the photographed surface) it will be a hard job to make
the edges match because the details at one end will be visibly smaller than their counterparts at the other end. In this case
some perspective adjustment could do the trick, but not always and certainly not for extreme perspective distortions.
–A non uniform brightness is a pain in the neck: once you bring the edges to the centre it causes a brusque brightness
jump to appear all around the edge cross, and even an intensive use of the sticking plaster won’t conceal it without
causing unwanted discernible repetitions. Yet it would be a pity to discard a good image only because of this, thus in
some cases a bit of pre-processing is really worth the while.
To do this you may tile horizontally two instances of your image on two separate layers, select the central edge of one
of them with a feather about half as large as the tile itself, and then play with intensity and saturation until it matches its
twin neighbour. Then do the same vertically. Do it, it’s faster and easier than you think.
– Images with plenty of naked tree branches would drive you crazy. Just forget them – or be prepared for the worst.
– If after about half an hour you still don’t see a way out, desist and start looking for another image: else you could
probably go on for days without getting any really satisfactory result.
Final touches
Once you’re done with the edge cross there are still four small areas that might cause problems: the ends of the edge cross.
There you couldn’t work because they are too near (actually on) the outer edges, thus they won’t match when you tile the
image. What should you do with them?
The answer is rather obvious: just repeat the whole procedure on the new image, bring its edges to the centre and… and say
“oooh…” as you notice that the problem is hardly discernible, if at all. No, don’t ask me why, it keeps surprising me too.
Anyway, if it’s disturbing, a quick touch with the sticking plaster will generally suffice to remove it once and for all. You
may relax, all the hard work is already done.
Now it’s about time to check the quality of your work. There are many programs to show a seamless texture properly tiled
and covering the whole screen. I use ThumbsPlus but that’s by no means a must: Photoshop itself will do it if you define
your image as a pattern and then use it with the Paint Bucket Tool set on “Pattern” instead of on “Background” (you don’t
want to spoil your work, so do it in another tab).
Most of the times you’ll be proud of your work and won’t need to touch it up any further. Sometimes though you might find
yourself thinking “yes it's nice but…” – the reason is probably that your eye sees regular dark or light spots that you totally
missed before because only the tiling would reveal them. No big problem anyway: now that you know that they are there
and where they are, it’s easy to select them and iron them away with a modicum of intensity retouch – but don’t forget to
give the selection a suitable feather or else its border may show up even dramatically.
After some tampering you’ll probably keep spotting further small imperfections that could be ironed away, but for heaven’s
sake quit now: your eye has grown accustomed to the image and it would keep seeing blemishes over and again till your
image becomes so dull and flat that you eventually feel like throwing it to the bin.
Perfectionism is not always a virtue, you know…
Images don't suffer
More than once while ‘seamlessing’ an image you will feel as if you were abusing it badly: some details must go, on several
spots you have to modify it drastically, a few areas are to be re-invented from scratch… but don’t worry, you’re not raping
it. You’re just creating a brand new image certainly inspired to the original but by no means a mere downgraded version of
it. And, should you feel that you ruined a good work, the original is still there to provide you with parts that, wisely and
smoothly implanted, can give back to the new seamless version at least part of the life you removed in an excess of zeal.
You’re a surgeon, not a butcher.
What would I need a seamless texture for?
As hinted at the beginning, nowadays wasting a few megabytes is no more a capital sin, at most it’s a minor peccadillo you
can afford lightly. But those confounded megabytes have the bad habit of adding up, and sometimes they may easily grow
into gigabytes without you even noticing. Still not a big problem as far as the disk space is concerned – today you buy disks
by the terabyte – but all those zillions of bits have to be read and processed by a CPU subject to hardly negotiable physical
constraints such as the speed of light, the smallest achievable track thickness within a chip, the maximum amount of heat
the CPU can dispose of without burning out, and more still.
Thus after a while you might notice that your favourite 3D software has become sort of sluggish while rendering, and then
you’ll be frantically looking for something to blame that upon: a possible virus, the last accursed OS automatic update, the
anti-virus program that sucks up plenty of computing resources, that mysterious background task you know nothing about…
but it will hardly occur to you that telling the software to load 100KB takes exactly the same time as telling it to load 20MB – yet for the CPU to process them is quite another business.
So why waste precious computer resources where you don’t need to? In some cases a background may require really large
textures and reducing their size would remarkably degrade the outcome; in other cases though all a floor (or a decorated
wall) really needs can be 200 times smaller than a fully fledged texture, and it renders exactly in the same way.
And this is just the beginning.
If it comes to a web page background and your website has many pages, then the time to download their full-size textures
has its own weight; depending on the connection speed this weight can be measured even in seconds – long enough for a
hasty visitor to grow bored and click away. Whereas downloading just a few tiles won’t take longer than some milliseconds
in the worst-case scenario.
Moreover there are lots of special cases (particularly in the 3D world, computer games first) where a texture is often meant
to be wrapped around non-flat surfaces, to ‘upholster’ complicated objects or even whole volumes inside and/or outside –
caves, buildings, riveted steel bulkheads, palaces, you name them. There using a single large texture would be rather
awkward and not only resource-consuming, whilst a couple of agile seamless tiles do the same job thriftily and elegantly.
That's a lot of work. Can it be done automatically?
Yes and no, but generally no – not yet anyway.
There are several programs that claim to make an image seamless, a few of them even free, but for some reason the outcome
is usually rather disappointing: they do produce technically seamless textures, no argument, but if you use them to fill an
area either your eye will notice immediately the repetition, or the general look will be so dull that it could almost be
replaced with a solid colour. Or even both things simultaneously.
That’s because the final customer of our machinations is the human eye (short for ‘human visual system’, which is a lot
more than just a couple of eyeballs), and the human eye is incredibly smart and incredibly gullible at the same time.
Try this in Photoshop, it’s amazing: take a random pattern of small black spots on a transparent background, duplicate it,
rotate the copy by a few degrees, and your eye will see a set of fuzzy circles centered exactly on the rotation centre – but the
circles aren’t there at all: without telling your eye has automatically compared the two superimposed patterns in no time,
decided that there is a correlation between them and shown it to you as circles.
Your eye is way smarter than you think.
And still there are plenty of optical illusions to tell you that deceiving the human eye is also pretty easy, and quite
surprisingly for the same reason: what we see is not the bare images on our retinas, but rather the result of a very complex
and still vastly unknown combination of integration, interpolation, extrapolation, filtering and whatnot of the information
those images contain.
In short: if it takes a thief to catch a thief, it takes a human eye to cheat a human eye.
That’s to say that if you want your seamless image to do its job inconspicuously you’ll better remove the ‘edge cross’
yourself and listen attentively all the way through to those spontaneous reactions of yours so difficult to account for, such as
“wow, that looks great!” or “mmh, I’m not really sure…” – it’s the final judge speaking, your human eye.
And no, it isn’t really a lot of work: once you get the hang of it, in most cases it will be faster to ‘seamless’ a picture
yourself than to find it ready on the internet. At least that’s the way it works for me .
