Search Unity

Comic Book Shader

Discussion in 'Shaders' started by Max_Bol, Feb 8, 2018.

  1. Max_Bol

    Max_Bol

    Joined:
    May 12, 2014
    Posts:
    110
    As some might have noticed previously, I previously have worked on a shader that was based on Ark System Work's shader which was made for Guilty Gears Xrd and the new Dragon Ball FighterZ
    You can view it here if you wonder about it.

    While I was working on that shader, I was focused mostly on having something I can work with that gives out the result similar to Guilty Gears Xrd. I'm actually using the shader I made for one of my current mobile project as it's super light in computation (especially in comparison to a PBR shader) and it's requires relatively low resolution textures on top of that which saves a lot on the storage size of the application in the end.

    Still, I was wondering how I could push the shader ever further. Making something new or original out of it, even if it's just something small. And as I was reading some good old Marvel comic book, it struck me! Why not making a shader that looks similar to a comic book. Not just the TV anime/cartoon flat color, but an actual shader that kinda simulate the halftone look of a comic book!

    It's still a work in progress, but I have made it... Took me about 12 hours straight to find the right way to implement the change in the lightweight shader I previously made, but I made it!

    For some, this might sound like something easy or simple to do, but I would like to tell you that I started on learning and working on shaders in the last week of last October. This gives me about 3 months of experience in scripting shaders. I only did some minor changes to existing shaders prior to that date and nothing like writing one from scratch by myself.

    There's a preview of the shader:
    Manga_Shader_Preview.gif

    As you can see, the shader allow 2 types of halftones.
    One is a pixel look. You could call it "Manga Halftone style".


    The other has lines which is similar to old american comic style :


    It's far from perfect, but I think it's a great first step.
    The halftone size is controllable and it screen-pixel based. You can make each "square" the size you want based on the screen pixel size. The example able uses a 1.0x size ratio and since there's not Anti-Aliasing, it might seems a bit hard edged a bit, but if you can just put it at less than a pixel and it will look less edgy.

    HalfPixelVsFullPixel.gif


    With it, I'll be able to convey the comic-book style I wanted with one of my projects.
    Here's another screenshot with different kinds of possible result (no change done in the shader's code.
    There are 2 parameters that does all the "job".
    MultipleExamples.gif

    I'm still not 100% done with it. I got a few more trick I want to try to add into it.
    For example, in the next few days, I'll try to add some kind of way to controls the outline width so that it's possible to give a kind of relief through the outer line like you see in comic books. (It might be done today actually as I got an idea of how to implement it).
     
    DanVioletSagmiller likes this.
  2. Max_Bol

    Max_Bol

    Joined:
    May 12, 2014
    Posts:
    110
    Quick Update
    (I'm posting it as a new post since it's a new feature)

    I have succeeded at adding an option that affect the outer shell width dynamically.
    In the previous version of the shader, I was using the vertex color Blue and Green channel to allow a custom manipulation of the highlight and shadow thresholds.

    The red channel is still being used for force-modifying the shadow actual value so that i can add or remove some shadow strength based on the artistic needs. (Think of it as a fake bumb map where pushing the vertex color's red channel to max remove all "black shadows" and vise versa.)

    The Alpha channel is being used for customization purpose so that I can change colors of asset on the fly through scripts without changing any textures.

    I simplified the threshold value modifier so that it only uses the Blue channel and, now, the green channel modify the outer shell's displacement, making the black line around the model thinner or bolder.
    DifferentLineWidth_VertexColorG.gif

    This will push the 2D style artistic capacity of the shader by a LOT as comic books (including manga) arts usually follow some specific kind of generic rules where specific part of the body has bolder lines and other has thinner.
    For example, on a character, each part that can "bend" like the inner part of the arm (opposite side to the elbow) has thinner line while muscles and other part that aren't really bending visually are bolder.

    Ironically as we all know, 3D models then to have vertex in area that makes this quite possible implement by vertex color. :p
    Not only that, but it will also allow me to cheat my way whenever the outer shell doesn't look right by dropping its width to 0 at those specific parts!

    Now, I can't wait to try it within an actual full fledged scene! :D
     
    DanVioletSagmiller likes this.
  3. Max_Bol

    Max_Bol

    Joined:
    May 12, 2014
    Posts:
    110
    It took me a bit of time to get the hang of the workflow and to get from A to B in terms of modeling and setting up the models and then importing them into Unity.

    Especially since there are a few "rules" in terms of modeling the meshes and level designs that are required.

    But, here's a preview of the scene (main menu) I'm currently working on.

    Preview_PartialScene.jpg

    Due to the trick with the UVs, the current scene barely have anything in terms of textures. Except for the logo (which is a 1k texture), there are only 3 material with, each, 2 textures for the current content.

    The Sword has 2 materials (The handle/hilt and the blade) as the project involve weapon customization outside of the battles and model switches during the battle so I have to cut the weapons into pieces (depending on its customization capacity) which might varies in material (and so color). The blade has 2x textures at 64x64. The hilt has 2 textures at 128x128.

    The ground and rocks has 1 shared material with 2x texture at 32x32.

    The only issue with the shader with an outer shell is the fact that it can't be batched because it involve 2 draw passes. For this reason, repetitive element in the background are, instead, using the same shader, but without an outline. As you can see, as I included some of the details into the geometry itself of the meshes, removing the outline can be possible with a bit of preparation (saving about 66% of the drawcalls with the batching).

    I'll post an update with the complete menu once it's complete.
    (I'm planning on having an animated sky with halftone clouds and stuff like that. Also an area in the background that includes a castle and a battlefield.)

    = EDIT =

    I added a kind of float selection to the parameters of the shader.

    Seed-Based-Halftone_Examples.jpg

    This allow to change the patterns of the mid-tones (halftones).
     
    Last edited: Feb 11, 2018
    DanVioletSagmiller and Sluggy like this.
  4. BrandyStarbrite

    BrandyStarbrite

    Joined:
    Aug 4, 2013
    Posts:
    1,054
    A comic book type shader, that tries to emulate the Guilty Gear Xrd look?
    Yep. That caught my interest. Yippie!!:D

    It's looking nice so far.
     
  5. DanVioletSagmiller

    DanVioletSagmiller

    Joined:
    Aug 26, 2010
    Posts:
    107
    This looks awesome. Are you planning to post it to the Asset Store? I'd really like to get my hands on it.
     
  6. GameDevCouple_I

    GameDevCouple_I

    Joined:
    Oct 5, 2013
    Posts:
    1,304
    A github of this would be great, looking at recreating this in shadergraph!
     
  7. DandyKnight

    DandyKnight

    Joined:
    Mar 24, 2018
    Posts:
    1
    I'm trying to make my game in this style... I would pay money for this shader looks awesome.