CameraUtils.frameCorners causing Reflector texture stretching


I’m using the Reflector in a scene that I render to a WebGLRenderTarget and show that texture on a portal.

When I move the player camera, stretching occurs in the resultant render (or perhaps just the texture containing that render), at certain positions. The effect can be seen in the attached images, and in this video:

The issue seems to only occur when the camera is configured using the ThreeJS CameraUtils ‘frameCorners’ method to correctly size the portal camera’s bounds. Also, changes in the stretching only seem to occur when I strafe, i.e. moving both local and remote cameras along their left/right vector.

This method is used by one of the threeJS portal examples. If I don’t utilise it, the remote scene’s projection is far from correct, so I can’t just proceed without it. So I need to work out what’s wrong and try to fix it, or find an alternative.

This method has the following comment above it in the source:

Set a PerspectiveCamera’s projectionMatrix and quaternion
to exactly frame the corners of an arbitrary rectangle.
NOTE: This function ignores the standard parameters;
do not call updateProjectionMatrix() after this!

Perhaps this leads to there being a missing step required by Reflector.js. I also tried using this custom reflector component but I end up with the exact same issue.

Here is an excerpt from Reflector.js that I feel might be the area where the stretching occurs, but I’m not sure.

virtualCamera.projectionMatrix.copy( camera.projectionMatrix );

// Update the texture matrix
    0.5, 0.0, 0.0, 0.5,
    0.0, 0.5, 0.0, 0.5,
    0.0, 0.0, 0.5, 0.5,
    0.0, 0.0, 0.0, 1.0
textureMatrix.multiply( virtualCamera.projectionMatrix );
textureMatrix.multiply( virtualCamera.matrixWorldInverse );
textureMatrix.multiply( scope.matrixWorld );

Any help or thoughts are appreciated, thanks.

1 Like