How to achieve this effect? (viewportframe)

Hi Devs, Nico here once again.

This time ima go right to the point, i’ve been trying to achieve this kind of effect where there’s a totally different environment. (such as the sky and the ships that can only be seen inside that portal)

Basically like a portal.


I know this can be done by using viewportframes, but the result i’ve recived is not the one i’m looking for (at least with what i’ve tried)

What i did basically is just set up a part with a viewportframe (size 1,0,1,0) inside a surfacegui and inside the vpf i put a red block

That’s okay, but when i try moving the cube, it wouldn’t move in the viewportframe, and that’s not what i’m looking for.

Btw the vpf camera is the current camera.
image

As a final fact, when i drag the vpf to a screengui and then drag it back to the surfacegui it will be at the new position, but again, that’s not how i want it to be done.

So, is there any way to achieve this? If there’s one that requires no coding or a fix to this problem that would be awesome and you’d help me a lot :pray:

Peace :vulcan_salute:

OK, I will assume the things below:

  1. Players can not go through the portal
  2. You have intermediate understanding of scripting and Gui workflows
  3. The portal have to be performance friendly for both clients and server
  4. Assume the example you showed is from Fortnite?
  5. Assuming this is what you want:

A brief understanding:
This can get very technical but I will try to keep it in casual, beginner friendly terms. The effect/technique that Fornite used to create the portal you see is formally and technically known as “Parallax Occlusion”. Parallax Occlusion is used for an optimized method (not perfect) of rendering complex 3D geometry in a 2D dimension by having the computer to pre-calculate and simulate the depth buffer (distance between objects in the scene), lightings reflections base on material of the object and all the 3D info of the 3D object onto the player’s camera angle. in other words the portal you see are not even real!

The problem with your current solution:
The way you are handling this will cause significant lag and undesirable result.

The solution:
Now we know that we need to make parallax occlusion, how though?

  1. Have a set up like this:
    image_2023-12-06_145147098

  2. Create a script that change the ImageLabels position base on the player camera every frame that the game is run in a for i, v loop.

And TADA! that thing you want to make is done. Keep in mind that if you want the portal to be big, you would have to do a lot of samples (imageLabels) for the portal so that it doesn’t result in some unwanted artifact.

Check out this thread, specifically the reply I linked to:

(Some good stuff below the reply too, like bug fixes)

Just a heads up, Roblox can’t do portals the same way that Unreal/Fortnite does (separate rendering stacks), so Roblox is basically inherently less efficient. In addition, the resolution of the output is limited by the aforementioned inefficiency, and Roblox has capped the resolution in advance.

Hey! Thanks for your help, though i have to say that’s not how i want it to be done, a friend of mine made something like that but i have no idea what he did to achieve that.

Could you take a look at the video? Maybe it’ll help you understanding what i’m trying to achieve.

Link: https://twitter.com/DevelopLogan/status/1726049724174573999

Already knew about that post, but it requieres a lot of scripting, and i’m not that good at it yet, so i want an easier way if possible.

Thank you though!