Poor resolution in Reflector?

Questions
1

Is it normal that objects reflected in my Reflector seem to have poor resolution? I wonder that is only the angle? It does not get better if I increase width- or heightSegments of the box that is reflected, for example.

See the image. Many thanks!

code bit:

  mirror = new Reflector(planeArtefact, {
    clipBias: 0.003, 
    textureWidth: window.innerWidth * window.devicePixelRatio,
    textureHeight: window.innerHeight * window.devicePixelRatio,
    color: 0x777777, 
    recursion: 4,
  });

Screenshot 2021-05-25 at 10.13.28
Screenshot 2021-05-25 at 10.13.28776Ă—679 95.4 KB

2

The reflector’s render target is not anti-aliased. You might get a more sharp result if you modify the Reflector class to use WebGLMultisampleRenderTarget. However, it won’t work on devices which only support WebGL 1 (e.g. all iPhones or iPads).

3

Many many thanks, I will look into this!

4

Does it make sense to update Reflector.js to use WebGLMultisampleRenderTarget in the examples sources?
Or make it a parameter in Reflector constructor?

5

Maybe we could introduce a new antialias option. If set to true, the reflector would change the render target type.

For consistency, this change should also be done for Refractor.

1 Like