How can I create a large space background that repeats, in an unnoticeable way

How can I create a large space background that repeats for an rts game. I want to have complex nebulae and dust fields also, but since the units will have lots of space to explore I can't have a 120000px by 1200000px jpeg, so I want to have the image repeat, but not have change lines between segments.

I'm using this with Babylon framework by Microsoft for web GL canvas

• Did you consider just using a procedural shader instead of any image? A simple web search bring this one up, which looks kind of very impressive: casual-effects.blogspot.com.au/2013/08/starfield-shader.html Jan 3, 2015 at 10:05
• @LeFauve Actually I like this idea alot. Does the game remember the past generated stuff when you travel back on it? How can I manage this in browser memory? Jan 3, 2015 at 10:50
• @SuperUberDuper: There's no need for it to "remember" anything as long as it's generated in a deterministic and local manner. Just regenerate the data whenever it's needed. Jan 4, 2015 at 19:29
• @LeFauve: That should really be an answer. It's much better than the answers given. Jan 4, 2015 at 19:30
• @R.. I agree, would also be nice to have some code for it in webGL ;) Jan 4, 2015 at 19:42

1. Use parallax scrolling. Have multiple background layers which scroll with different fractions of the speed of the main viewpoint. The lower the layer, the slower it scrolls. This isn't just a great way to provide an illusion of depth, it also makes the backgrounds look less repetitive because the objects on the different layers will appear in different compositions due to the layers not being in sync.

2. create your backgrounds procedurally. Instead of one huge background graphic, have multiple different smaller elements and place all of them multiple times randomly all over the game world.

And by the way: Don't use JPEG when you can avoid it. It's a lossy format which loses more quality every time you modify and save it, it is heavily optimized for photography and doesn't support transparency. Use a lossless format with alpha channel like PNG. The only good reason would be when your source image is only available in JPEG (NASA published a lot of nice astronomy pictures which are all in the public domain) and you want to do no modification whatsoever on them.

A way to build an infinite background for a 2D game is the following:

1. Using a graphics editor software (like iDraw for Mac) create an image A that represents a portion of your background. This image should have a limited size.
2. Duplicate A and mirror it on the Y axis, this is B
3. Now paste (horizontally) togheter A and B, this is AB.
4. Finally import the image AB in your game and repeat it horizontally via code as many times as you want.

Hope this helps.

• Limited size, but not too limited. The smaller the tile, the more obvious the repetition will generally be.
– cHao
Jan 3, 2015 at 17:37
• Or, instead of mirroring, use the Offset filter in Photoshop and clone stamp over the borders, or just use GIMP's "Make Seamless" filter (Filter → Map → Make Seamless). Jan 4, 2015 at 16:19

Layers work well.

Here's some maths:

Suppose you have a railway track that's been poorly made such that the like __ __ notice the gap between them. When the wheel rolls over them it makes a small notch (tiny notch).

If the track length is l and the wheel has radius r then 2pi r is the circumfrence of the wheel, ration=l/(2pi r) if the ratio is say 10.25 then the wheel will get a notch in it every quarter as it rides a long.

This is the easiest way I can think of to explain covering spaces.

So suppose you have two images, if one has this quarter ratio you'll get a 4-phase pattern, it'll repeat after 4 tiles. Suppose you have 1 main background and 2 overlays, with m and n phases. Then the pattern will repeat after m*n tiles.

While it wont matter much the pattern will look best if the numbers are co-prime, that is the greatest common divisor is 1. For example suppose we have something of phase 6 and something of phase 4, every other phase these will "line up" in a sense.

You can use this technique (especially with particles and stuff) to create a lot of "unique" stuff with very little effort.

Back to the train wheel, if the ratio is irrational, then the notches will cover the the wheel! But this doesn't really matter.

Here is another idea which seems to be missing:

In case of long distance backgrounds, like sky boxes, Parallax layers doesn't really feel good. Think of the stars for example, when walking on earth, or even better through out the night, all the stars move together, though we know they are hundreds or thoughts light year away from each other. The thing is they are way too far away for us to notice their distances. All that said we still want a very big texture (say 120k*120k), to be drawn with our limited computational power (which can handle 8k*8k at most). Like using multiple parallax layers, you should create different textures, each with different kinds of details. For example one represents galaxies, another one is a bunch of stars, etc. But this time instead of moving them with different speeds, they should differ in their sizes. Here is an example: Consider using 3 textures, one is 2048*2048, another one is 729*729 and the third one is 625*625. Since these numbers are coprime with each other, When combining these 3 textures in 3 layers, one should move lcm(2048,729,625) = 764M pixels from the origin to see same thing being drawn, which kinda feels like infinity. In fact you can add other layers or change size of each texture and you'll always end up with a result as big as least common multiple of texture sizes.

• This and @AlecTeal's answer describes a technique called the Cicada Principle. It's an easy way to create non random, very large non repeating background with very little resources. Jan 3, 2015 at 7:05

This seems to be a job for a procedural pixel shader.

The advantages over using an image are:

• You don't need to provide huge bitmaps
• It is procedural, so it doesn't have to repeat a fixed image (it can vary infinitely)
• If you want a paralax effect, you can simulate thousands of planes, which would be impractical using images
• You can do very advance effects, like dynamic lighting
• Most of the processing is made by your GPU, leaving the CPU free for other parts of your game

A simple web search bring this shader up http://casual-effects.blogspot.com.au/2013/08/starfield-shader.html which looks like what you're looking for.

I'm not an expert on WebGL, but according to this page, it looks like it uses the regular GLSL language (this is the C-Like language used by graphic cards to program shaders). This means you will probably have little to no changes to do to make it work.

This blog page lists all the steps to implement a shader in WebGL. That seems a good place to start.