Portal problems

Greetings babylonians!

Having trouble with this simple portal mock up:


It looks like I’m getting my coordinates wrong.
I’m using an arc rotate camera, and for the portal material I’m using a render target texture, with a shader material to adjust the clipping. The portal seems back-to-front, and no amount of flipping/rotating in the world/camera coordinates, render texture or shader code being able to fix it.
Is this an issue with using an Arc rotate camera? I have tried free cameras, as well as matrix multiplications and quaternions to no avail, as they’re above my maths skill.

Could anyone please help with this? Can provide more information if needed.


p.s Love Babylonjs! A giant THANK YOU to the team!

I can not wrap my head around I am looking into :slight_smile:

Could you create a simpler repro ? maybe with only 1 object ?

@Evgeni_Popov in case you catch the issue

Yes, that would be better with a simpler PG, as I don’t know what we are supposed to see in the current PG(?)

Thanks for the fast response. Amazing!

Hopefully this helps:


I’m trying to re-create a simple portal master/slave camera set-up. The slave camera is rendering its output onto a “portal” texture, which is adjusted by a vert and frag shader.
I cannot get the two cameras to align with the portals properly, and problems rending from backfaces. I think it is my maths, rather than a problem with babylon.

Can elaborate more if needed.

Thanks again!

I’m not sure you can do two portals with a single RTT. I would imagine you need to perform two rendering, one for each portal?

Maybe this video can help: Coding Adventure: Portals - YouTube

1 Like

Thanks for the response!

I got two portals working with two RTT’s.

I’m now struggling with rotations.
I’m using transforNodes and parenting but can’t seem to get things to align. See:


In this pg, I have two “rooms”, one red, and the green one which is showing the inverse rotation needed for the camera. It starts off correct but slowly go out of alignment. I’m using 6 transformNode.roate() (one for each axis x 2) which doesn’t seem right. I’ve tried transformNode.rotation() but cannot get the second “green” room to align properly.

Are you ale to spot what I’m getting wrong?

Thank you so much!


Apologies for the late reply (and poor grasp of coding).
Had a look at the video, and this seems to be the key:

matrix = red.localToWorldMatrix * blue.worldToLocalMatrix * playerCam.localToWorldMatrix;
portalCam.SetPositionAndRotation (matrix.GetColumn(3),matrix.rotation);


He’s using some UNITY functions. Is there a BABYLON.JS equivalent of:

localToWorldMatrix - ??
worldToLocalMatrix - ??
SetPositionAndRotation .position .rotation ??
matrix.GetColumn(3) matrix.getTranslation() ??
matrix.rotation matrix.getRotationMatrix() ??

Any help would be appreciated.



1 Like

Hello! You can get the world matrix of a Node (camera, mesh, etc…) with computeWorldMatrix Node | Babylon.js Documentation (babylonjs.com), and the matrix itself can be inverted by invert Matrix | Babylon.js Documentation (babylonjs.com).

Position and rotation are the correct properties on Babylon. The third column of the world matrix is indeed the translation. For getting the rotation from a matrix you can use getRotationMatrix or decomposeToTransformNode Matrix | Babylon.js Documentation (babylonjs.com) :slight_smile:

Hello @J.W just checking in if you’d like any more help :slight_smile: