Fog is rendering over my BillboardGuis, AlwaysOnTop is not an option..?

Hi!

Introduction
So basically I’m working on a module to create custom celestial bodies and constellations in the sky for my game (I plan to open-source it to the public eventually) and it’s working so far but I found one huge problem.

How I’m doing it
How it works is I have a part inside of the player’s camera on the client that is constantly being positioned to the position of the camera (it never gets rotated), and I put attachments inside of them and use directions with far away distances to give it the appearance of being attached to the sky. Inside of these attachments are BillboardGuis that face the camera with the image of what I want to be shown to the player.

The problem
The problem is that with these far distances, my game has fog in lots of places of the game and it is overlapping the images of the BillboardGuis. The only way I’ve found to avoid this issue is to toggle AlwaysOnTop, but then the images can appear over parts and I have no clue about how I could keep AlwaysOnTop enabled without some hacky and ugly looking masking attempts.

AlwaysOnTop disabled:
image

AlwaysOnTop enabled:
image

I heard from someone about just making my own fog system but I’m unsure of how I can pull off the smooth circular fading effect Roblox has over using tons of transparent parts which wouldn’t be perfect and might cause performance problems.

EDIT: Found related post with a solution very similar to what I had proposed. I suggest you check it out:

My Original Post

Hypothetical Solution:

Hey, sorry for not being able to give a definite answer, but I do have a hypothesis.

You could put the BillboardGui near the players character and linearly scale down the size so it appears to look “big” from “far away” (it is just small and close).

I am not entirely sure how to do that in code though, but it sounds like you might want to normalize the vector representing the GUI and then divide the size by the magnitude of the vector.

Might be something like this…? (I really don’t have any idea)

newPosition = clientPosition + oldPosition.Unit
newSize = size / oldPosition.Magnitude
1 Like

Thanks for the idea. I do like the sound of that but the only problem about that would be that it still might have the problem of appearing in front of parts since it is near your character/camera instead of actually behind them thousands of studs away (if I got that right) so it might give me the same result as if I enabled AlwaysOnTop.

I was thinking about trying something like a ViewportFrame over my screen to separately render the bodies onscreen without the fog but I don’t think that would solve the problem with the bodies appearing over the parts in workspace?

Edit: Roblox does not support billboard guis in viewport frames.