1. Welcome to VRCat! Please note that this message board is not related to VRChat in any official manner. It is run entirely by the community, and moderated by the community. Any content present has not been reviewed by VRChat moderators or staff. Your use of these forums implies understanding of this message. Thanks!
    Dismiss Notice

Avatars Lyuma's 2d shader generator: Flatten your favorite shaders

Discussion in 'Tutorials and Tools' started by Lyuma, Jun 13, 2018.

  1. Lyuma

    Lyuma New Member

    Joined:
    Jun 13, 2018
    Messages:
    5
    Likes Received:
    4
    VRChat:
    Lyuma
    Have you ever wanted to have a 2D waifu? In VR? If so, this script may be for you.

    MAJOR UPDATE!!! October 11, 2018! I have released an all new system with some bugfixes, and it will now work for a wide variety of shaders, from everyone's favorite Standard to that weird star nest effect. The effect can now be generated in the little context menu dropdown next to a shader or material.

    TL;DR To try it out, download from lyuma's github project (github com lyuma/LyumaShader/releases). The package is mostly an editor script, and a few example shaders as well as a Drop Shadow shader to show a shadow behind your flat avatar. Because I want to avoid choosing favorites, the github project includes only a script to 2d-ify shaders from the context menu "Make 2d (Lyuma Waifu2d)". Feel free to apply the effect to (Insert your own favorite Toon shader here).

    This menu button will modify your material's shader, but will leave the original shader around. If you want to undo, just hit ctrl-z or navigate to the shader with the same name but without "_2d" to get back to the original material.

    -----------------

    Originally inspired by a flat avatar I saw one day living inside a picture frame, this shader makes real 3D objects look completely flat from any angle.

    waifus_in_formation.jpg

    ------------------

    Features: These will appear on any material you convert from 3d to 2d. Make sure to set these to exactly the same numbers on all materials on your avatar. If they use the same shader, I recommend shift clicking all your materials in the inspector and editing them together. If they use different shaders, unity won't let you so you will need to keep track of the numbers yourself.

    Twodimensionalness
    : 99% by default, The shader supports variable levels to turn the effect off and on (you can put any of the settings in an animation - a common one is to change Twodimensionalness on a hand gesture to allow interacting with 3d objects). Here is a sample from below. Yes, as a bonus, it mostly prevents creepy angles. Note that 100% may have z-fighting from certain angles.

    0%: effect_off.png 50%: effect_partial.png 100%: effect_on.png

    Lock 2d axis and Face in Profile: On by default, the avatar will appear like paper from front and back, and the orientation can be aligned to the front/back or side to side (face in profile) view. To gain the classic billboard flat effect, you can turn off Lock 2d axis. The flat shader with Lock 2d axis turned off looks stunning in VR, but this mode renders the effect largely invisible in mirrors and for people not in VR. This is a tradeoff you will have to decide for yourself.

    See self in 3d
    : Another effect of this shader is that it will make it a bit hard to see your hands in game. To compensate for this, with "" turned on, it detects when you are facing away from the center of your character and turns the effect off (Make sure your head position has Z coordinate > 0.). A good way to test shader effects is to enable Holoport 3D in System settings and walk around that way to see how it looks.

    Squash z: This prevents z fighting. To be flat you want this as high as possible but not 100%. This starts out at 97.5% which I find to be a reasonable tradeoff for Z-fighting and flatness on a simple avatar. Setting this all the way to 0% will cause your geometry to behave as if it has the original real world position, so for example if someone leans their face in, they would be able to see through some clothing layers despite the avatar appearing completely flat. You will need to experiment on your avatar.

    Tweak z clip: This is an advanced setting but it can allow you to adjust for cases where one part of the avatar renders in the wrong order. While other settings should be the same on all materials, this is used to move one material closer or further from the camera to render on top for example.

    Drop shadow effect: This is not a setting on your shader. Instead, it is a separate shader you need to apply to another material. To gain the drop shadow behind the avatar, clone your main mesh (or meshes), duplicate the included FlatShadow material, and assign LyumaShader -> DropShadowLiteToonTransparent to it. Then put this into all of your material slots (for better performance, I usually apply this only to the main skin/body materials and hair and not on clothing).

    I include a Hidden shader you can apply to materials that you do not wish to show a shadow. IMPORTANT: To make your avatar not look broken to people with shaders disabled, you must make sure to assign a 1x1 transparent png texture to the shadow and Hidden shaders. The included materials should do this for you but be on the lookout for this.
    -------------------

    Source code can be found at github lyuma LyumaShader

    Some notes: This version of the shader does not alter normals, tangents or world positions of any vertices, which are used mostly for lighting computation or to make screenspace effects like Noenoe's overlay. For this reason, Noenoe or star nest effects will be distorted in 2d. I may work on improvements to this in a future update. To fix issues with worldPos, you can patch the generated shader yourself by calling waifu_computeVertexWorldPos in the appropriate places.

    I have tested this effect on over a dozen shaders including Cubed, Noenoe, Xiexe, Poiyomi. The editor script should work on any surface shader, as well as any shader which uses UnityObjectToClipPos. The vast majority of ordinary avatar shaders will work. Shaders that perform custom manipulations of vertex positions (something like this effect, particles, morphs, etc) will probably not work as intended but feel free to try and give feedback.

    For those interested in digging into the source, I tried to organize it very cleanly so it can be easily edited to have a different effect. Most of the interesting code is in Waifu2d.cginc and is a system to transform points into another space, do some operation and transform them back into world space, while keeping the depth buffer correct by preserving the original z coordinate. You can change this to apply different types of vertex movement effects to an existing shader.

    I'd love feedback and I have some more ideas for shaders and other things.

    I'll probably come back and edit this post when I have more to share. I plan to make an avatar world in the future.

    Once again, the download is available at github com lyuma/LyumaShader/releases (sorry, I cannot post the exact link due to a spam filter)
     
    #1 Lyuma, Jun 13, 2018
    Last edited: Oct 11, 2018
  2. Castell

    Castell Member

    Joined:
    Mar 15, 2018
    Messages:
    13
    Likes Received:
    5
    VRChat:
    Castell
    Quite interesting, great job. :)
     
  3. Randy Betancourt

    Randy Betancourt New Member

    Joined:
    Jul 8, 2018
    Messages:
    2
    Likes Received:
    0
    VRChat:
    NaitoOokami
    Love looking at this in the unity editor but sadly whenever I have this shader imported into my assets it breaks uploading avatars completely. Missing customavatar.unity3d file
     
  4. Xiexe

    Xiexe Member

    Joined:
    May 1, 2018
    Messages:
    16
    Likes Received:
    29
    VRChat:
    Xiexe
    This breaks uploading because your editor script for the inspector is not in an "Editor" folder. You must keep it in an Editor folder, like so.
    Unity_2018-07-11_19-02-52.png
     
  5. Lyuma

    Lyuma New Member

    Joined:
    Jun 13, 2018
    Messages:
    5
    Likes Received:
    4
    VRChat:
    Lyuma
    Hey all,

    I have just released a major update which I'm calling v1.0. Instead of just cubed, this now will apply to (almost) any shader. Also comes with many more sliders so you can have fun customizing the 2d effect for you. Download information and explanation in the updated original post.

    Let me know what you think here. You can also PM me at Lyuma#0781 on discord or xn.lyuma on gmail.

    <3 Lyuma