Erode, dilate, threshold shader filters match closer to CPU filters

[wong-justin]

Resolves #6398

Changes (discussed in the issue above but summarized again here):

• THRESHOLD shader tweaked to match CPU filter more closely. Still a few pixels different, but close enough
• ERODE, DILATE shaders use luminance values to exactly match CPU filters
• texelSize accounts for pixel density now

Screenshots of the change:

Before	After

PR Checklist

• npm run lint passes
• [Inline documentation] is included / updated
• [Unit tests] are included / updated

[aferriss]

Should these values also be multiplied by pixel density?

[davepagurek]

This is a good question. I think ideally, we'd want to make the shader handle pixel density rather than the user calling the filter function so that it's easier to make density-agnostic sketches. That means the shader would likely want to know about both the width and the pixel density. I think right now this is possible by comparing texelSize and canvasSize, but wouldn't be possible if we also multiply by pixel density here. (Maybe it's worth adding pixelDensity as a separate uniform so it doesn't always have to be calculated by dividing the other two? Not necessary in this PR though!)

[wong-justin]

I was thinking maybe all shader uniforms should account for pixel density, ie. texelSize = 1 / (width * pixelDensity), 1 / (height * pixelDensity) and canvasSize = width * pixelDensity, height * pixelDensity. That way they would all be doing work at the same level of resolution. Although having canvasSize != width, height is probably not what the user expects.

[davepagurek]

I think the main reason why we might not want that for all uniforms is that if the pixel density is always premultiplied, then the shader can't distinguish between a canvas at 2x density and a canvas at 2x the size. That would mean that on the user's screen, a filter(BLUR, 3) on a 2x display might end up looking less blurry than on a 1x display, since the blur radius would be smaller relative to the physical size of the canvas. I think I naturally interpret the 3 in filter(BLUR, 3) as being the same units the rest of p5 uses, pixels times pixel density, rather than real pixels.

I think it's ok having most uniforms come with pixel density premultiplied as long as we also pass the density into the shader on its own too though.

[aferriss]

Thanks for making the PR Justin! Apologies for steering you wrong initially with the non-luminance based erode/dilate filters but I'm glad we got there in the end.

I wonder if the small differences in threshold is due to different interpolations/anti-alias settings when in webgl mode. Do you notice the difference go away when drawing a rect instead of an ellipse? Either way it seems like the difference is very minor.

It looks good to me!

[davepagurek]

Nice work @wong-justin!

[wong-justin]

Ah yep @aferriss, antialiasing makes a ton of sense. Sure enough, rects match up perfectly.

[Qianqianye]

Thanks @wong-justin for working on it and @davepagurek for the approval. @aferriss, do you think this PR is ready to be merged? Thanks!

[aferriss]

Yes, lgtm!!