How to increase the post-processing resolution in three.js?

1.2k views Asked by Michaël At 25 June 2018 at 15:15

I have a shader working on a scene (using the EffectComposer method), with a simple cube rotating in it.

When I only render my renderer, the cube has high resolution :

renderer = new THREE.WebGLRenderer(); 
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(window.innerWidth, window.innerHeight);

When I render my composer without any setting, my shader is working but my cube get pixelated. So I tried this : https://github.com/mrdoob/three.js/issues/10238

Here it is ( I set the size of the composer depending of the pixel ratio screen value) :

let pixelRatio = window.devicePixelRatio || 0;
composer.setSize(window.innerWidth * pixelRatio, window.innerHeight * pixelRatio);

But after this my scene become very small as you can see bellow (black screen is my entire window).

Does anyone has any leads of what my problem is ? Thank you

TechQA.