525 lines
20 KiB
Markdown
525 lines
20 KiB
Markdown
|
# Unity URP Simplified Toon Lit Shader Example (for you to learn writing custom lit shader in URP)
|
|||
|
|
|
|||
|
|
This repository is NOT the full version shader.
|
|||
|
|
Currently, this repository is just a very simple and short 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.
|
|||
|
|
-----------------------------------------
|
|||
|
|
shader ON
|
|||
|
|
|
|||
|
|
shader OFF
|
|||
|
|
|
|||
|
|
shader ON
|
|||
|
|
|
|||
|
|
shader OFF
|
|||
|
|
|
|||
|
|
shader ON
|
|||
|
|
|
|||
|
|
shader OFF
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
We are now developing a "easy-to-use + high-performance + cross-platform(include mobile)" Closed source toon shader package - NiloToonURP,
|
|||
|
|
to meet the toon shading needs of most URP's user.
|
|||
|
|
|
|||
|
|
NiloToonURP is tested and working correctly on
|
|||
|
|
- Unity 2019.4LTS(URP 7.4.1 or above)
|
|||
|
|
- Unity 2020.3LTS(URP 10.4.0 or above)
|
|||
|
|
- Unity 2021.1.18f1(URP 11.0.0)
|
|||
|
|
|
|||
|
|
# Download NiloToonURP PC .exe demo (2020.3LTS build):
|
|||
|
|
- https://drive.google.com/file/d/1MubGDhlDRKKxR9xyl7fcLyECyBJdsqrI/view?usp=sharing
|
|||
|
|
|
|||
|
|
# Download NiloToonURP Android .apk demo (2020.3LTS build):
|
|||
|
|
- https://drive.google.com/file/d/13DdRKXZpugnK-rTeXTDcAHWLeiLzbKH_/view?usp=sharing
|
|||
|
|
|
|||
|
|
# NiloToonURP's demo runtime video:
|
|||
|
|
- https://youtu.be/q7VloWbkSaA
|
|||
|
|
- https://youtu.be/hBNs-7tyrU4
|
|||
|
|
- https://youtu.be/NI-n-cmTJHM
|
|||
|
|
- https://youtu.be/k1RMw_OogyM
|
|||
|
|
- https://youtu.be/dq4g0K1jbGM
|
|||
|
|
- https://youtu.be/nZhxKYcgFaY
|
|||
|
|
- https://youtu.be/A9MJ73C0f-M
|
|||
|
|
- https://youtu.be/Pkj6tpPThvg
|
|||
|
|
- https://youtu.be/SCOA3rmGz_A
|
|||
|
|
- https://youtu.be/cAeEKdYN7-Q
|
|||
|
|
|
|||
|
|
# 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 nilotoon@gmail.com
|
|||
|
|
- 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)
|
|||
|
|
|
|||
|
|
### Nijisanji & bilibili - VirtuaReal (https://www.nijisanji.jp/members?filter=VirtuaReal):
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
- https://www.bilibili.com/video/BV1G3411q7un?share_source=copy_web
|
|||
|
|
- https://www.bilibili.com/video/BV1QL411b78T?share_source=copy_web
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
- https://www.bilibili.com/video/BV1Sg411V7HU?share_source=copy_web
|
|||
|
|
- https://www.bilibili.com/video/BV1X64y1a7go?share_source=copy_web
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
- https://www.bilibili.com/video/BV18f4y1P7Vr?share_source=copy_web
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
- https://www.bilibili.com/video/BV12h411W7Sm?share_source=copy_web
|
|||
|
|
- https://www.bilibili.com/video/BV1764y1Y7MD?p=2&share_source=copy_web
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
- https://www.bilibili.com/video/BV12h411W7ff?share_source=copy_web
|
|||
|
|
|
|||
|
|
|
|||
|
|
- https://www.bilibili.com/video/BV1nQ4y1a7ht?share_source=copy_web
|
|||
|
|
|
|||
|
|
|
|||
|
|
- https://www.bilibili.com/video/BV1Cg411V7qm?share_source=copy_web
|
|||
|
|
|
|||
|
|
- https://www.bilibili.com/video/BV1ef4y1H7h9?share_source=copy_web
|
|||
|
|
- https://www.bilibili.com/video/BV1Jh411W7RQ?share_source=copy_web
|
|||
|
|
- https://www.bilibili.com/video/BV1q3411B74t?share_source=copy_web
|
|||
|
|
|
|||
|
|
### VirtuaReal Star成员 - hanser (https://space.bilibili.com/11073)
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
- https://www.bilibili.com/video/BV1CR4y1j7bY?share_source=copy_web
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
- https://www.bilibili.com/video/BV1pF411v7gu
|
|||
|
|
|
|||
|
|
(4K画质)hanser个人演唱会《海上油菜花》
|
|||
|
|
|
|||
|
|
- https://www.bilibili.com/video/BV1Bq4y1r7bn (part of the rendering is NiloToonURP)
|
|||
|
|
|
|||
|
|
|
|||
|
|
- https://www.bilibili.com/video/BV1pp4y1s7Up
|
|||
|
|
|
|||
|
|
### 【崩坏学园2】「启晨之星」菲米莉丝印象曲 (https://space.bilibili.com/133934):
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
- https://www.bilibili.com/video/BV1Z64y1b7BW?share_source=copy_web
|
|||
|
|
- https://www.bilibili.com/video/BV1kU4y1c7AG?share_source=copy_web
|
|||
|
|
|
|||
|
|
### Kanauru (https://www.youtube.com/user/kanauru):
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
- https://youtu.be/2CTSe6Q5-xI (shader of "Kureiji Ollie model + environment + postprocess")
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
- https://youtu.be/m_LT957vLeY (shader of "characters + environment + postprocess")
|
|||
|
|
|
|||
|
|
# Other NiloToonURP's images (gallery)
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
-------------------
|
|||
|
|
|
|||
|
|
|
|||
|
|
SHADER ON
|
|||
|
|
|
|||
|
|
|
|||
|
|
BEFORE
|
|||
|
|
|
|||
|
|
AFTER:
|
|||
|
|
|
|||
|
|
see it in motion-> https://youtu.be/D9ocVzGJfI8
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
3D enviroment model TEST
|
|||
|
|
|
|||
|
|
|
|||
|
|
see it in motion-> https://youtu.be/GcW0pNo-zus
|
|||
|
|
---
|
|||
|
|
湊 あくあ（みなと あくあ，Minato Aqua） model TEST
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
see it in motion-> https://youtu.be/7zICgzdxuGg
|
|||
|
|
---
|
|||
|
|
see it in motion-> https://youtu.be/X3XoYMTleJ0
|
|||
|
|
---
|
|||
|
|
Auto Phong tessellation
|
|||
|
|
|
|||
|
|
(shader off, no tessellation)
|
|||
|
|
|
|||
|
|
(shader on, no tessellation)
|
|||
|
|
|
|||
|
|
(shader on, enable tessellation! Phong tessellation can make your model smooth without changing your .fbx)
|
|||
|
|
|
|||
|
|
see it in motion-> https://youtu.be/D-MxyBa0nJE
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
Kawaii model TEST (@ganbaru_sisters)
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
Upgraded to Unity2020.2 (URP 10.2.1)
|
|||
|
|
SHADER ON
|
|||
|
|
|
|||
|
|
SHADER OFF
|
|||
|
|
|
|||
|
|
HD
|
|||
|
|
|
|||
|
|
|
|||
|
|
shader ON
|
|||
|
|
|
|||
|
|
shader OFF
|
|||
|
|
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
BEFORE
|
|||
|
|
|
|||
|
|
AFTER
|
|||
|
|
|
|||
|
|
see it in motion-> https://youtu.be/KpRkxPnHuK0
|
|||
|
|
---
|
|||
|
|
BEFORE
|
|||
|
|
|
|||
|
|
AFTER
|
|||
|
|
|
|||
|
|
(more shadow from trees)
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
BEFORE
|
|||
|
|
|
|||
|
|
AFTER:
|
|||
|
|
|
|||
|
|
see it in motion-> https://youtu.be/hUWacEQH6js
|
|||
|
|
---
|
|||
|
|
BEFORE
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
AFTER:
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
BEFORE
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
AFTER:
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
add 2D hair shadow & rim light
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
see it in motion-> https://youtu.be/S67GlGAnvWA
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
BEFORE
|
|||
|
|
|
|||
|
|
AFTER:
|
|||
|
|
|
|||
|
|
|
|||
|
|
see it in motion-> https://youtu.be/M6FKoEiOAzU
|
|||
|
|
---
|
|||
|
|
-------------------
|
|||
|
|
BEFORE
|
|||
|
|
|
|||
|
|
AFTER:
|
|||
|
|
Sunny + StreetLight ON
|
|||
|
|
|
|||
|
|
Sunny + StreetLight OFF
|
|||
|
|
|
|||
|
|
Night + StreetLight ON
|
|||
|
|
|
|||
|
|
Night + StreetLight OFF
|
|||
|
|
|
|||
|
|
see it in motion -> https://youtu.be/jDSnJmZrKPw
|
|||
|
|
---
|
|||
|
|
BEFORE
|
|||
|
|
|
|||
|
|
AFTER
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
BEFORE
|
|||
|
|
|
|||
|
|
AFTER
|
|||
|
|
|
|||
|
|
see it in motion -> https://youtu.be/ZfSZOHTBypc
|
|||
|
|
---
|
|||
|
|
BEFORE
|
|||
|
|
|
|||
|
|
AFTER
|
|||
|
|
|
|||
|
|
see it in motion -> https://youtu.be/EgxiWPk-vaE
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
BEFORE
|
|||
|
|
|
|||
|
|
AFTER
|
|||
|
|
|
|||
|
|
see it in motion -> https://youtu.be/Ty4DXLFqqDo
|
|||
|
|
---
|
|||
|
|
BEFORE
|
|||
|
|
|
|||
|
|
AFTER
|
|||
|
|
|
|||
|
|
see it in motion -> https://youtu.be/cebGl_MaWnI
|
|||
|
|
---
|
|||
|
|
BEFORE
|
|||
|
|
|
|||
|
|
AFTER
|
|||
|
|
|
|||
|
|
see it in motion ->https://youtu.be/nl5z0r8a9vk
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
see it in motion -> https://youtu.be/uVI_QOioER4
|
|||
|
|
---
|
|||
|
|
Fake Skin SSS & specular
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
BEFORE
|
|||
|
|
|
|||
|
|
AFTER
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
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
|
|||
|
|
|
|||
|
|
|
|||
|
|
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
|
|||
|
|
|
|||
|
|
|
|||
|
|
before calculate smooth normal (printscreen of tutorial shader, not NiloToonURP)
|
|||
|
|
|
|||
|
|
after calculate smooth normal (printscreen of tutorial shader, not NiloToonURP)
|
|||
|
|
|
|||
|
|
|
|||
|
|
*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)
|
|||
|
|
- https://3d.nicovideo.jp/
|
|||
|
|
- https://hub.vroid.com/
|
|||
|
|
|
|||
|
|
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
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
More old screenshots from the Full version shader(not yet released):
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
|
|||
|
|
https://youtu.be/IP293mAmBCk
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
different Background image TEST
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
credits
|
|||
|
|
------------------------
|
|||
|
|
model's creator in shader demo image/video:
|
|||
|
|
- https://i-fox.club/pcr/
|
|||
|
|
- https://sketchfab.com/3d-models/band-of-sisters-2f1c0626d4cf4fd286c4cf5d109f7a32
|
|||
|
|
- miHoYo - Honkai Impact 3
|
|||
|
|
- Kuro Game - Punishing: Grey Raven
|
|||
|
|
- Azur Lane: Crosswave
|
|||
|
|
- Sour式鏡音リン
|
|||
|
|
- Unity-Chan
|
|||
|
|
- https://www.bilibili.com/blackboard/activity-mrfzrlha.html
|
|||
|
|
- 【オリジナル3Dモデル】Eve -イヴ- by ganbaru_sisters https://booth.pm/en/items/2557029
|
|||
|
|
- https://www.mmd.hololive.tv/
|
|||
|
|
- Japanese Street by Art Equilibrium https://assetstore.unity.com/packages/3d/environments/urban/japanese-street-170162
|
|||
|
|
- miHoYo - Genshin Impact
|
|||
|
|
- 【セール中】【オリジナル3Dモデル】ドラゴニュート・シェンナ by rokota https://rokota.booth.pm/items/2661189
|
|||
|
|
- Cygames - Uma Musume
|
|||
|
|
- Cygames/Arc System Works - Granblue Fantasy Versus
|
|||
|
|
- 魔使マオ by 百舌谷@mozuya_
|
|||
|
|
- QuQu - https://sonovr.booth.pm/
|
|||
|
|
- nero -ネロ- by KM3 Doll - https://booth.pm/en/items/3167314
|
|||
|
|
- Kanauru's credit list - https://youtu.be/2CTSe6Q5-xI
|
|||
|
|
- YOYOGIMORI (【VRC / VRM 対応3Dモデル】imiut ver3.03) - https://yoyogi-mori.booth.pm/items/2040691
|
|||
|
|
- YOYOGIMORI (【VRC / VRM 対応3Dモデル】白鳥 -Shiratori- ver3.03) - https://yoyogi-mori.booth.pm/items/2482022
|
|||
|
|
- Blue Archive Shun
|
|||
|
|
- アイドリープライド，IDOLY PRIDE
|