search

OmarShehata / webgl-outlines

Implementation of a post process outline shader in ThreeJS & PlayCanvas.
MIT License
385 stars 41 forks source link

I want anti-aliasing of the outlines. #15

Open workamiracle opened 1 year ago

workamiracle commented 1 year ago

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

OmarShehata commented 1 year ago

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 commented 1 year ago

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

OmarShehata commented 1 year ago

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 commented 1 year ago

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.