Thread by @delaneykingrox

#gamedevtips ever played a game and seen little sparkly pixels in the environment even though it is seamless?

Lemme tell you what they are and how to fix them.

The dreaded sparklies are actually pixels of the sky dome or fog that get rendered at the seams of environment geometry- usually where two modules snap together.

So what causes it? They are perfectly flush, so why does the engine draw background?

Well, the answer is maths

It comes down to rasterizing- turning the polygons into pixels.

Imagine you have graph paper, a big black marker and a ruler. Place the ruler down at an angle and then imagine filling in squares with your marker. They can be on or off.

Your decision is called aliasing.

The decision you make as to if the grid square is filled in or not is the rules defined in your head. Say, i it is half covered or more you fill it in.

Now, imagine someone else did the same exercise with the same ruler angle but were not able to see your result?

What are the odds of the two matching up perfectly?

Yeah. No high.

But, if a computer does it, shouldn't it use the same formula on both sides?

Yes.

You won't see a seam.

But...

Let's say one edge has two verts. Call them A and Z.

The other has three. A and Z, but also K in the middle.

So one side is filling in A to Z
One side is filling in A to K, then K to Z.

A---------------------Z
A----------K----------Z

Now you will have sparklies.

Why?

Well, the position of the verts is stored in floats. A float is something like 0.252637111111000000263738381.

If we round that down, we get 0.2527

By rounding down the digits, an error creeps in. Both edges have different values.

So what that means is, the rounded down positions of A and Z are the same, but rasterizing between A---Z is different than A---K and then K---Z.

Aliasing results in squares being filled in differently on your grid.

And thus, floating point errors cause your sparklies.

So there are a couple of ways to solve this.

One. Grab your knife tool at cut verts into both sides, and snap them together. If you have six verts one edge and six on the other, and they are snapped- there will be no errors.

All the values will round to the same.

Method 2- allow your modules to have a lip. Rather than paper thin endings that snap together, extrude a little border out- or give the module some thickness. This causes overdraw, so don't go nuts with this.

Method 3- switch out the skydome as soon as you get indoors to black

Again, not ideal. Especially of you use global fogs.

Many skydomes can be sky hemispheres- which means your fog won't render below the horizon- however this won't stop wall sparkles.

The easiest way is to ensure your modules have matching verts at the borders.

This can require a little planning, but isn't too hard to do.

So now you know. I hope that helps.

All this is illustrated with sexy diagrams in my upcoming book on game art.

Stay tuned folks.

This will be me taking artists on a journey explaining the nuts and bolts techniques to not only how to do things but why.

Things like why we get seams in normal maps, why our bakes are wonky, why our character mouths look like garbage when they smile and so on.

In the meantime, you can pat me on the head and give me a biscuit here.

ko-fi.com/dellak

Mmmm money.

Try this.

Make two quads in your 3d app. Snap them together but do not weld.
Make the background bright and pan and zoom around a bit. No sparkles.

Now divide one up- a few cuts at random.

Pan and zoom around a bit.

See?