GithubHelp home page GithubHelp logo

ycysdf / unityurptoonlitshaderexample Goto Github PK

View Code? Open in Web Editor NEW

This project forked from colinleung-nilocat/unityurptoonlitshaderexample

0.0 0.0 0.0 381 KB

A very simple toon lit shader example, for you to learn writing custom lit shader in Unity URP

Home Page: https://www.youtube.com/channel/UCsvlGOZyqjd68ZUUmgqwj0g

License: MIT License

HLSL 61.36% ShaderLab 38.64%

unityurptoonlitshaderexample's Introduction

About this repository

This repository is NOT the full version NiloToonURP. This repository only contains a very simple and short URP toon shader example, only for tutorial purposes, it is under MIT license so you can do whatever you want with the code. If you want to keep the current tutorial shader, please fork it or download a copy now since it may be removed in the future.

NiloToonURP(full version)'s rendering

shader ON screenshot shader OFF screenshot shader ON screenshot shader OFF screenshot shader ON screenshot shader OFF screenshot shader ON screenshot shader OFF screenshot Outline options(1/2/3)
screenshot screenshot screenshot screenshot screenshot screenshot shader ON screenshot shader OFF screenshot screenshot screenshot screenshot screenshot

We are now developing an "easy-to-use + high-performance + cross-platform(include mobile)" Closed source toon shader package - NiloToonURP, to meet the toon shading needs of Unity URP user.

NiloToonURP is supporting:

  • Unity 2021.3LTS(URP 12.x)
  • Unity 2022.3LTS(URP 14.x)

Download NiloToonURP PC .exe demo (2021.3.17LTS build):

Download NiloToonURP Android .apk demo (2021.3.17LTS build):

NiloToonURP's demo runtime video:

NiloToonURP's UI preview:

How to get NiloToonURP full source code?

If you or your company/organization/team needs:

  • latest full source code (with all detail comments and notes, NOT Obfuscated code, NOT .dll)
  • latest user document
  • perpetual royalty-free commercial license
  • every future update
  • (optional) we set up your character models's rendering in the best way possible for you, using NiloToonURP
  • (optional) tech support
  • (optional) your project-specific customization and support

