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

[Updated 29/5/18] NoeNoe Shaders

Discussion in 'Tutorials and Tools' started by Noe, Dec 7, 2017.

  1. Noe

    Noe Moderator
    Forum Staff

    Joined:
    Nov 20, 2017
    Messages:
    22
    Likes Received:
    43
    VRChat:
    NoeNoe
    UPDATED (May 29, 2018):
    New package/folder structure, now includes a total of 14 shader files.
    Changed default values to make it easier to use the shaders without having to change everything.
    Added NoeNoe Toon Shader.
    Re-categorized based on lighting type (Lit, Unlit, PBR).
    All "Opaque" and "Outline" shaders now support cutout (alpha clip) transparency.
    Changed toon lighting logic to fully support custom lighting ramps for different shading effects.
    Added "toon contrast" slider.
    Added "Cubemap Rotation Speed" input, finally allowing for moving cubemap overlays.
    Included new example prefabs, featuring Unity-chan.
    [​IMG]
    UPDATED (April 30, 2018):
    Fixed an annoying bug where toon shading on the Opaque shader would be inverted when looking in mirrors.
    Disabled shadows on Opaque and Transparent shaders.
    Removed No Light Shading checkbox.
    Added Billboard Static Light checkbox.
    Removed saturation function from Color input, added Saturation slider.
    Added Stereo Distance slider and Use Surface Depth checkbox.
    Removed unused outline logic from the Transparent shader.
    Re-added unused opacity logic in the PBR shader.
    Added examples to the package, using Station 56 by Tomnautical. Look in the "Examples" folder for prefabs and their materials.
    [​IMG]
    Updated material explanations found below.
    [​IMG]
    I've been playing with this shader since September 2017. First version was a simple edit of Trolltunga's screen space texture shader to make it play a little better with lights. Since then, this thing has been slowly shaped into something I feel stands on its own as an alternative to common flat-lit shaders. Aside from the trippy overlay effects, it allows for toon lighting in any world, subtle VR-friendly outlines, and options for fine-tuning colors without editing textures.

    The updated package now comes with 14 different shaders.
    NoeNoe/NoeNoe Overlay Shader has four subfolders. Three of them denote different lighting types.
    • Lit is the "main" version, it receives light from dynamic sources and light probes.
    • Unlit always appears at full brightness regardless of how the world is lit.
    • PBR is smooth-lit with metallic and gloss settings, and supports lightmapping for worlds.
    Each of these folders has three shader files.
    • Opaque is the most basic option. It's double-sided and it'll cast shadows.
    • Outline is the same as Opaque, but with options for the size and color of an outline. This results in one extra draw call per material.
    • Transparent is single-sided and alpha-blended, allowing for varying levels of transparency. By default, it doesn't cast shadows.

    An additional Misc folder includes two experimental shaders.
    • NoeNoe Overlay Advanced is similar to Lit Outline, but includes an additional texture input for an Overlay Map. This allows you to define where on your model you want to show surface texture or the overlays.
    • NoeNoe Skybox is a simple unlit shader for world skyboxes, allowing rotating cubemaps and panning tile overlays.

    Finally, a new easy-to-use varient was added.
    NoeNoe/NoeNoe Toon Shader is an alternative to Cubed. It uses static toon shading whilst also being lit from dynamic sources and light probes. To put it simply, it's NoeNoe Overlay Shader without the overlay. Three types are included: Opaque, Outline and Transparent.

    If you edit any of the shaders aside from PBR (at all) in Shader Forge, you'll need to uncheck "Receive Shadows" for your mesh to get rid of the ugly default soft shadowing. Most users can ignore this.
    [​IMG]

    Material settings are (very) complex, so I'll try my best to provide a useful explanation of each property.
    [​IMG]

    Color is the basic color tint value found in most shaders.
    Main Texture (RGB) is the main surface texture, using the mesh's UV map.
    Crossfade Surface / Overlay lets you fade between the surface texture and the overlays. Set to 0 for only the surface, 2 for only the overlay. Overlays completely ignore UV mapping and appear in an inverted sphere relative to your view direction.
    Tile Overlay is for overlaying 2D textures, you can use anything for this. Remember to set the tile values if you're using a small repeating texture.
    Tile Speed X controls the speed at which the tile overlay pans horizontally. Negative values move right, positive move left relative to the camera.
    Tile Speed Y is the same vertically. From the camera's perspective, positive moves down and negative moves up.
    Cubemap Overlay takes any 360-degree texture set as a cubemap in Unity. This includes most kinds of panorama, and even reflection probes.
    Cubemap Rotation Speed controls the speed at which the cubemap rotates, in degrees per update (or something). Only the first three values (X, Y and Z rotation) matter.
    Crossfade Tile / Cubemap, as you can probably guess, fades between the tiled overlay and the cubemap. The cubemap is somewhat boosted here in order to make up for the way Shader Forge works out the brightness.
    Dynamic Toon Lighting used to be the only option for toon shading. Enabling it will use any dynamic lights in the current world for shadowing, but worlds with only baked lighting will cause these shadows to disappear. This is something that used to bother me about Cubed's shader.
    Static Toon Light is an alternative to requiring dynamic lights for shadows. It basically allows you to set a custom direction for the toon lighting calculation to be based on, meaning you'll always have toon shading no matter what world you're in. 0,0,0,0 (default) has no effect. Personally I find 0,2,0,0 to 0,10,0,0 to look great in most cases.
    Billboard Static Light will cause your Static Toon Light values to be rotated based on viewing angle. With this, you could make sure your avatar is always (or never) lit from the front, left or right.
    Ramp lets you set a custom toon lighting curve. Make it empty if you don't want any shading. I've included a few ramps to play around with in the Textures folder.
    Toon Contrast controls the intensity of the ramp. Keep it low for a subtle shadow, or max it out for harsh lighting. You can also set it to 0 to be totally flat-lit.
    Emission Map is just a texture to use for emission. Set it the same as your surface texture if you want to make the whole thing emissive.
    Emission should be fairly obvious. I've avoided adding this in the past because of how awful it makes you look in some worlds with bloom. Try to keep it low or just use intensity if possible.
    Intensity is an overall multiplier to lighting. With this, you can appear darker or lighter while still reacting to lights and light probes, and it doesn't affect bloom (as much) in most cases.
    Saturation controls the saturation value for the entire material. Set it to 0 to be totally greyscale, 1 is default.
    Opacity is an overall scale for your alpha. 0 is totally invisible, 1 is totally opaque.
    Metallic and Gloss are for specular lighting and reflections with the PBR shaders.
    Normal Map is standard in most shaders. For everything besides PBR, this only affects toon shading.
    Stereo Distance offsets the depth at which your overlay appears in VR.
    Use Surface Depth causes your Stereo Distance to be offset relative to the surface of the mesh instead of the origin. Enabling it with a Stereo Distance of zero makes it follow the mesh exactly, as if a projector is aimed at it.
    Outline Width gives you an outline (using mesh normals). The relative thickness varies between models.
    Screen-Space Outline is a cute little thing that makes sure your outline is always the same size on your screen. This way, it won't look awful when someone gets up close to you. I find using this with a really thin outline gives a nice subtle anime effect.
    Overlay Map (only present in NoeNoe Overlay Advanced) is a texture that defines where and how powerful your surface and overlay textures are displayed. For each pixel of the texture, the red and blue channels determine the balance between the tile and cubemap overlays, and the brightness (value) determines how powerful the overlays are in relation to the surface. As an example, try loading noenoe_sample_overlaymap when you have all your textures assigned.
    Render Queue is present for all Shader Forge shaders. Generally, you can leave it alone, but it can be used for some cool effects, and to troubleshoot sorting issues. If you're using cutout transparency with an Opaque shader, you may notice changing it to 2450 will fix some sorting issues.

    With that out the way, here's a few examples.
    The model I'm using to demonstrate here is Mikoko by Nekomasu のじゃ~.


    [​IMG]
    Leftmost is Opaque with the flat-lit approach, similar to using the old Projection Overlay Texture (Unlit Tiled) shader. There are no outlines or shadows, the whole model is lit the same way. Ramp is empty, outline width and tile speed is zero.
    [​IMG]
    The freaky blue-looking one is Transparent, with an almost fluid look. The Tile Overlay is a simple pattern with alpha. panning left. The crossfader is set to only show the Cubemap overlay, but alpha from the Tile still has an effect. Dynamic Toon Lighting is enabled, for semi-realistic shadowing on an otherwise featureless body.
    [​IMG]
    The one in the center is more along the lines of how I'd actually set up my main avatar. Dynamic Toon Lighting is disabled, with static toon lighting from above. The skin has no overlay, making it seem like the clothes and hair are magical, and the outline is very small and screen-space scaled.
    [​IMG]
    The metallic looking one obviously demonstrates PBR. Having it like this on a character model kind of reminds me of the metal cap from Mario 64. What's worth noting here is that toon shading still has an effect for PBR. I didn't really leave it on for any purpose in particular, I just think it looks cool.
    [​IMG]
    The last Mikoko is essentially substituting out Cubed's shader for mine. There's no overlay, but it's taking advantage of screen-space outlines and static toon lighting.

    Finally, I'll share a few tips.
    • Using a rough normal map with large tile values can "blur" the toon curve making it appear granular. If you only do this on one axis, you'll get an interesting hair-like effect.
    • If you atlas all your textures, you won't be able to use separate overlay setups. I find five or six materials to be acceptable, making sure the face, hair, transparent effects, and clothes are separated.
    • Toon shading looks weird on faces sometimes, so you might want to turn it off for skin materials.
    • Don't use gigantic emission values. It looks awful in VR, especially in worlds with bloom. The max is 10 to allow for game-ripped emission maps with very low alpha.
    • Outlines can look very buggy on models with sharp edges. This is a good reason to keep them thin if you use them.
    • You can see how your model looks in VR within Unity by going to Edit, Project Settings, Player. Check Virtual Reality Supported and add OpenVR (for Vive) or Oculus (for Rift) and drag it to the top of the Virtual Reality SDKs list. Hit Play, and you can edit your material while able to view it in real-time while the Game window is visible.
    • If you're stuck, check out the Examples folder for prefabs with a bunch of different techniques. It's fairly easy to copy these materials and swap out the textures for your own.

    "Station 56" 3D model (and associated content including Textures and Materials) by Tomnautical (https://twitter.com/MrTomnomi).
    "Unity-Chan" 3D models (and associated content including Shaders, Textures and Materials) are provided under Unity-Chan License Terms (http://unity-chan.com/contents/license_en/).

    Excluding example models and related content (detailed above), this work is licensed under the Creative Commons Attribution 4.0 International License. To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/ or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA. Basically, you can use, modify and redistribute it for pretty much any purpose (even commercial). Please show me if you find a cool use for it!

    Download: Google Drive
    Old: https://pomf.space/Uk3aqsQ.unitypackage, https://a.pomfe.co/ybrqys.unitypackage

    Made in Shader Forge (http://acegikmo.com/shaderforge/)
    Special thanks to:
    Maki (http://maki.cat/)
    Cubed (https://github.com/cubedparadox)
    TCL (https://github.com/TCL987)
    Tomnautical (https://twitter.com/MrTomnomi)

    While you're down here, I'd appreciate it if you could check out my Patreon. I've been working on this shader since not long after I first joined, and it'd be great to have more time and resources to work with when starting new projects. I also have some fun things planned for future goals~!
    [​IMG]
    Regardless, I appreciate everyone who uses anything I create. It's because of all of you that I enjoy doing this so much. The VRChat community brings me the most happiness of anything in my life.



    NEW UPDATE: https://a.pomfe.co/cgwdrk.unitypackage

    Added "speed" sliders to the 2D tiled versions. This causes the overlay texture to scroll over time for a cute moving parallax effect.
    [​IMG]

    In addition, added (2D Tiled Transparent) and (Cubemap Transparent). These allow for transparent textures to be properly blended, but as a result they enable backface culling to avoid ugly sorting artifacts. This means one-sided meshes such as skirts and hair will only be visible from the outside.
    [​IMG]

    Also renamed "emission" to "intensity" to avoid confusion. Making it emissive only really serves to annoy people in worlds with bloom at the moment.


    ---
    About time I made a thread for this. I've done a little tidying up, so grab the new version even if I've already sent you the package privately.

    [​IMG]

    What it does is overlay a 360° projected texture onto your already UV-mapped main texture, which "moves" depending on your viewing angle, ignoring UVs and normals. This results in a visual effect similar to a screen-space texture, except always orientated vertically in world space, making it somewhat easier on the eyes in VR.

    There are two versions, plus unlit copies of each.
    Projection Overlay Texture (2D Tiled) will work with any 2D texture, but textures are pinched at vertical poles. Convergence in VR can be difficult to establish with small tiles.
    Projection Overlay Texture (Cubemap) will take a Unity-defined cube texture (includes skyboxes, reflection probe data etc.) as an overlay input with minimal distortion.

    Alpha value on color input determines overall texture desaturation, emission is a simple lighting multiplier. The Crossfade Overlay slider can be used to blend between the main texture (0) and the overlay texture (2).
    Assign a gradient texture to ramp (noenoe_toon_ramp included) for flat toon shading or leave blank for minimal smooth shading. Shadows can be disabled in your mesh renderer.

    Made in ShaderForge (http://acegikmo.com/shaderforge/)
    Using elements of Maki's Equirectangular Projection (http://maki.cat/)
    and Cubed's Flat Lit Toon Rainbow (https://github.com/cubedparadox/Cubeds-Unity-Shaders)

    Licensed under the Creative Commons Attribution 4.0 International License. All you need to know is that you're free to use, modify and redistribute even for commercial purposes.

    Download: https://a.pomfe.co/cgwdrk.unitypackage

    Old: https://a.pomfe.co/hulmtd.unitypackage
     
    #1 Noe, Dec 7, 2017
    Last edited: Jun 14, 2018
    LegacyPanda, weirdo, Mimi and 6 others like this.
  2. TheMrTorbi

    TheMrTorbi Member

    Joined:
    Dec 11, 2017
    Messages:
    13
    Likes Received:
    6
    VRChat:
    TheMrTorbi
    nice. thank you for this shader.
     
    desunesu likes this.
  3. Maki

    Maki New Member

    Joined:
    Nov 16, 2017
    Messages:
    3
    Likes Received:
    0
    VRChat:
    Maki
    :3 super cute shader!!
     
  4. Highom

    Highom New Member

    Joined:
    Dec 20, 2017
    Messages:
    3
    Likes Received:
    0
    VRChat:
    Highom
    thx for the shader :3 gonna try it out
     
  5. Kanjira

    Kanjira New Member

    Joined:
    Dec 23, 2017
    Messages:
    1
    Likes Received:
    0
    VRChat:
    Kanjira
    Hey NoeNoe, how would i get your cubemap shader to rotate in shader forge?
     
  6. Noe

    Noe Moderator
    Forum Staff

    Joined:
    Nov 20, 2017
    Messages:
    22
    Likes Received:
    43
    VRChat:
    NoeNoe
    Maki's the one with the rotating shader, I haven't really looked into that yet.

    Edit: Y-yeah, that's a difficult one. For now I've added rotation to the 2D tiled version, in which you can actually load an equirectangular image as a 2D texture.
    I did play around trying to mess with the cubemap direction input, but I'm not very experienced with trigonometry so didn't manage to get anything working. Most things I tried resulted in the cubemap being squished weirdly in one direction over time until it becomes a solid color.
     
    #6 Noe, Dec 24, 2017
    Last edited: Jan 2, 2018
  7. GhostCrunch

    GhostCrunch New Member

    Joined:
    Jan 14, 2018
    Messages:
    4
    Likes Received:
    1
    Thank you for making these shaders. I love them!
     
  8. GhostCrunch

    GhostCrunch New Member

    Joined:
    Jan 14, 2018
    Messages:
    4
    Likes Received:
    1
    Edit - nm, found what I was looking for.
     
    #8 GhostCrunch, Jan 17, 2018
    Last edited: Jan 17, 2018
  9. FlameG102

    FlameG102 Member

    Joined:
    Jan 4, 2018
    Messages:
    23
    Likes Received:
    4
    So here's a question:

    Before I found your wonderfully fun shader, I was just using the flat shader. Now, in that shader there's a handy way to use emission to create a nice glow in the dark effect. You can just black out whatever you don't want to glow, save it as a separate texture, and apply that in the emission slot.

    Now, with your shader, I know intensity is what you've renamed emission, but I can't seem to get it to work quite the same way. I've applied an overlay effect to my textures and I'm happy with that, but I'm not sure how to have both the overlay across the whole texture AND a glowing effect on specific parts of the texture.

    Is that possible?
     
  10. Noe

    Noe Moderator
    Forum Staff

    Joined:
    Nov 20, 2017
    Messages:
    22
    Likes Received:
    43
    VRChat:
    NoeNoe
    It is now!
     
  11. Creeperfaec101

    Creeperfaec101 New Member

    Joined:
    Feb 3, 2018
    Messages:
    3
    Likes Received:
    0
    VRChat:
    Creeperfaec101
    Okay so I'm not very experienced with all of this stuff, but I've made a model in Maya, and I used Mixamo to rig it because uuuhh rigging... But Mixamo makes the whole model into one object, and now I'm wondering if it's impossible for me to add this shader to only certain parts of the model, or if I really do need to have everything as separate objects or what? The UVs for the model are all unwrapped
     
  12. Noe

    Noe Moderator
    Forum Staff

    Joined:
    Nov 20, 2017
    Messages:
    22
    Likes Received:
    43
    VRChat:
    NoeNoe
    Probably best to pick up blender, it makes it quite easy to split materials.
     
  13. Creeperfaec101

    Creeperfaec101 New Member

    Joined:
    Feb 3, 2018
    Messages:
    3
    Likes Received:
    0
    VRChat:
    Creeperfaec101
    I've tried Blender before, but it's god such a weird layout and I just couldn't get used to it, which is why I stuck with Maya. Honestly I don't think it would have been a huge problem if I just knew how to rig the model by myself so that I wouldn't need to go through Mixamo.

    I was hoping maybe you had some masking feature in the shader, so that one could use transparency to block out which part of the model would be affected by the shader

    But don't worry, it's not that big of a deal. I was just wondering c:
     
  14. Noe

    Noe Moderator
    Forum Staff

    Joined:
    Nov 20, 2017
    Messages:
    22
    Likes Received:
    43
    VRChat:
    NoeNoe
    I know roughly how to do that, might put it in a future version.
     
  15. Creeperfaec101

    Creeperfaec101 New Member

    Joined:
    Feb 3, 2018
    Messages:
    3
    Likes Received:
    0
    VRChat:
    Creeperfaec101
    That would be greatly appreciated! In the meantime, I'm having fun with my avatar the way it is right now. Getting a lot of fun reactions from it, and I've already directed someone else to your shader ;)
     
  16. Lhun

    Lhun Member

    Joined:
    Jan 21, 2018
    Messages:
    115
    Likes Received:
    52
    VRChat:
    Lhun
    you are amazing. I love that you have instancing on your shader, this allowed me to make a crazy optimized version of my avatar that loads instantly almost everywhere.
     
  17. Lhun

    Lhun Member

    Joined:
    Jan 21, 2018
    Messages:
    115
    Likes Received:
    52
    VRChat:
    Lhun
    I'm with you, I hate blender so much. To be honest, metaseq is much, much easier for VRCHAT as it was basically designed for optimized game models and everything carries over. It even has native PMD support. It's designed for beginners.

    Maya really is a gold standard and nothing beats it. Blender should be used as an example for future generations of bad ui design. It's great under the hood but it;s like explaining peanut butter to a frog.

    [​IMG]
     
    Mr.Crane likes this.
  18. Mama Mercy

    Mama Mercy New Member

    Joined:
    Feb 25, 2018
    Messages:
    3
    Likes Received:
    0
    VRChat:
    Mama Mercy
    Is their anyway I can tint with this shader? my model's sleeves are see through atm and its bothering me
     
  19. UnrealModuli

    UnrealModuli New Member

    Joined:
    Mar 12, 2018
    Messages:
    1
    Likes Received:
    0
    VRChat:
    Hans_VR_Unity
  20. Noe

    Noe Moderator
    Forum Staff

    Joined:
    Nov 20, 2017
    Messages:
    22
    Likes Received:
    43
    VRChat:
    NoeNoe
    The new version should prevent that kind of issue. I've avoided including an unlit version because they can be obnoxious in VR, but I might add it back next time there's a "major" change.