A small guide to (non-atmospheric) Fog

Disclaimer

This tutorial was made before the atmospheric property came out. I recommend looking into using atmospheric property instead, as it solves all the problems with fog listed in this guide and it also comes with extra properties to really customize the fog.

Introduction

Whether you’re using it for a mechanic for your game or a simple addition to a build, how you use fog and how you make it look will heavily influence how everything else in your game will appear to the player.

What’s the problem?

Fog isn’t always used in a way that makes it look… well… foggy.

I think the image below may be similar to a sight you’ve seen before in games with heavy fog:

You may have also seen a worse counterpart:

What makes it so bad?

Simple: It just isn’t how fog works.

Fog in real life is pretty much like being inside a cloud that makes everything far away blend in with it (obviously depends on how strong the fog is, but you get the general idea).

While the fog shown above does limit vision, it doesn’t look realistic at all and still easily gives away the fact that there’s something there.

An example where this could really mix up gameplay is pretty much anything having to do with long range, whether it be adventure, combat, etc.

Here are a few examples:

Adventure

Lets say there’s a super secret castle that a player must find for a certain event. You decide to add some fog to make the castle harder to find. However, much like the base shown above, fog doesn’t really inhibit vision much and players are able to find the castle without fog being much of a problem, and the difficulty that fog was supposed to bring is now just a slight annoyance.

FPS

Lets say you make a game that puts a large focus on long range combat (or it could be a game like apocalypse rising where the map is huge and you can find stuff like sniper rifles)

Someone obtains a sniper rifle. It is late in the (ingame) day and they decide to return to their base. Suddenly, they see weird spots on a hill. Because of the very light fog, the silhouette of whatever the spots are is visible but they decides to take a closer look to identify what it is.

image

They pull out their rifle, aim, and realizes what those spots are.
I don’t think I need to illustrate the rest of the story for you :wink:

As you can see in both examples, the situation is pretty much the same: something meant to be covered by fog is only slightly blocked from view. For things easily identifiable like the castle, it completely deviates from the intended gameplay. For things like an FPS (or any competitive game thats open world/long range), it gives certain players in certain situations an unfair advantage/disadvantage.

This doesn’t just apply to actual games either. It could even be an issue in showcases, where the fog just looks off since the fog isn’t really foggy.

How can I fix it?

I will show two methods below, and list their pros and cons.

Method I: Inverted Sphere Mesh

Probably one of the most common and effective methods to do. All you have to do is get any part, insert a SpecialMesh, and under the Scale property make it a very large negative number. For games, you should make it a local part and weld it to something like the player’s torso.

Pros:

  • Requires very little work
  • Free to change fog to almost any colour you please regardless of skybox

Cons:

  • You no longer have access to skyboxes

There is a workaround @Conejin_Alt did that is able to remedy this however

  • If the sphere is too small, objects that could only be a few studs away from the sphere will be completely invisible

Method II: Skybox colour matching method

I personally use this one (although I may switch to Method I) since it allows me to keep things like skyboxes. It’s pretty much just a matter of visually matching up the fog with the skybox. However, this has quite a few more cons

Pros:

  • Unlike Method I, you are able to keep your skybox

Cons:

  • Can be difficult/annoying to set up, especially with cloudy skyboxes or day/night cycles
  • As seen above, tall structures are still very visible and you’ll either need a relatively flat map or very far away fog for this to work (in this case, you may have to move to Method I)
  • The colour of the fog is limited to what skybox you have

Conclusion

Congratulations, you’ve finally made it to the end! Hopefully you were able to read through it all. :slightly_smiling_face:

As you can see, fog really changes up your game. Whether it be a huge open world exploration, a disaterous environment full of bad weather, or just a simple showcase, fog is important to the outcome of how everything looks and even how things may work.

If applied with the correct work-arounds, fog can become a very powerful tool!

Thank you for reading this tutorial! It is my first, so let me know what you think of this!

If you have any more methods or tips on fog, be sure to let me know below! I’ll add them to the post :slightly_smiling_face:

32 Likes

Very nice, I can tell you put some work into that.

1 Like

With fog this wouldn’t work, but you can add textures or decals to the mesh, that worked for me, if i remember. :slight_smile:

1 Like

That’s actually a really good idea! I’ll add it into the thread :slightly_smiling_face:

This helped a lot. I’ve got a friend who really needs these tricks. He always has fog in his game and it looks horrible. Thank you! :slight_smile:

2 Likes

Fortunately you don’t have to go through this hassle anymore. Atmosphere has been released

2 Likes

I have addressed that already in the beginning of the thread

But yes, in the future I heavily recommend people switch to atmospheric fog :slightly_smiling_face:

2 Likes

Can you possibly make a tutorial on how to use the new atmospheric fog? I’m having a bit of trouble using it correctly, and this tutorial was very helpful for normal fog, but I would like to see how I would be able to use the atmospheric fog to its fullest potential.

Roblox already has a pretty short and straightforward tutorial about all the properties here, including examples of how the properties change how things look :slightly_smiling_face:

My only problem with atmospheric fog is that it blends very poorly with the skybox at low ‘fog’ values as you can see below. If your game has dynamic fog and you don’t want half the skybox popping in and out of existence you’re better off using the inverted sphere mesh trick with changing transparency based on fog distance.


A more advanced method for blending non-atmospheric fog with your world is by using an inverted cylinder mesh with a gradient transparency decal running up the sides. That’s what the video below uses.


Looks like this:
image

4 Likes