Portal Cropping Using ViewportFrames (ClipsDescendants issue)

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.

I see. So about your explanation you convert the workspace camera in terms of B which is the part the viewport camera cframe is, and part a is the adornee of the surface gui?

I’ve been having problems with this for days.

Making a portal game and I was impressed by what you did so i tried implemented it as my own. image

But i didn’t quite understand your explanation. If you could, please explain it in a way of making the blue portal the adornee of the surfacegui and the viewport camera cframe be the red portal, I would greatly appreciate it.

The method I’m using doesn’t use surfaceGuis, it relies on a billboardgui and glass to simulate cropping camera views to a specific region on the screen.

Trust me, the transformations I’m using alone won’t suit your needs for surface guis, since the actual perspective of part surfaces will distort the view. I suggest taking a look at other modules like Egomoose’s since they account for this distortion.

1 Like