How do I crop/mask a billboard GUI over a surface?

Notes: **NOT possible with SurfaceGUI’s, see

Hello everyone! I’ve been trying to solve a problem I have for hours now, but I am unable to find a solution.
Here’s the situation:

Notice the billboard GUI, I need to find a way to “crop” it, so that only the sections that overlap with the red part, are visible.
Note: Portals are not possible using SurfaceGui’s

I need to do this to prevent the overlapping issues shown in the following video

I know it is possible because another user already did this using glass blocks, however, even after trying for hours, I cannot reproduce the effect, see the post:

Any ideas?
You can play with the rendering here:

4 Likes

If you have the contact info about the other user who already accomplished this i suggest DM’ing that user first

1 Like

I tried, there’s no response yet, and the deadline is approaching.
Plus, I was told by a few people that Emilarity does not use the forums anymore.

1 Like

Tried using a SurfaceGui instead of a BillboardGui?

2 Likes

Yep, for days. It’s impossible without shaders.
This is only possible using BillboardGui

1 Like

The real answer is a surface Gui with a solid amount of perspective math’s.

I don’t see there being an easy way to cheat it with billboardgui’s

1 Like

It is not possible using SurfaceGui’s.

3 Likes

It definitely is.

The main difference there is that the walls make it impossible to view the frame at an angle.
The problem here is that distance makes things smaller/bigger, so the side that is closer to you will appear distorted and bigger, which is what makes it impossible in the first place.

The second thing to note here, is that there’s clearly some distortion going on in that video, I tried for many days to make it work on SurfaceGUI’s, but without success.

What makes billboards special is that they always face the camera, meaning that there wont be any distortion. In addition, setting the viewportframe size to the player’s viewport size makes it so that it will always appear to cover the whole screen (when ClipsDescendants is off), which is one of the main requirements for portals, see here:

Also, when approaching the surface, the SurfaceGUI will have to shrink to a point before you actually reach the wall, or else, it will look like you are running into a flat painting.

Since the SurfaceGUI is prone to perspective distortion (The side further away seems smaller), it means it will never be able to perfect cover the whole screen, unless we get a way to distort it back, for example, by using shaders. This is the effect I am talking about:
image

TL;DR
Only if you limit the viewing angles like in the video, and even then, there will still be some distortion, plus the GUI will shrink to a point before you reach the surface, if you don’t do this, it will look like you are slamming into a flat painting.

1 Like

Sorry for the possibly noobish reply, but is this what you’re looking for? https://developer.roblox.com/api-reference/property/SurfaceGui/AlwaysOnTop

Nope. And don’t worry, I’ve also felt like that in some threads.

What if you instead used the X-Ray effect of glass? This might cause more lag do to more parts, but if you set the transparency of parts to 0.01 and put them behind semi-transparent glass, the glass acts as a scope sort of and allows them to be viewed. If you maybe put parts behind the glass and set them to non can collide perhaps it could also work as a solution.

Yup. The GUI can be cropped using glass blocks, which is what Emilarity did. However, what I need help on, is figuring out a way to use the glass to precisely crop the image.

In addition, it must not interfere with the GUI of other portals.

Ah, somebody just explained it way better than I could:

How was the math of the camera achieved to get the studs lined up?