Edges getting pixelated

Questions
,
1

Hi,
I have been trying to get a solution for this. I am not able to get sharp edges for my meshes. Edges getting pixelated when zoomed out or while orbitcontrols. I am using post processing outlining and also using FXAA Shader for antialiasing. Also material.uniforms[“resolution”] is set. I don’t know why still I am getting pixelated edges. A reference image of the same is attached within
Capture

My canvas is not occupying complete window space (7/12 only), for better clarity, I am setting the pixelRatio as canvasWidth/canvasHeight instead of window.devicePixelRatio.

I saw some posts addressing this issue, but even after trying out the solutions mentioned I am still getting the same result
A sample code is given below. Thanks in advance

const viewWidth = document.getElementById("view").offsetWidth;
const viewHeight = document.getElementById("view").offsetHeight;
this.camera = new THREE.PerspectiveCamera(45, viewWidth / viewHeight, 0.01, 1000);
this.renderer = new THREE.WebGLRenderer({
			canvas: container,
			antialias: true,
			preserveDrawingBuffer: true,
			logarithmicDepthBuffer: true,
		});
this.composer = new EffectComposer(this.renderer);
		this.renderPass = new RenderPass(this.scene, this.editorCamera);
		this.composer.addPass(this.renderPass);
		this.outlinePass = new OutlinePass(new THREE.Vector2(viewWidth, viewHeight), this.scene, this.editorCamera);
		this.outlinePassForAddons = new OutlinePass(new THREE.Vector2(viewWidth, viewHeight), this.scene, this.editorCamera);
		this.composer.addPass(this.outlinePass);
		this.composer.addPass(this.outlinePassForAddons);
		this.outlinePass.hiddenEdgeColor = new THREE.Color(0xffffff);
		this.outlinePassForAddons.hiddenEdgeColor = new THREE.Color(0xffffff);
		this.effectFXAA = new ShaderPass(FXAAShader);
		const pixelRatio = this.renderer.getPixelRatio();
		this.effectFXAA.material.uniforms["resolution"].value.set(1 / (viewWidth * pixelRatio), 1 / (viewHeight * pixelRatio));
		this.composer.addPass(this.effectFXAA);