I want anti-aliasing of the outlines.

[workamiracle]

I think these outlines are too rough.
Is there anyway to activate anti-aliasing for the outlines?

[OmarShehata]

You can try to add antialiasing as a post process after the outline shader runs. In ThreeJS there is a built-in FXAA shader, here's an example using it:

webgl-outlines/threejs-outlines-minimal/src/index.js

Lines 59 to 64 in 42e2103

	const effectFXAA = new ShaderPass(FXAAShader);
	effectFXAA.uniforms["resolution"].value.set(
	1 / window.innerWidth,
	1 / window.innerHeight
	);
	composer.addPass(effectFXAA);

I think another idea that may produce better results is MSAA? To render it to a bigger offscreen canvas and then scale it down when rendering to the final screen

[workamiracle]

I am already using FXAA and don't know how to use MSAA. Could you provide some sample codes?

[OmarShehata]

I unfortunately do not have a code sample for this. My understanding is you would need to set up the post process to render to a framebuffer that's larger than the screen (maybe 2x as large?) and then scale it down when rendering to the screen, and that may produce better results.

Otherwise, as far as I can tell ThreeJS can do MSAA for you but only when rendering directly to a screen, not a framebuffer like we're doing here for post processing? Not 100% sure.

[workamiracle]

Thank you for your replying.
I have another issue now.
Can I add different outlines in the same scene? Different colors, different opacity, something like that.