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

Question

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

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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.

You may however try to start with a more basic shader to understand how it works.

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

Another good place to find wonderful shader examples is https://www.shadertoy.com/

Answer 6

You can cut your big jpeg in a small segments and place them (visible part) , you don't even need store it in a memory all the time.

And like a old games some 'tiles' can repeat. Thats was common solution for NES console, thats was even supported by hardware.