How can i due with this effect in the picture?

[xhzengAIB]

Hi! @dghost Thanks for the great source, it works like a charm. however i have a litte problem : Like this picture effect：

Jack

[dghost]

It depends - how did you create that effect?

In theory, it's a relatively simple matter of extending one of the existing filters to mimic that style, but without knowing what the effect is doing mathematically it would be hard to replicate.

[xhzengAIB]

@dghost Sobel operator and Canny edge detector? How can i do?

[dghost]

The Canny algorithm uses the Sobel operator as it's first pass edge detector - is that what you are referring to, or are you referring to feeding the results of a discrete Sobel pass into the Canny algorithm?

[xhzengAIB]

Hi! @dghost I'm very sorry, my English, please can you help me to complete this effect?

Jack

[dghost]

Hey @xhzengAIB - it's okay - don't worry about the English.

I am happy to help implement it, but in order to do so I need to know as precisely as possible what steps went into creating. Or at least a link to the tool used to create it.

Edit: also, I'll try to look into it either this weekend or next week - I have a bit too much on my plate to try to implement anything before then.

[dghost]

Added in 2133abffa0c9661cb10457ea00dbb54c89598694.

[xhzengAIB]

Hi! @dghost Thank you very much.

[xhzengAIB]

Hi! @dghost I tried this effect, found that the border is not obvious, there are too many particles, how should I adjust the parameters?

Jack

[dghost]

Canny edge detectors don't really have any parameters you can modify, but there are two things you can try.

First, look change Line 251 in FilterViewController.m and replace:

        float screenHeight =
            (_is64bit
             ? [UIScreen mainScreen].bounds.size.height * [UIScreen mainScreen].scale
             : [UIScreen mainScreen].bounds.size.height );

with:

        float screenHeight = [UIScreen mainScreen].bounds.size.height];

That forces it to downsample the image prior to filtering it, which should make edges more obvious.

Second, to remove some of the extra particles you can adjust the minimum threshold by changing Line 526 in FilterViewController.m:

    [_shaders setThreshold:0.2f];

If you increase the value in small increments it will remove some of the noise, but unfortunately it will also tend to remove lines as well. In general, this is one of those values that needs to be tuned to work right.

Also, looking at it again the image you posted either is not using a Canny edge detector or is applying at least one more pass occurring to generate the thick borders. If I knew what software/tool/whatever was used to create it I could see about replicating the effect.

[xhzengAIB]

@dghost Thanks you! I'll give it a try.

Jack

[dghost]

I actually went ahead and added an addition pass to the Canny filters that performs quasi-hysteresis thresholding in f0881de9ea9ee02393e7a02a976b6d8502128fa0. If you pull down the latest version it should help a bit.

[xhzengAIB]

Hi! @dghost Ok, thank you! But I found the effect is not cartoon effects. I tried in the same scene with your demo, found that could not be completed.

The pictures is 漫画家 App （https://itunes.apple.com/cn/app/man-hua-jia-jue-zhao-man-hua/id595860495?mt=8）：

Next picture is your open source demo effect：

Jack

[dghost]

Ahhhh, yeah. They are doing something significantly different than trying to do a sobel pass and then a canny pass.

I added an effect in 94b027d32b794e74ab8869508f4fb1c15a909046 that more closely matches what you are looking for:

It's probably not perfect, but there are parameters in CannyComic.fsh that can be tweaked to make it work better.

[xhzengAIB]

Hi! @dghost It's very close to the effect of, very beautiful, but the filter effect of face cannot display normally. How to optimize the filter particles?

Jack

[dghost]

What do you mean by the filter effect of face? Which filter particles?

The Canny edge detector can be modified program wide by adjusting the high/low threshold values I pointed out earlier.

The parameters of the comic filter can be modified by adjusting the defines found on Line 35 of CannyComic.fsh:

• LINE_SLOPE is the x/y slope of the line
• LINE_INTERVAL is the number of pixels between each line
• LINE_STRENGTH is the width in pixels of the lines
• WHITE_THRESHOLD is the minimum threshold for the source pixel to be considered pure white
• BLACK_THRESHOLD is the maximum value for the source pixel to be consider black

Values between WHITE_THRESHOLD and BLACK_THRESHOLD are white but with the line shading applied to them.