Portal Cropping Using ViewportFrames (ClipsDescendants issue)

Glass parts could serve as an alternative for cropping.

Most in-world based gui instances won’t render the portion where the glass overlaps.

I was hoping for a solution other than glass since Roblox stated they intend to fix this later… I may end up having to rely on this for now though since ClipsDescendants isn’t an option and I can’t even get the rotations right for now.

I am having the exact same problem over here!
I need to make it so that only the area of the BillboardGUI that is over a part, is visible.

Like that, only the portion of the Billboard GUI that appears to be over the RED part should be visible.

Oh also, cropping the GUI using frames? I would have never thought about that tbh! I’ve been trying to use glass blocks.

Are you sure a surface gui couldn’t work if you moved the camera?

Yep, it won’t work.

1 Like

Do you mean something like this?

9 Likes

Yup, not possible using surface GUI’s.

1 Like

Yes, this is the effect I want… I’m trying to not use glass since Roblox said not to rely on this.

2 Likes

How did you do this? I would love to know.

1 Like

In the video, this is accomplished by making the billboardGui cover the entire screen, and setting it a few studs in front of the camera.

Then, the viewport contains the part of the world you want to render, with the viewport camera being constantly updated to be relative to the player’s camera

After that, the glass (2000 x 2000 x 0.1) is arranged in a pattern (like shown in the video), and relocated to a plane right in front of the camera, parallel to the normal of the glass.

4 Likes

This is really cool! Mind explaining a little bit more?

1 Like

Sure. What would you like more info on?

1 Like

Before you use the glass trick, just remember that glass also blocks particles, water, billboard/surface guis, neon glow, and semi-transparent parts from being rendered.

3 Likes

How did you update it to be relative to the player’s camera, I am not very good at maths.

Are you talking about the billboardGui, the glass, or the viewport camera?

1 Like

The viewport camera

Example
So lets say that we have the workspace Camera, A, B, and we want the viewport Camera’s CFrame to be like in the picture.

First have to find what the CFrame of the workspace Camera is, relative to the CFrame of part A, or simply “line1” as shown in the picture.

Roblox already has built in CFrame functions to accomplish this, specifically :toObjectSpace(). So, line1 would be partA.CFrame:toObjectSpace(workspaceCamera.CFrame).

Next, we want to transform it to in terms of B. Line 2 is going to be the same as line 1 since we want the viewport Camera in terms of B to be the same as the workspace Camera in terms of A. So all you really need to do next is to apply line1 (the value we got from before) to partB’s CFrame, or basically partB.CFrame * line1

In summary, to get the viewport Camera thats needed, it would be the following:
viewportCamera.CFrame = partB.CFrame * partA.CFrame:toObjectSpace(workspaceCamera.CFrame)

(Yes, you could do viewportCamera.CFrame = partB.CFrame * (partA.CFrame:Inverse() * workspaceCamera.CFrame). The former was just easier to explain.)

10 Likes

Thank you!

So part A is the part the viewportframe is on?

Not on part A, the viewportframe is on a separate billboardgui that covers the screen.