Portal problems

Greetings babylonians!

Having trouble with this simple portal mock up:

[https://playground.babylonjs.com/#1OEPUZ#5]

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.

J.W

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:

https://playground.babylonjs.com/#1OEPUZ#6

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!
You’re AMAZING!

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:

https://playground.babylonjs.com/#1OEPUZ#7

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!

J.W

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

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

Blockquote

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.

Thanks,

Jose

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:

Hey,

Not sure if I should add to this thread, or start a new one, but essentially I’m trying to do the same thing with portals and I don’t have much of an understanding of matrix.

Here is what I’ve tried to do to replicate the function from above.

    const redMatrix = red._worldMatrix;
    const blueMatrix = blue._localMatrix;
    const playerCamMatrix = playerCam._worldMatrix;

    const matrix = redMatrix
      .multiply(blueMatrix)
      .multiply(playerCamMatrix);

    var position = new Vector3();
    var quaternion = new Quaternion();
    matrix.decompose(undefined, quaternion, position);

    portalCam.position = position;
    portalCam.rotationQuaternion = quaternion;

I’ve tried a combination of getWorldMatrix() and getWorldMatrix().invert(), but I’m pretty much shooting in the dark and can’t really find anybody else trying to do the same thing in Babylon.

I think where I’m going wrong is trying to use worldMatrix and localMatrix, but in Unity localToWorldMatrix and worldToLocaMatrix is something different to both, but I’m really not sure!

Is there anyone who understands the Unity functions and knows how to replicate the functionality in Babylon?

Thanks,
Chris

localToWorldMatrix should be the result of computeWorldMatrix ( TransformNode | Babylon.js Documentation (babylonjs.com)) and the worldToLocalMatrix is the inverse of this. I agree that it can be confusing with the differences in naming between programs, but this worldMatrix is basically what takes the object’s vertices from its local space to the scene’s space (which is named model matrix here):

1 Like

Hey,

Thanks very much for you answer. I think I’m on the right track. I’m having 2 issues though so I’ve put together a playground.

Playground

In the playground, there are 2 cameras. If you enable the gizmos you can see that one is pointing at the blue portal, what I’m trying to do is make the the red camera look at the red portal in the same way, relatively. But I’ve definitely done something wrong. It sort of tries, but if you rotate/translate the “Blue Camera”, you can see it’s pretty wrong! Any idea what I’m doing wrong?

Thank you for your help!
Chris

Hi Chris,

Here’s the solution I came up with:

Thanks,

J

1 Like

Ah that’s great, thank you very much for sharing! Seems like I was sort of on the right tracks at least!

Thanks again,
Chris