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:

https://github.com/OmarShehata/webgl-outlines/blob/42e210346abdb2dab78de20df9dffc369297340f/threejs-outlines-minimal/src/index.js#L59-L64

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.