KURPToonShading

March 6, 2024 · View on GitHub

Unity URP Toon Shading Library.

Unity Version: 2023.2.12f1

Artstation showcase: https://www.artstation.com/artwork/aox2xq


D%NWMLA2_NW(8Z4A1GCNUXJ

https://github.com/SelfishKrus/K_URP_ToonShading/assets/79186991/194d93e4-68e8-40f3-b476-1914dc55ddb7

https://github.com/SelfishKrus/K_URP_ToonShading/assets/79186991/53d0ee6a-51b1-4c8d-a2e1-28b081e3d525

https://github.com/SelfishKrus/K_URP_ToonShading/assets/79186991/5ad9029f-ea81-4a52-a30d-30037affc9e7

Image Sequence_003_0000 Image Sequence_011_0000 Image Sequence_007_0000 Image Sequence_010_0000

Maya

Toon Shading in ShaderFX

  • Toon shader for WYSIWYW

    dx11 toon shader_

    dx11 toon shader

Encode average normals in uv2 (Deprecated)

Deprecated due to undesirable gap of outlines

Asset Specification

  • _IlmTex
    • r - specular layer

      Specular Layer ValueMaterialFeature
      0generalno specular, no rim
      50generalonly rim
      100leatherspecular and rim
      ≥200metalonly specular
    • g - shadow offset

    • b - specular range

    • a - inner lines

  • Vertex Color
    • r - AO
    • g - position ID
    • b - Z offset for outline offset
    • a - outline thickness
  • UV
    • TEXCOORD0 - uv0 - for texture mapping
    • TEXCOORD1 - uv1 - to sample texture for uv lines
    • TEXCOORD2 - uv2 - encoded average normals
    • TEXCOORD3 - uv3 - tri-planar projected uv for shadow hatch
  • Tangent
    • as the smooth normal direction for outline offset

Uber Toon Shader

  • Diffuse

    • Control diffuse with AnimationCurve

      Diffuse illuminance controlled by AnimationCurve

      Diffuse illuminance controlled by AnimationCurve

      Pass AnimationCurve to shader as GradientTexture

      Pass AnimationCurve to shader as GradientTexture

    • Lerp between BaseColor Map and SSSColor Map

      base color and sss color

      base color and sss color

  • Specular from Direct Light

    direct light specular

    direct light specular

  • Rim Specular

    • option 1 - by depth difference

    • Depth Difference Specular

      Depth Difference Specular

    • option 2 - by NoV

      NoV Specular

      NoV Specular

Outline

Outline

Outline

  • Outlines include
    • Back-face extrusion in NDC
    • Edge detection by Sobel depth
  • Inner lines include
    • Edge detection by Sobel normal
    • Texture
    • UV lines

Shadow

  • Custom shadow pattern

    • Sample shadow pattern texture via Tri-planar projection UV

      uv3 - Tri-planar projection UV

      uv3 - Tri-planar projection UV

    • Shadow hatch by SD

      Customized shadow hatch texuture

      Customized shadow hatch texuture

  • Custom high-resolution shadow map for character

    • 2048x shadow map

      Custom high-res shadow map

      Custom high-res shadow map

    • PCSS

      Percentage closer soft shadow with different PCF step

      Percentage closer soft shadow with different PCF step

    • Supports for directional light mode (orthographic projection) and spot light mode (perspective projection)

      Orthographic shadow and perspective shadow

      Orthographic shadow and perspective shadow

Post-Process

  • Streak bloom

    Streak Bloom

    Streak Bloom

Tips

  • Dfference between SampleSceneDepth(float2 uv) and LoadSceneDepth(uint2 uv) in URP Shader Library:
    • SampleSceneDepth
      • screen space uv, ranging from 0 to 1
      • bilinear filter. smoother
    • LoadSceneDepth
      • screen space uv, ranging from 0 to screen pixel size
      • no filtering
  • Add DepthOnly Pass in shader to make fragment depth written in _CameraDepthTexture
  • Params should make sense to artists, and range being clamped between 0 to 1
  • In maya, tangent can’t be modified because it’s determined by UV.
  • Coordinate system difference
    • Maya - left-hand coordinate. Y up;
    • Unity - right-hand coordinate; Y up;
  • When exporting FBX, make sure coordinate axes of Object Space align with the one of World Space in Maya

Ref

Learn how to do stylized shading with Shader Graph - SIGGRAPH 2019

一些较少人提过的二次元渲染方法

[UFSH2023]虚幻引擎5全端卡通渲染管线 | YivanLee S1项目_哔哩哔哩_bilibili