Portal Doorway View

I’m working on this portal device but can’t get the viewer to look quite right. It’s just rendering a camera to a plane and adjusting its rotation based on the angle between the player and portal. Is this just a limitation of this kind of approach or is there something that can be adjusted to make it look natural?

I also tried sliding it along one axis depending on player position relative to the portal but that doesn’t look right either.

https://playcanvas.com/project/702038/overview/portal-door

Project is 404/private

You will have to make the camera position and rotation for the portal be the same relative to the player’s position and rotation to the other portal.

D’oh. I’m sure I changed that to public. Must have forgotten to press Save. Should be fixed now.

I’m watching some YouTube tutorials for UE and Unity and starting to figure out the more advanced parts of what I should be doing. Translating these techniques to PlayCanvas is a bit more difficult though. I now at least see how the mismatched FOV from a fixed camera at the portal coordinates causes the first major problem.

This one has been paticularly helpful: https://www.youtube.com/watch?v=_SmPR5mvH7w

There’s a step they all use in which the remote camera view gets trimmed to erase everything but the portal rectangle, rather than everything the camera sees from behind the portal structure, using a shader or other inbuilt method.

Translating this part to PlayCanvas looks like it might be a bit troublesome. Would the scissorRect camera method be a good starting point or is a shader likely to be necessary?

I think this forked project is now correctly(ish – coordinates seem to be slightly off) doing the part leading up to that step. From what I understand the portal should only be displaying the part inside the black boundaries in order for the effect to work properly.

https://playcanvas.com/project/737449/overview/portal-door-experiment

Hmm… This is not something I’ve done before. The scaling up of the render texture shown in the video didn’t explain how the size and scale is defined.

I’m tempted to give this a try myself if I get a chance.

I’m watching this video which gives a hint regarding “screen space”.

The actual portal view should be in exactly the same position on both cameras. So I think the idea is to only render the pixels covered by the texture on the remote camera in exactly the same position on the main render, rather than the whole remote view being squished into the texture.

But again, the difficulty is translating that process into PlayCanvas.

Still not getting anywhere trying to map this texture.

What I have so far is this:

I need the section in the black frame to cover the texture with the rest ignored. This should just be a matter of drawing the texture according to screen coordinates rather than the plane’s coordinates, effectively masking out everything except what the other camera sees through the portal exit frame which should match up with what the main camera sees through the portal entry.

Any ideas how to accomplish this, presumably using a shader?

Embarrassingly, I just realised we have a portal engine example here: http://playcanvas.github.io/#graphics/portal.html

Interesting solution, putting the remote location in the same 3D space on a different layer. I didn’t know about this stencil thing.

It’s a different kind of portal than I was working on but it’s much less hacky for fixed locations. I’ll attempt to dismantle and reimplement it in editor form.

Hopefully for remote portals it should be as simple as layering two camera views with a stencil on the main one showing through the view through the exit from the other. Though I may be misunderstanding how that works.

one thing I see is that the rendered view needs to be flipped on the y axis by 180
also label which camera goes where like portal 1 cam or portal_2_cam

There was a similar discussion here … see my suggestion there:

likely not directly relevant, as the other user wanted to do a mirror like portal, but could be something interesting.

maybe try using this video

I believe I fix your problem
https://playcanvas.com/editor/scene/1674531