Three.js: EffectComposer - low resolution in retina screens

Created on 29 Nov 2016 · 2Comments · Source: mrdoob/three.js

Description of the problem

I'm using EffectComposer to add post processing shaders to a renderer, and although the shader works fine, in retina screens (like iOS) the resolution is low and edges are pixelated… The renderer's pixelRatio and size were set and everything seems ok.

All the shader post-processing examples available on https://threejs.org/examples/?q=postprocessing also have the same low-resolution. An example is https://threejs.org/examples/?q=postprocessing#webgl_postprocessing_nodes (the edges look blurry on iPhone).

Is that a WebKit bug or something that can be fixed on Three.js by setting the pixelRatio some other way?

Thanks

Three.js version

[ ] Dev
[X] r82
[ ] ...

Browser

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

OS

[ ] All of them
[ ] Windows
[ ] Linux
[ ] Android
[X] IOS

Source

pedrofranceschi

Most helpful comment

Fixed… For some reason I needed to multiply the composer's size by devicePixelRatio.

let pixelRatio = window.devicePixelRatio || 0;
this.renderer.setSize(width, height);
this.composer.setSize(width * pixelRatio, height * pixelRatio);

Now it's working beautifully.

pedrofranceschi on 29 Nov 2016

👍10 😕1

All 2 comments

Fixed… For some reason I needed to multiply the composer's size by devicePixelRatio.

let pixelRatio = window.devicePixelRatio || 0;
this.renderer.setSize(width, height);
this.composer.setSize(width * pixelRatio, height * pixelRatio);

Now it's working beautifully.

pedrofranceschi on 29 Nov 2016

👍10 😕1

I just ran into this, too, FWIW. My effects look way better if we set the render target size to be the full canvas resolution (i.e. the CSS size multiplied by the pixel ratio).

The latest version of EffectsComposer checked in sets the target size to renderer.getSize() (which is the smaller size). Is there a great reason not to match the full actual resolution of the renderer?