Screen is getting blurry and pixelated while using postprocessing?

Questions
1

Hi fellow guys, anyone get this issue with postprocessing in threejs.
with postprocessing
with-postprocessing
without postprocessing
without-postprocessing

my code in below:

  this.m_Composer = new EffectComposer(this.m_SceneManagementSystem.Renderer);
        this.m_RenderPass = new RenderPass(this.m_SceneManagementSystem.Scene,this.m_SceneManagementSystem.Camera);
        this.m_Composer.addPass(this.m_RenderPass);
        const outlineEffect = new OutlineEffect(this.m_SceneManagementSystem.Scene,
            this.m_SceneManagementSystem.Camera,
            {
                edgeStrength: 100,
                visibleEdgeColor: 0x35d59c,
                resolutionX: 512*2,
                resolutionY: 512*2,
            });
        const outlinePass = new EffectPass(this.m_SceneManagementSystem.Camera,outlineEffect);
        this.m_Composer.addPass(outlinePass);

Thank you in advance :smiley:

2

The original anti-aliasing will not take effect after using the post-processing pass, you need to add anti-aliasing manually.
Here are two demos of post-processing antialiasing.
fxaa
smaa

4

I tried this way but it’s still getting blurry.

5

How did you use it, can you provide a simple example to illustrate your problem?

1 Like
6

this my setup
Create renderer

        // create threejs scene
        this.m_Scene = new Scene();
        this.m_Renderer = new WebGLRenderer({
            powerPreference: "high-performance",
            antialias: false,
            canvas: this.m_CanvasElement
        });
        this.m_Camera = new OrthographicCamera(
            - this.m_Renderer.domElement.width / 2,
            this.m_Renderer.domElement.width / 2,
            this.m_Renderer.domElement.height / 2,
            - this.m_Renderer.domElement.height / 2,
            -2000,
            2000
        );

Using fxaa
// using fxaa

        const fxaaPass = new ShaderPass(FXAAShader);
        const pixelRatio = this.m_SceneManagementSystem.Renderer.getPixelRatio();
        let x = 1 / (this.m_SceneManagementSystem.Canvas.offsetWidth * pixelRatio);
        let y = 1 / (this.m_SceneManagementSystem.Canvas.offsetHeight * pixelRatio);
        fxaaPass.material.uniforms['resolution'].value.y = y;
        fxaaPass.material.uniforms['resolution'].value.x = x;
        this.m_Composer.addPass(fxaaPass);

i removed outline pass, this time i was using render pass → fxaa pass.
The my result:
without fxaa
without-fxaa
with fxaa
with-fxaa

i suprise that the result with fxaa is worse than without using it

7

Are these settings？

renderer.setSize( container.offsetWidth, container.offsetHeight );
composer.setSize( container.offsetWidth, container.offsetHeight );
2 Likes
8

Thank you, it’s resolved. I missed this line.
composer.setSize( container.offsetWidth, container.offsetHeight );

9

You’re welcome! :beers:

1 Like
10

along with composer.setSize()

you can also try using

composer = new EffectComposer(renderer, {
			multisampling: Math.min(4, renderer.capabilities.maxSamples),
		})

to get anti-aliasing

1 Like