Three.js: WebGL Mirror Example Artifacts

[WestLangley]

Artifacts may be reproduced by zooming in and moving the camera a bit.

https://threejs.org/examples/webgl_mirror.html

Three.js version

• [ x ] Dev
• [ x ] r86

Browser

• [ x ] Chrome

OS

• [ x ] macOS

[RemusMar]

Indeed.
Also see this topic: https://github.com/mrdoob/three.js/issues/11885
At the end I get the feeling the Mirror is not properly implemented.

[vanruesc]

The main camera's aspect ratio is never copied to the mirror camera.

// "examples/Mirror.js" (lines 142-146)
mirrorCamera.near = camera.near;
mirrorCamera.far = camera.far;
mirrorCamera.updateMatrixWorld();
mirrorCamera.updateProjectionMatrix();

Should be changed to:

mirrorCamera.updateMatrixWorld();
mirrorCamera.projectionMatrix.copy(camera.projectionMatrix);

I'll send a PR for this later!

Another problem with the mirror (and the planar ocean) is that it doesn't seem to work when thelogarithmicDepthBuffer is enabled. Oblique near plane clipping messes with depth and I never found a solution for this. I wish WebGL had glClipPlane 😞

[mrdoob]

@vanruesc I was messing with the code so I implemented it directly. Many thanks!

[WestLangley]

@mrdoob If you are still messing around, I think there is room for simplification...

//mirrorCamera.up.set( 0, - 1, 0 );
//mirrorCamera.up.applyMatrix4( rotationMatrix );
//mirrorCamera.up.reflect( normal ).negate();

mirrorCamera.up.set( 0, 1, 0 ).applyMatrix4( rotationMatrix ).reflect( normal );

[mrdoob]

@WestLangley Thanks!