of NiloToonURP for your URP project, please send the following info to [email protected]

  • name (your personal name or your company/organization/team's name)
  • a google account email for gaining permission to download all NiloToonURP files in google drive
  • any public website that shows your/your company/organization/team's work or public media

NiloToonURP user's creations (public media, not NDA contents)

*we only provided NiloToonURP's download permission + tech support, we didn't work on these creations directly

Genshin Impact MV - When The Stars Align (Genshin Impact website -> http://genshin.hoyoverse.com)

screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot

VSPO!(ぶいすぽっ!【公式】) (https://www.youtube.com/@Vspo77)

screenshot screenshot screenshot screenshot screenshot screenshot

VirtuaReal Star - 泠鸢yousa (https://space.bilibili.com/282994)

screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot

VSPO!(ぶいすぽっ!) - 花芽すみれ (https://www.youtube.com/@KagaSumire)

screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot

VirtuaReal / Nijisanji CN - 七海Nana7mi (https://space.bilibili.com/434334701)

screenshot screenshot screenshot screenshot

screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot

screenshot screenshot screenshot screenshot screenshot screenshot screenshot

VirtuaReal Star - hanser (https://space.bilibili.com/11073)

screenshot screenshot screenshot screenshot

VSPO!(ぶいすぽっ!【公式】) (https://www.youtube.com/@Vspo77)

screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot

hololive - Shion Ch. 紫咲シオン (https://www.youtube.com/@MurasakiShion)

screenshot screenshot screenshot screenshot

  • 【holo27 MV】紫咲シオン x ラプラス・ダークネス - リップシンク【ホロライブ x DECO27】-> https://youtu.be/NjtIAuZQN_E

VSPO!(ぶいすぽっ!) - 八雲べに (https://www.youtube.com/@yakumo_beni)

screenshot screenshot screenshot screenshot screenshot

screenshot screenshot screenshot

screenshot screenshot screenshot screenshot screenshot screenshot screenshot

VirtuaReal Star - 泠鸢yousa (https://space.bilibili.com/282994)

screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot

Nijisanji & bilibili - VirtuaReal (https://www.nijisanji.jp/talents?filter=virtuareal):

screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot

ISEGYE IDOL (이세계아이돌) - 비챤 VIichan (https://www.youtube.com/@viichan116)

screenshot screenshot screenshot screenshot

screenshot screenshot screenshot screenshot screenshot screenshot

崩坏学园2-灵依娘desu (https://space.bilibili.com/133934):

screenshot screenshot screenshot screenshot screenshot screenshot

懶貓子 & 杏仁ミル

screenshot screenshot

Rumi ch. 懶貓子 (https://youtu.be/Zlef92wDMnA):

screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot

screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot

screenshot screenshot screenshot screenshot

screenshot

screenshot screenshot screenshot screenshot screenshot

screenshot screenshot screenshot

screenshot screenshot screenshot screenshot

screenshot screenshot

screenshot screenshot screenshot screenshot screenshot

screenshot

screenshot screenshot screenshot

screenshot

screenshot screenshot screenshot screenshot screenshot

VSPO!(ぶいすぽっ!) - 英リサ.Hanabusa Lisa (https://www.youtube.com/@lisahanabusa)

screenshot screenshot screenshot screenshot

VSPO!(ぶいすぽっ!) - 胡桃のあ (https://www.youtube.com/@963Noah)

screenshot screenshot screenshot

myer gugu(崩坏的栗子_108番) (https://www.artstation.com/myergugu)

screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot

VirtuaReal Star - 泠鸢yousa (https://space.bilibili.com/282994)

screenshot screenshot screenshot screenshot screenshot screenshot screenshot

Nijisanji & bilibili - VirtuaReal (https://www.nijisanji.jp/talents?filter=virtuareal):

screenshot screenshot screenshot screenshot

screenshot screenshot screenshot screenshot screenshot (after clicking the link below, it will require you to press enter on the link again in your browser)

screenshot (after clicking the link below, it will require you to press enter on the link again in your browser)

screenshot screenshot screenshot screenshot screenshot

screenshot screenshot

screenshot screenshot screenshot

screenshot screenshot screenshot

screenshot

screenshot

screenshot

screenshot screenshot screenshot screenshot

screenshot screenshot screenshot

screenshot

screenshot

screenshot

screenshot screenshot screenshot screenshot screenshot screenshot

VirtuaReal Star - hanser (https://space.bilibili.com/11073)

screenshot screenshot

screenshot

VirtuaReal Star - 泠鸢yousa (https://space.bilibili.com/282994)

screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot

screenshot screenshot screenshot

screenshot screenshot

screenshot screenshot screenshot screenshot

screenshot screenshot screenshot (you need to enter the link to the browser again in order to play it)

Other NiloToonURP's images (gallery)

shader ON screenshot normal debug screenshot shader OFF screenshot

screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot


SHADER ON screenshot screenshot BEFORE screenshot AFTER: screenshot see it in motion-> https://youtu.be/D9ocVzGJfI8


3D enviroment model TEST
screenshot screenshot see it in motion-> https://youtu.be/GcW0pNo-zus

湊 あくあ(みなと あくあ,Minato Aqua) model TEST screenshot screenshot screenshot see it in motion-> https://youtu.be/7zICgzdxuGg

see it in motion-> https://youtu.be/X3XoYMTleJ0

Auto Phong tessellation

(shader off, no tessellation) screenshot (shader on, no tessellation) screenshot (shader on, enable tessellation! Phong tessellation can make your model smooth without changing your .fbx) screenshot see it in motion-> https://youtu.be/D-MxyBa0nJE

Kawaii model TEST (@ganbaru_sisters) screenshot screenshot

Upgraded to Unity2020.2 (URP 10.2.1) SHADER ON screenshot SHADER OFF screenshot HD screenshot

shader ON screenshot shader OFF screenshot


BEFORE screenshot AFTER screenshot see it in motion-> https://youtu.be/KpRkxPnHuK0

BEFORE screenshot AFTER screenshot (more shadow from trees) screenshot

BEFORE screenshot AFTER: screenshot see it in motion-> https://youtu.be/hUWacEQH6js

BEFORE

screenshot

AFTER:

screenshot

BEFORE

screenshot

AFTER:

screenshot

add 2D hair shadow & rim light

screenshot

see it in motion-> https://youtu.be/S67GlGAnvWA


BEFORE screenshot AFTER: screenshot

see it in motion-> https://youtu.be/M6FKoEiOAzU


BEFORE screenshot AFTER: Sunny + StreetLight ON screenshot Sunny + StreetLight OFF screenshot Night + StreetLight ON screenshot Night + StreetLight OFF screenshot see it in motion -> https://youtu.be/jDSnJmZrKPw

BEFORE screenshot AFTER screenshot

BEFORE screenshot AFTER screenshot see it in motion -> https://youtu.be/ZfSZOHTBypc

BEFORE screenshot AFTER screenshot see it in motion -> https://youtu.be/EgxiWPk-vaE


BEFORE screenshot AFTER screenshot see it in motion -> https://youtu.be/Ty4DXLFqqDo

BEFORE screenshot AFTER screenshot see it in motion -> https://youtu.be/cebGl_MaWnI

BEFORE screenshot AFTER screenshot see it in motion ->https://youtu.be/nl5z0r8a9vk

screenshot screenshot screenshot see it in motion -> https://youtu.be/uVI_QOioER4

Fake Skin SSS & specular screenshot screenshot

BEFORE screenshot AFTER screenshot

What is included in this "simplified version" toon lit shader repository?

This repository contains a very simple toon lit shader example, to help people writing their first custom toon lit shader in URP.

This example shader's default result(without editing material params) = the following picture screenshot

Because this example toon lit shader aims to help people learning shader writing in URP, it is an extremely simplified version of the full version one. This repository only contains ~10% of the full version shader, which only contains the most useful & easy to understand sections, to make sure everyone can understand the shader code easily.

It is actually a "How to write your first custom lit shader in URP" example, instead of a good-looking toon lit shader example (lots of toon lit tricks are not included in this example shader, for tutorial reason).

Why creating this "simplified version" toon lit shader?

Lots of my shader friends are looking for a toon lit example shader in URP (not Shader Graph), I want them to switch to URP with me (instead of still staying in built-in RP), so I decided to provide a simple enough URP toon lit shader example.

How to try this simplified toon lit example shader in my URP project?

  1. Clone all .shader & .hlsl files into your URP project.
  2. Put these files inside the same folder.
  3. Change your character's material's shader to "SimpleURPToonLitExample(With Outline)"
  4. make sure at least _BaseMap(albedo) is assigned
  5. setup DONE, you can now test your character with light probe/directional light/point light/spot light
  6. edit the material properties to see how the render result changes
  7. Most important: open these shader files, spend some time reading them, you will understand how to write custom lit shader in URP very quickly
  8. Most important: open "SimpleURPToonLitOutlineExample_LightingEquation.hlsl", edit it, experiment with your own toon lighting equation ideas, which is the key part of toon lit shader!

I see the shader is working now, but the outline is broken?

For this tutorial shader, you can let Unity to calculate smooth normal for you, which can produce better outline, but doing this will make lighting slightly incorrect.

  1. click your character's .fbx
  2. In the model tab
  3. edit "Normals" to Calculate
  4. edit "Smoothing Angle" to 180

screenshot
before calculate smooth normal (printscreen of tutorial shader, not NiloToonURP)
screenshot
after calculate smooth normal (printscreen of tutorial shader, not NiloToonURP) screenshot

*NiloToonURP contains a few editor C# scripts, which can help the shader to produce correct lighting and perfect outline together.

What is NOT included in this simplified example shader?

For simplicity reason, I removed most of the features from the NiloToonURP (deleted 90% of the original shader), else this example shader will be way too complex for reading & learning. The removed features are:

  • face anime lighting (auto-fix face ugly lighting due to vertex normal without modifying .fbx, very important)
  • smooth outline normal auto baking (fix ugly outlines without modifying .fbx once you attach a script on character, very important)
  • auto 2D hair shadow on face (very important, it is very difficult to produce good looking shadow result using shadowmap)
  • sharp const width rim light (Blue Protocol / Genshin Impact)
  • tricks to render eye/eyebrow over hair
  • hair "angel ring" reflection
  • PBR specular lighting (GGX)
  • HSV control shadow & outline color
  • 2D mouth renderer
  • almost all the extra texture input options like roughness, specular, normal map, detail map...
  • LOTS of sliders to control lighting, final color & outline
  • per character "dither fadeinout / rim light / tint / lerp..." control script
  • volume override control of global "dither fadeinout / rim light / tint / lerp..."
  • anime postprocessing
  • auto phong tessellation
  • perspective removal per character
  • ***just too much for me to write all removed feature here, the full / lite version shader is a totally different level product

How to get a test character model?

The easiest way to get a character model is by downloading Unity-Chan in the assetstore.

Also, here are some websites that can download models(If the creator allows it)

if you downloaded a .pmx file, use MMD4Mecanim to convert it to .fbx & prefab directly inside unity http://stereoarts.jp/

if you downloaded a .vrm file, use UniVRM to convert it to .fbx & prefab directly inside unity https://github.com/vrm-c/UniVRM

Editor environment requirement

  • URP 10.3.2
  • Unity 2020.3

Apply our shader to another model (2020-2 early version screen shots) https://youtu.be/uVI_QOioER4

screenshot screenshot screenshot screenshot screenshot screenshot

More old screenshots from the Full version shader(not yet released):

screenshot https://youtu.be/IP293mAmBCk

screenshot screenshot screenshot

screenshot screenshot

different Background image TEST screenshot screenshot screenshot screenshot screenshot

Credits

model's creator in shader demo image/video:

unityurptoonlitshaderexample's People

Contributors

colinleung-nilocat avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.