First person camera world matrix issue (in THREE.js and webGL)

Question

I'm trying to create a Portal-like effect in webGL using THREE.js.

I have two scenes connected by a pair of portals. The view of the 2nd scene in rendered inside the 1st portal using stencils and some matrix math

This is the code I use to determine the view in the portal:

function getPortalViewMatrix(cam, src, dst)
{
 var inverseCamToSrc = new THREE.Matrix4().getInverse(cam.matrixWorld).multiply(src.matrix);
 var rot = new THREE.Matrix4().makeRotationY(Math.PI);
 var portalViewMatrix = dst.matrix.clone().multiply(inverseCamToSrc).multiply(rot);

 return portalViewMatrix;
}

This setup worked as intended until I added first person camera controls, taken from this example.

Now, the view of the second scene is wrong whenever I rotate the camera (but remains correct if you only walk around), as you can see in here (only works in Chrome). The full source is also available there.

The PointerLockControls class I use places the Camera in a 'rig' to avoid gimbal lock:

yawObject -> pitchObject -> camera

The yawObject is rotated on the y axis. The pitchObject is rotated on the x axis. The camera itself remains fixed as a child of the pitchObject.

The PointerLockControls work very well, but because of this setup the matrixWorld property of the camera does not seem to represent the same values as with a free floating camera. And my understanding of matrix math is lacking to fix this problem.

I've tried different things like inverting the various matrices involved, using quaternions (decomposing camera.matrixWorld) but that has just been an exercise in random trial and error on my part.

Can anyone help me to understand this problem, and perhaps offer a solution?

Any help would be greatly appreciated.

Answer 1

Assuming your jsfiddle code is what needs fixing, try:

function getPortalViewMatrix(cam, src, dst)
{
 return dst.matrix.clone().multiply(cam.matrixWorld);
}

That syncs the two worlds.