World Normal Edge Detection ( and Speedpaint Art Style)

Hello together,

this is my approach on NPR shading in Unreal Engine 4. It is based on calculating world normal scene texture into a kind of blur pixel math. Its not finished though and since iam not a professional shader artist, it has its flaws and is unoptimized.
I need to work more on the filtering methods so it does not cut so strong, even if that has its own style. To finish this up, i may have to ask some questions to you later.

See you,

Maternal

cool work.
looks really interesting to me.
it is an postpro effect you can add to any scene ?

Yes it is. There are some restrictions though. The Line /Edge detection takes normal information into account, so every asset with strong detailed normalmaps will look too sketched. Also, to filter out objects, objects should have more polygones - this improves the filtering. I have to test it with other scenes but the problem is, that my computer is not the best to test out this effect in other Demos. I won´t be able to record it smoothly.

I´m back with Updates. I now have a good filtering method to prevent holes from Pixel intersection. As i said, i can´t record and play while the gameplay itself is around 45 Frames - which is only due to my old Computer.
So I would be pleased if you could stop the Video sometimes and watch it in HD.

We have to find a way to record this effects. A new Computer is planned, so this problem won´t be forever. Please let me know what you think about it.

@Mods, i first thought this needs to be in work in progess, but it should be in the rendering subsection of the forum. I would appreciate if you could fix it.

Wow ! ^^ Really nice effect. I love this drawing-like rendering.

This is crazy <3

Beautiful work man, I love this!

Thank you ! Here is a better Video to show the effect.

It is uploaded recently, so it takes a while to be HD.

Looks gorgeous! A lot of toon shading fails to work nicely on anything but static images, this one on other side looks great in motion. Great work!

Thanks again :slight_smile: I have exaggerated the effect:

3 Times the postprocess material looks even more like a oil paint sort of. Its crazy fast - i turned down the texture and effect quality to low.

once again wow !
i really really like this effect.
cant wait to try it out on some of my projects.
do you plan to release it ?

Yes it is planned to release it. However, i will have to optimize it for that. There are a few things that needs to be developed to prevent this “firing outline effect”. This happens due to antialiasing which is temporal AA at the time ( which looks the best). You can´t notice it on stills, but on moving things and scenes. Also, i want to reimplement the custom depth mask, without that, it won´t be possible to filter out characters or highlights. Everything would look blurred. Speedpaints have always focus and not focused elements, so this is important and needs to be fixed.

Thank you for your interest in my work.

I have a new test video for you here:

Ok, so i have some problems i can not solve myself. The first question is, how can i calculate sorting ? The main problem is that the pixel offsetting happens due to overlapping actors in depth. The postprocessing simply can not know which pixel has which depth. I tried to subdivide scene depth into 8 pieces to separate Meshes against each other. But that did´t solve the issue. Ambient occlusion seems to have some sort of “depthcheck” between two objects. While you don´t want it there ( black shadowing behind object) it could solve the flaming breakout issue on my material.

The second question is how Bokeh dof is filtered.

be2b4fb3892ec67bc443c9f9794862ed9b9ad0fb.jpeg

In the previous engine that I was using we had to build a small routine to properly handle this kind of cases. The idea is to take every mesh and it’s smooth-groups and write down an individual index from 0-255 to one of the no used texture coordinates at vertices. Limiting index only to object didn’t worked when mesh hard edges which had to be respected.
Later we render this index into g-buffer and use it in material shader to decide if shadows, ssao or other post process should behave differently when working on the edge of the object or near hard normal.
This is was based on old article, [edit] found it: http://www.students.science.uu.nl/~3220516/advancedgraphics/papers/inferred_lighting.pdf
Perhaps UE4 already has such indexes or if you don’t really care about hard edges then you could pass index as parameter to shader and render into custom g buffer. But again I don’t know if UE4 allows to do it out of the box or you have to modify source code.

But now after I’ve re-read your post I’m not sure what you mean by post-process doesn’t know what depth each sample have. It it done after anti-aliasing?

Hello Bored Engineer,

the effect is done before anti-aliasing, so i was wrong in the first place. The cut out into another objects happens if the blur kernel to strong in edge areas, so the blurred pixels are reaching to far into another surface/object.
I did manage to clean up edges vertical (at some point) but cant´t fix it on the left and right. The question is, how much is possible ? I don´t know how much can be done over postprocessing. This effect here is
on the object which looks like a much better solution : UE4 - Morphscape Cinematic on Vimeo

But i wanted to find a way to use it with post processing and at some point, it worked good. I wouldn´t even mind if some edges are cut out, i really enjoy this effect. But on the other hand, i want to archieve paint style in realtime in motion.
One thing that would be really exiting is to use flow map on postprocess. Think about it, that would blur Pixels in directions and even follow the surface. But all my tests about that failed. If there would be one extra masking channel , where you could define pixel flow maps on the objects material and then blurring it on screen. That would look nice i guess.

Anyway, here is the screenshot explaining what i want to avoid :

http://www.pasteall.org/pic/show.php?id=93277

Hey guys, i found this on the internet : WIP Paintyness n things - Page 3 - ENBSeries

How is that even possible and how do we get this effect in Unreal. This is crazy.

Aaaaand its final ( if you ignore the reflection burn outs)

&stc=1&d=1442709074

&stc=1&d=1442709068

&stc=1&d=1442709059

See you tomorrow

nice ! but way to much blurred for my taste.
i liked the original more sharp ones better.
will we have the ability to play with the settings when you release the effect ?

Yes you can play with the settings as you want. The Material Instance takes normalmaps and flowmaps for calculating the offset. Basically, you can stack and mix every line and paint effect. I have used 4 Material instances on this scene. This effect is not for people watching at every frame drop. It is surprisingly fast and the framerates are ok ( on my computer). So i have no reference on that.

My Computer
Íntel Core 2 Quad CPU 2.40GHz
7Gigabyte Ram
Nvidia 560gtx ti

Ah i need to “smart blur sharpen” the postprocess effect i forgot about that. I have done several attemps to sharpen the effect. It works over emboss edge filter.

So what i can offer for now :

World Normal Edge Detection
World Normal Fresnel Edge Detection
World Normal Hatch Effect
Sobel Edge Detection
Custom Depth Edge Detection
Depth Edge Detection

Flowmap/Normalmap offset blur (paint effect)

Full control over every material post process.

Iam currently working on a game and i need to invest in hardware. This effect will be used on that game, and it cost me more than a week to develop it. So this postprocess package will cost a bit, but not much. Iam more interested in sharing ideas, but at the moment every penny counts.
But it will take another week to finish it up i guess. Its not about making the material better, i will take a lot of time on the documentation part. As i said, i am not a professional techartist so all i managed to build here was on research like crazy. Perhaps my thoughts and my setups will give you alot of inspiration to reach more into this whole pixel manipulation thing.

Thanks for your interest in my work that really pushed me forward.