Posted in Uncategorized

EffectComposer – low resolution in retina screens

   January 6, 2021  1 Comment on EffectComposer – low resolution in retina screens
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
  • r82
  • …
Browser
  • All of them
  • Chrome
  • Firefox
  • Internet Explorer
OS
  • All of them
  • Windows
  • Linux
  • Android
  • IOS

Author: Fantashit

1 thought on “EffectComposer – low resolution in retina screens”

  1. 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.

Comments are closed.