Texture tiling - avoiding the tiled look?

Question

Hi,

I'm working on an application that will run on different size screens, and I have to generate a texture (like parchment paper) that will fill out over all available space of the screen.

A very simple approach is to include a small bitmap (256 x 256?) of a texture sample, and repeat it over all available area, but that will end up looking tiled and pretty disappointing.

Are there any methods for generating large tiled texture areas that don't look...tiled?

Thanks

Answer 1

My best piece of advice (if you go the tiling route) is to find a texture sample that is small enough to fit your memory requirements but polished enough to not look "tiled" when tiled. When you tile any image, it's going to look tiled unless the borders can seamlessly flow with each other on any sides. That is, a common "edge" for all sides with a little variation in the middle can go a long way to making the image not look "tiled". This shouldn't be too difficult with something like parchment paper, and indeed works for things that are naturally tiled, like bricks or concrete.

There's some good samples of things online (free, too!) that you can look through if you lack the artistic flair to pull something like this off.

Another approach would be to just use a hi-resolution version of your image and "stretch" it to fit a screen. The higher the resolution, the less pixelation you'll get as the image stretches. (or attempt something akin to mip-mapping where you store several different resolution versions of an image then select the best one based on the screen size.)

Answer 2

I've not tried using these, but I've been impressed by what some people have done with procedural textures.

Answer 3

Here's a recipe I devised for making random textures that are apt for tiling (that is, that are periodic) in a image editor (Photoshop, Paint.net, GIMP).

Some samples here - I made all them following this procedure, with no other image editing.

Let's assume you want to make a 256x256 image.

1. Start with a blank 256x256 image
2. Add random noise.
3. Enlarge the canvas, adding a margin of 256 pixels in each direction. You now have a 768x768 image
4. Copy the center 256x256 image to the eight surrounding squares (this step is the most cumbersone, and must be done precisely - you can automate it, for example, in Paint.NET)
5. Make some local SI transformations (explained below) on the full image.
6. If not pretty, GOTO 5
7. Crop the image, 256 pixels on each margin. Result: a tileable 256x256 image.

A "local SI (space invariant) transformation" (SI is analogous to the 'TI' part in LTI filters) is any image transformation (filter, adjust, effect) that alters each pixel value on some deterministic way based only on the current value and the neighbours pixels, invariant with respect to translations. This includes, among others:

• Any color adjustment (brightnes, contrast, hue, saturation, levels-curves, equalization, posterize).
• Standard low-freq or high-frec filters, sharpening and blurring, median filters.
• Local effects: Edge detection, emboss, relief

This does NOT include "global" effects (textures rendering, spatial distortions)

The recipe can be applied to different layers, which can be combined in any "mode".

Some of the steps can be recorded as macros or whatever your image editor allows you to.

It's quite fun, and some interesting textures can be made just by trying and playing with effects and layers.