FXAAPass causing blurry rendering

For some odd reason my render pass is coming out very blurry after applying an FXAA pass. I am passing my canvas that I grab from the screen and applying it to the renderer. The size is correct but the render is almost unrecognisably blurry.

this.canvas = document.getElementById('threejs') as HTMLCanvasElement;
export class Renderer extends THREE.WebGLRenderer {
    constructor(threeCanvas: HTMLCanvasElement) {
        super({ canvas: threeCanvas });

        this.setPixelRatio(window.devicePixelRatio);
        this.setSize(threeCanvas.clientWidth, threeCanvas.clientHeight);
        this.setClearColor('#777777');
        this.shadowMap.enabled = true;
        this.shadowMap.type = THREE.PCFSoftShadowMap;
    }
}

export class Composer extends EffectComposer {
    outlinePass: OutlinePass;
    private renderPass: RenderPass;
    private FXAAPass: ShaderPass;

    constructor(scene: THREE.Scene, perspectiveCamera: THREE.PerspectiveCamera, canvas: HTMLCanvasElement) {
        super(new Renderer(canvas));

        const size = new THREE.Vector2(this.renderer.domElement.clientWidth, this.renderer.domElement.clientHeight);
        this.outlinePass = new OutlinePass(size, scene, perspectiveCamera);
        this.renderPass = new RenderPass(scene, perspectiveCamera);
        this.FXAAPass = new ShaderPass(FXAAShader);
        // tslint:disable-next-line: no-string-literal
        this.FXAAPass.uniforms['resolution'].value.set(1 / size.x, 1 / size.y);

        this.addPass(this.renderPass);
        // this.addPass(this.outlinePass);
        this.addPass(this.FXAAPass);
    }

    updateRaycaster(sizeX: number, sizeY: number) {
        this.outlinePass.resolution = new Vector2(sizeX, sizeY);
    }

    toggleAntiAliasing() {
        this.FXAAPass.enabled = !this.FXAAPass.enabled;
    }

    getSelectedObject() {
        return this.outlinePass.selectedObjects[0];
    }
}

Github repo in case issue is located elsewhere: https://github.com/GrimZero/Portfolio

Edit: Example of the issue can be seen here: https://grimzero.github.io/Portfolio/

Are you aware that this code does not honor the pixel ratio? Try it like so instead:

const size = new THREE.Vector2();
const pixelRatio = this.renderer.getPixelRatio();

size.x = this.renderer.domElement.clientWidth * pixelRatio;
size.y = this.renderer.domElement.clientHeight * pixelRatio;

Or you just do:

renderer.getDrawingBufferSize( size );

I was not aware it doesnt, but that does not seem to be the cause of the issue here. I should note that when I remove the FXAApass everything looks fine. But the canvas I am getting in this constructor is about 300 pixels wide somehow…

Edit: To be exact, the canvas is 400x189 at any point, even when I resize the screen. It would seem as though the problem lies within the canvas.

Archiv.zip (2.6 KB)

I’ve update composer.ts and threejs.component.ts so it’s a bit more clear when the size of the renderer and composer is set. At least it worked on my system.

One important thing: When resizing, you always have to use setSize() on the instance of WebGLRenderer and EffectComposer. Resizing just one object is not sufficient.

I am comparing the two files, checking where I went wrong so it doesnt happen again. I do wonder though, why have you changed the composer to first create an instance of the renderer beforehand? Is there a reason in particular for this, or just readability?

That one. It helped me to better understand the processes in your app. And since you have to resize both renderer and composer, I think it’s a bit more clear.

1 Like

Yeah that got it working, thx!

(Also a question, severely of topic) Do you have suggestions for my portfolio? I wanted to use a 3D-scene and have some user interaction to have a unique website. But am honestly pretty garbage at UI design. So any suggestions on that part are welcome, though I might need to make a separate thread somewhere to discuss that.

I’m not a big help there, either^^. In most cases, I’m searching the web for good web design and then try to adapt the idea to my own stuff. Or if possible, ask a designer for help.

2 Likes

Alright, asking developers about UI Design was a bit much to expect. I’m also an example of that ^^ I might have to reach out to fiverr, I could probably find someone there that can do some fixing on the design. I dont particularly mind paying for it either.