Three.js: THREE.Mirror reflected lights are not correct.

[looeee]

As you can see in this example the highlights of the object reflected in the mirror plane don't match up with the highlights on the object.

Three.js version

• [ x ] Dev
• [ ] r85
• [ ] ...

[WestLangley]

I don't think there is any reason why they should.

[RemusMar]

As you can see in this example the highlights of the object reflected in the mirror plane don't match up with the highlights on the object.

Remove the "keyLight" and use the Phong material.

[looeee]

@WestLangley I'm going to sit down with a mirror and check this out to convince myself for sure - but I don't think highlight would cut off like the one in my image in the real world. When the object is actually touching the mirror, I would expect the highlight to be continuous from the mirror to the object.

[mrdoob]

Changed the lights colors for clarity.

https://codepen.io/anon/pen/XazVmd

The blue light couldn't happen because the mirror would be occluding it (casting a shadow).

The green one... I don't know...

[WestLangley]

RIght. You can't draw inferences about the correctness of a model if your example is not physically possible.

[RemusMar]

Changed the lights colors for clarity.
https://codepen.io/anon/pen/XazVmd

Again: use the Phong material
You'll get much better results.

[RemusMar]

To close this subject:
https://threejs.org/examples/webgl_mirror.html
With Phong materials, Point lights and a decent setup, the Mirror reflected lights are correct.
cheers

[looeee]

@RemusMar using Phong material instead of PBR is a workaround, not a fix.

[RemusMar]

using Phong material instead of PBR is a workaround, not a fix.

The Phong material is a solution.

[makc]

@RemusMar nope, same shit:

maybe it is, indeed, correct? in the mirror, you see the object as if you would from below. if you rotate the scene to look up, there is same green spot you see in the mirror:

[looeee]

OK, I've spent quite a while looking at this and my conclusion is:

I have no absolutely no freaking idea anymore 😆

I'm going to leave this open, but if other people think it should be closed that's fine (apologies to the client who brought this to my attention, I tried!).

[RemusMar]

same shit

For this scene setup ...
As I said before, with Phong materials, Point lights and a decent setup, the Mirror reflected lights are correct.
Example: https://threejs.org/examples/webgl_mirror.html

[RemusMar]

As I said before, with Phong materials, Point lights and a decent setup, the Mirror reflected lights are correct.
Example: https://threejs.org/examples/webgl_mirror.html

Even more: if you replace in that example the Phong with Standard material you will get WRONG highlights and WRONG mirror reflected lights.
So the Standard material is not properly implemented.

[RemusMar]

In this setup I get perfect results for both materials:
http://necromanthus.com/Test/html5/Lara_mirror.html
Click on stage to switch between the Phong and Standard materials:

[makc]

@RemusMar we are all happy you have perfect results in that setup, but it's a bit like saying other people do not starve because I am not hungry - this issue was not about that setup )

[jchen10]

I feel this is indeed right. The highlight area on an object is specific to the direction of incoming lights and the position of observer's eyes. Given the lights and object are both fixed, the highlight area position changes on the surface of object as the observer moves. Regarding highlight area reflected in mirror, we can simply imagine the observer just walked inside opposite side of mirror to observe. So the highlight area in mirror is different from real world. This seems a bit anti-intuitive. But you can actually verify it by taking something before a mirror.

[WestLangley]

There is no bug demonstrated here. You need to create a physically-possible example to demonstrate a bug -- and that includes not having light sources emanating from behind the mirror. It also helps to avoid lights that are over-bright.