Three.js: OutlinePass doesn't work with pixel ratio 2

[jack-jun]

In the outline pass example, the pixel ratio is set to 1.
https://github.com/mrdoob/three.js/blob/master/examples/webgl_postprocessing_outline.html#L161

The scene is fuzzy and if we comment the line and use the device's pixel ratio, the scene is squeezed to the left bottom corner as the following screenshot:

Three.js version

• [ ] Dev
• [x] r84
• [ ] ...

Browser

• [ ] All of them
• [x] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [x] All of them
• [ ] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

[mrdoob]

/ping @spidersharma03

[spidersharma03]

I will take a look

[proteamer]

It looks like EffectComposer doesn't handle pixelRatio which set in WebGLRenderer when creates WebGLRenderTarget.

I suggest to use next workaround:

1. Create custom set size handler for effectFXAA:

effectFXAA.setSize = function(width, height) {
    this.uniforms.resolution.value.set(1 / width, 1 / height);
};

1. Call composer.setSize with premultiplied width and height during initialization and window resizing:

var size = renderer.getSize();
var pixelRatio = renderer.getPixelRatio();
composer.setSize(width * pixelRatio, height * pixelRatio);