OutlinePass: correct gaussian probability density function input

[ingun37]

OutlinePass' blur material uses too small step when they calculate weighted sum. As a consequence it becomes practically a box filter. As you can see when you thicken the outline, the pointy parts' outline resembles a box.

I think they meant to step discretely( e.i by 1, instead of like 1/1024 ) so I corrected it. Now you can see the pointy parts resembles a circle (the shape of gaussian kernel).

[Mugen87]

@spidersharma03 What do you think about this change?

[ingun37]

Especially this part becomes really pretty
from

to

[ingun37]

Let me elaborate a bit more
This is the gaussian function they use when kernelRadius = 1.

The graph by itself looks like a gaussian kernel of radius of (at least) 3. But technically can be used as kernel of radius of 1. Whichever radius you choose, the sampling step (or sampling rate) has to be reasonably in the range of 0.5 ~ 1. (decided by MAXIMUM_RADIUS, the sample size)
But the step the code takes is in the unit of 1/texSize. Although the concept is correct, e.i 1px, the magnitude is way too small. The situation suggests that the original intention was to take discrete step not proportional.

[WestLangley]

@bhouston Do you have the reference for the OutlinePass implementation?

[bhouston]

I think this was just never done properly. It seems like this was just skipped over as not a major concern in the original PR.

[Mugen87]

https://raw.githack.com/ingun37/three.js/outline-kernel/examples/webgl_postprocessing_outline.html
https://threejs.org/examples/webgl_postprocessing_outline

[Mugen87]

When comparing this version with prod, the new style looks indeed cleaner. Especially when setting edgeStrength and edgeThickness to high values.

[mrdoob]

Thanks!