Home 3D Art Showcase & Critiques

[Postprocess] Outline and crush

polycounter lvl 9
Offline / Send Message
Drachis polycounter lvl 9
A friend of mine was working on a scene and asked for a toon shader to help then match a particular style. So I started with the basic clamp an offset fresnel and call it awesome, but they were working much lower poly than I expected so I ended up looking into making something that did a bit of edge detection. So here you are polycount the fruits of my r&d.

The right is unprocessed and the left has the garnish.
ToonTest_01.jpg

A bit more outline goodness.
ToonTest_02.jpg

The friend is still working on the scene so I grabbed a different environment to test it on so the environment isn't mine. If you'd like a copy feel free to grab the upk; Package , it currently is setup to work in UDK. If you're wondering what all the twiddly nobs in the instance are I have a little document about 'em

Replies

  • G3L
    Offline / Send Message
    G3L polycounter lvl 9
    oooOOOoo that'd be me drachis! lol

    i dig it man, i'll let you know when it's on my stuff on my scene :)
  • feanix
    Offline / Send Message
    feanix polycounter lvl 7
    I'd be super interested to know how you did the edge detection! Can you post your material's nodes?
  • Drachis
    Offline / Send Message
    Drachis polycounter lvl 9
    Super huge image with the node breakdown.
    OutlineNodeBreakdown.jpg

    the large cluster of orange nodes on the right are the depth buffer offsets in screen space. the depth buffer is spread out along the axis by adding and subtracting a small amount from the uv coordinates.

    All the samples are then added together and divided by the number of samples before they are subtracted from an un-offset version of the scene depth. The result of that is visible in B and while that does show the changes in depth it breaks down on steep flat surfaces because it creates multiple unwanted lines across them.

    To correct for this B is compared to A(a slightly modified depth buffer) in an if statement and anything that has the two equal or where A is less than B becomes and outline and the rest of the image pixels are filled by the original frame. The black regions in image C are where B is greater than or equal to A.

    The shader is lightly commented, take a look in the package it might help answer some of your questions, and if you don't feel like adding it to the post process chain you can assign it to a mesh and look through that mesh (madness!).

    Hope that helps.
  • Neox
    Offline / Send Message
    Neox godlike master sticky
    the problem i see right now is, that you are not using actual pixels as size which will always result in somewhat messy results.

    Also you get outlines in regions where they don't make sense, why for example does the outline appear on every segment of the bridge? o.o
    And secondly why don't you get outlines there on the top of the stones? even if you cut of for distance, the rock on the left should use an ol as its nearer that the rock on the right of it.

    I guess this is due to using if which is always only right or wrong, no inbetweens?
  • Ben Apuna
    Neato, will have to check this out.

    Thanks for sharing :)
  • uneditablepoly
    Very nice, but the pixel size problem mentioned earlier is the only thing throwing it off. Interesting stuff, though.
  • feanix
    Offline / Send Message
    feanix polycounter lvl 7
    I was interested in this cos I thought it would make a neat effect for having actors selected :3

    Trouble is this is a screen wide effect. :S
  • Neox
    Offline / Send Message
    Neox godlike master sticky
    look into Renegade X, they have what you want, its a mod so you can easily look into the sources...
  • Drachis
    Offline / Send Message
    Drachis polycounter lvl 9
    Hadn't noticed the top of the rocks, turns out the method I had used to reduce the frequency of lines had offset the depth too far at those points.

    ToonTest_03.jpg

    Corrected it and updated package available. I took the extra nodes out and removed the old method from the material.

    @Neox the problem seemed to be the method not the If, it was used to sub white for the frame and a color for the lines.
  • Drachis
    Offline / Send Message
    Drachis polycounter lvl 9
    Double posting an update, .

    Lines now get thiner the farther an object is from the camera.

    ToonTest_05.jpg

    UDK URL="http://ip-comic.com/Drachis/Linked/Distro/Shaders/Graphic/TC_PostProcess0_02.upk"]Download it[/URL
  • JasonLavoie
    Offline / Send Message
    JasonLavoie polycounter lvl 18
  • Neox
    Offline / Send Message
    Neox godlike master sticky
    lovely gonna have to redo the outline of airborn, as udk interprets the the zbuffer different then ut3 does, so my outline shader doesn't work anymore, might try your if construction then :)
  • Drachis
    Offline / Send Message
    Drachis polycounter lvl 9
    Go for it Neox, feel free to hit me up if you run into any snags with it I'd be happy to help out.
  • Oniram
    Offline / Send Message
    Oniram polycounter lvl 17
    im wondering, what is being plugged into the A<B node?

    (EDIT:) i downloaded the package and saw the madness. that answers that.

    to actually have that display though, do i have to edit the ini?
  • Oniram
    Offline / Send Message
    Oniram polycounter lvl 17
    ok nevermind. i figured it out. this is amazing! id like to do some research on this to figure out how EXACTLY this works.

    17870_282130461089_512141089_4014250_4697801_n.jpg
  • Drachis
    Offline / Send Message
    Drachis polycounter lvl 9
    If you're interested in exactly how it works check out these documents URL="http://portfolio.ip-comic.com/Documentation/Graphic%20Post%20Read%20Me.doc"]basic[/URL and URL="http://portfolio.ip-comic.com/Documentation/Graphic%20Post%20Read%20Me_02.doc"]depth biased[/URL,
    I wrote down how I thought it worked so tell me if that helps, the depth biased method builds on some of the concepts in the basic document so reading both maybe helpful. You'll really only need to read the Method section of each document.
  • Oniram
    Offline / Send Message
    Oniram polycounter lvl 17
    ok that makes things a bit more clear. jeez, how you were able to figure this out amazes me.
  • 00Zero
    cool stuff Toli. but how does it look in motion?
  • Oniram
    Offline / Send Message
    Oniram polycounter lvl 17
    i just tried out the cell shader that hourences has:

    http://book.hourences.com/tutorialsue3mated3.htm
    at the bottom.

    now looking between the two. yours is fairly more complex. i take it that the difference is that hourences is meant for an object while yours is meant for post process? im wondering what makes that difference? is it that you use scene depth instead of vectors?
  • vulmer
    This looks very cool. I'm trying to figure out how to get this working though... I have it setup by connecting the nodes in the UTPostProcess chain(scenerendertarget--->material) and am pretty much lost from there... Just started using UDK a few days ago. Help a noob anyone? :)
  • adam
    Offline / Send Message
    adam polycounter lvl 20
    Would you guys like this thread in Technical Talk rather than Pimping & Previews?

    I could rename it to '[UDK] Post Process - Outline & Crush'. The conversation could get pretty interesting around the topic if it rests in the appropriate forum for such a conversation ;)

    Otherwise - wicked effect.
  • Gilgamesh
    Offline / Send Message
    Gilgamesh polycounter lvl 12
    Sounding a bit on the thick side here, I love the effect and have the package how do I actually use it ... is it just like a material, or do I need to use it other ways?
  • Drachis
    Offline / Send Message
    Drachis polycounter lvl 9
    @ adam
    yeah would be good to move this to technical talk; seems to be more about that than showing off the bits now.

    @Vulmer
    You need to connect this to a specific post process in order to get it working out of the box. The one that works by default can be found in UTGame>Effects>FX_HitEffects and is called UTPostProcess_Console
    Add a new material node between MotionBlurffect and the MaterialEffect already in there, and pop the material into the node and bam lines everywhere [if not post up and we'll figure it out]

    @oniram
    What makes it a post process rather than a per object material is that it used both the scene depth and the scene texture. I would of made it as a per object material but I ran into issues accessing the scene depth with non-transparent objects.

    the cell shader at hourences will work per object so every object will have its outside edges outlined nicely. The downside is that it requires geometry that is curved to show up and on flat surfaces the outline can spread down a wall.

    BasicCellShadeEG.jpg

    The material that I made works with the difference in polygon depth rather rather than surface angle(how much it faces the camera). So lines will only appear when two polygons overlap by a certain amount. That should allow it to work with lower poly scenes with little trouble.

    @gilgamesh
    you have two options either use it like a window, apply it to an object and look through it and everything on the other side will have outlines (like some sort of twisted window) or toss it in the post process any the whole level gets em
  • Oniram
    Offline / Send Message
    Oniram polycounter lvl 17
    ok that helps. i guess what ill try doing is plugging in a blank material to the post process, and attaching each node one by one to see the effect realtime. that should help my understanding quite a bit. thanks for all the info!

    (and yeah this might be better off in the technical talk section :D )
  • Shogun3d
    Offline / Send Message
    Shogun3d polycounter lvl 12
    Toli, you are a madman. This reminds me a lot of Borderlands.
  • vulmer
    Drachis wrote: »
    @ adam
    yeah would be good to move this to technical talk; seems to be more about that than showing off the bits now.

    @Vulmer
    You need to connect this to a specific post process in order to get it working out of the box. The one that works by default can be found in UTGame>Effects>FX_HitEffects and is called UTPostProcess_Console
    Add a new material node between MotionBlurffect and the MaterialEffect already in there, and pop the material into the node and bam lines everywhere [if not post up and we'll figure it out]

    Wooo, thanks man! Worked right away! I just need to figure out how to get it to run in-game now. :)
  • Oniram
    Offline / Send Message
    Oniram polycounter lvl 17
    so it took me some time but i finally think ive got it. with A LOT of help (last part from Eat 3d.. u guys rock), i was able to make a simple outline material.. its a bit tricky in some cases and sometimes may vary from map to map, but i think it works for now.

    Outline01.jpg

    OutlineChain.jpg
  • Rurouni Strife
    Offline / Send Message
    Rurouni Strife polycounter lvl 10
    How do you get this to display in Game mode? I've got a Post Process Effect box created. Now off to play with numbers in here. This is super complex and wicked cool to me. Thank you!!
  • Riki
    Offline / Send Message
    Riki polycounter lvl 9
    Hi Everyone. I posted a few free materials that Dave Prout made here: http://eat3d.com/forum/unreal-dvds-discussion/image-edge-detect-material-effect#comment-1010855

    Im not sure if it will add anything to what everyone has already discovered, but hopefully it helps someone out there :)
  • Oniram
    Offline / Send Message
    Oniram polycounter lvl 17
    @rurouni strife: within the post process console you should be able to just enable a check box at the bottom of the options window that says display in game (and display in editor)

    @riki.. thats awesome! thx. ill have to check those out.
    edit: ah. thought these were different files that contained things that were not covered in the dvd. regardless, its good to be releasing it to the community. :D
  • gannonroader
    Offline / Send Message
    gannonroader polycounter lvl 8
    I've never worked with post processing before, but I would really really love to try this out on my level. Can someone make a "getting this file to work for dummies" point form instructions on getting this .upk file working within my level?
  • WhiteNorthStar
    It's awesome to have such a useful outline tool available free for download, thank U!

    I've been having a bit of trouble getting any of the outline versions to work:
    • successfully downloaded the .upk and plugged it into the UTPostProcess_Console
    • tried with directional and dynamic point lighting
    • set UTPostProcess_Console as the default world post process chain
    • selected 'show in editor' and for 'show in game'

    The post process chain is working but when I plug in the material my screen goes completely dark, I can't see anything! :poly142: If I remove the new material node, everything goes back to normal.

    I'm using UDK 2010-10, can anyone please help me out? :poly136:
  • GavinUnit
    Offline / Send Message
    GavinUnit polycounter lvl 14
    Sorry to res an old thread, but, I'm having the same issue as the last poster here. Granted, I am an idiot when it comes to UDK, but any help would be greatly appreciated :)


    *EDIT*
    I changed the scene depth priority group (DPG) to WORLD, within the newly created material node, and now things appear to be working. Just in case anyone else was wondering.
  • kaze369
    Offline / Send Message
    kaze369 polycounter lvl 8
Sign In or Register to comment.