How to animate/change color of the skybox?

I am working on a day/night cycle in a game prototype and I originally used an inverted sphere for the sky, but it sucked for reflections, map size, and the color change of the sky was bad. i considered using a gif of a solid square that changed color the way I wanted, but the sky never changes.

if it helps, I am using 2 spheres for the sun and moon so I can do goos sunlight and moonlight and I am using a cloud particle system I made for the clouds, so all I need is to either use code to change the color of the sky the way I need, or to be able to use a premade gif for the skybox.

any help is appreciated. thank you for your time.

Can you go into more detail on why it was an issue?

The sky sphere is a large inverted sphere that rotates to mimic the sky, but the problem is that because the sphere is not the actual skybox, any textures with reflections would only reflect the real skybox. and not the sky sphere.

because my friend and I are making this game specifically to run on the computers our school provides, we set the farclip of the player camera to 500 for performance, so the map size has to be
limited to a specific size so you could even see the sky properly without the player clipping through it or the player going out of the farclip range.

we are also limited in the ability to have the sky change colors realistically. in real life, the entire sky is orange in the morning, but due to the limitation of our current method, the sky is half blue and half black in the mornings and evenings.
here is the texture image for the sky sphere if this is helpful.
sky texture

Having the actual skybox mimic the color of the sky during the day/night cycle would solve all of these problems. Because the sun, moon, clouds, and stars are separate from the skybox as particle systems and spheres, we only need the skybox to be a solid color at any given moment.

To do this, I attempted to use a gif that was a po2 resolution as the skybox, but the frames of the gif never changed. and this method would already work poorly because if there are any major lag or ping spikes, the gif skybox would likely be out of sync with the rest of the cycle. this method would also require a gif that is very long, which would take up WAY too much space.

if there was a way to use code to change the color of the skybox the way I need it according to a variable from the day/night cycle code, that would likely be the best way about it.

If all you need is some kind of gradient, like the black to blue image you show … you can just generate this texture (with resolution of lets say 1 x 64) in the java script code. Alternatively, you could paint if in some tool (photoshop), and have a series of those gradients representing the whole day cycle, so for example have 16 times of the day, each would be 1x64, so the texture would be 16x64.
And then have a custom shader for that sphere that simply uses a single column of it based on the time uniform.

4 Likes