{"id":54,"date":"2022-02-23T10:14:55","date_gmt":"2022-02-23T10:14:55","guid":{"rendered":"https:\/\/noirccc.net\/blog\/?p=54"},"modified":"2023-05-18T00:27:43","modified_gmt":"2023-05-18T00:27:43","slug":"genshin-facial-shader-real-time-demo-workflow","status":"publish","type":"post","link":"https:\/\/noirccc.net\/blog\/posts\/54","title":{"rendered":"Genshin Face Shader & Real-Time Rendering Demo Workflow"},"content":{"rendered":"\n

The previous demo has officially hit 1 million views on Bilibili (yay \u30fe(\u2267\u25bd\u2266*)o). Demo 1 (Bilibili)<\/a><\/p>\n\n\n\n

Being a very primitive test, it does have some limitations. For instance, not much work was put into the hair and clothes, these parts are largely just plain npr shading.<\/p>\n\n\n\n

Recently I’ve made another demo for stylized character rendering similar to Genshin Impact. This addresses some of the problems in the previous demo.<\/p>\n\n\n\n

Demo 2 (Bilibili)<\/a><\/p>\n\n\n\n

Environment\uff1aUnity 2020.3.22f1\uff0cURP 10.7.0<\/p>\n\n\n\n

Features:<\/p>\n\n\n\n

\u25c7 Utilizes facial dynamic shadow map for smooth shadow attenuation w\/o normal edit<\/p>\n\n\n\n

\u25c7 Ramp texture-based colour blending on shadow edges.<\/p>\n\n\n\n

\u25c7 Common NPR effects such as smoothed normals outlines, stylized specular, rim light, etc.<\/p>\n\n\n\n

\u25c7 Magica Cloth integration for some nice wind effects.<\/p>\n\n\n\n

We now have a quite polished stylized shading on the entire avatar rather than just the face. The facial shader has also received some fixes — the lightmap calculation no longer overcomplicates things.<\/p>\n\n\n\n

\/\/ Choose original lightmap L (light from left) or flipped lightmap R (light from right).\nfloat LightMap = lerp(surfaceData._lightMapR.r, surfaceData._lightMapL.r, step(RdotL, 0));\n\n\/\/ Calculate result.\nfloat litOrShadow = step((-FdotL + 1)) \/ 2, LightMap);<\/code><\/pre>\n\n\n\n
The SDF lightmap contains shadow distribution data covering 0~180 degrees on one side of the face, rather than 0~90 degrees. The tip of the nose will receive lighting even when directly facing away from the light. This means the lightmap should be appiled on all angles on the xz plane. All we need to do is modify FdotL (i.e. dot product of face forward direction and light direction), standardizing it to [0, 1], equal to the range of a color value.<\/p>\n\n\n\n
For more info check out this video: https:\/\/www.bilibili.com\/video\/BV15t4y1V76U<\/a><\/p>\n\n\n\n
Facial shader is based on UnityURPToonLitShaderExample, and has added support for facial dynamic shadow map & custom shadow colour.<\/p>\n\n\n\n
Repository for the shader\uff1arepo (Github)<\/a><\/p>\n\n\n\n
<\/i>\u00a0GitHub<\/span><\/a><\/div>
NoiRC256\/URPSimpleGenshinShaders<\/span><\/a><\/div>
<\/div><\/div>
<\/i>\u00a0<\/span><\/span><\/i>\u00a0<\/span><\/span><\/div><\/div>\n\n\n\n
Update: Currently supports single Directional Light (i.e. correct light color & intensity blending).<\/p>\n\n\n\n
TCP2 is also used here. TCP2 has a group of robust stylized shaders that can achieve common anime npr looks.<\/p>\n\n\n\n
Animation Workflow<\/h2>\n\n\n\n
\u2013 Character animation migration:<\/p>\n\n\n\n
Use FaceAndLips to create facial animations \u2192 In MMD, compose animations, create eye animations\uff0cexport vmd \u2192 In blender2.9 (with Cats plugin) import pmx and vmd\uff0cbuild and bake physics\uff0cexport fbx \u2192 import fbx to Unity.<\/p>\n\n\n\n
For Unity Humanoid animations, use blender2.9 (with Cats plugin) to convert MMD pmx models to fbx\uff0cimport to Unity and set Rig to be Humanoid. Realtime physics can be created with Magica Cloth.<\/p>\n\n\n\n
\u2013 Camera animation:<\/p>\n\n\n\n
Camera animations can be directly created in Timeline.<\/p>\n\n\n\n
These methods can be useful:<\/p>\n\n\n\n
1. Cinemachine vcams<\/p>\n\n\n\n
2. Keyframing in record mode<\/p>\n\n\n\n
Align With View (Ctrl + Shift + F) can align camera to scene view.<\/p>\n\n\n\n
Align View to Selected (Custom hotkey) can align scene view with camera.<\/p>\n\n\n\n
Scene<\/h2>\n\n\n\n
Screencap video is used as background. This is achieved by material with render texture that receives input from Video Player.
Unity Default Playables<\/a> allows Timeline to handle Video Player tracks.<\/p>\n\n\n\n
Curved Plane<\/a> helps give a 3D feeling to the background, but it is only visible in play mode.<\/p>\n\n\n\n
When using media as background, shadows on transparent ground can be achieved using this shader<\/a>\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
A URP real-time demo for Genshin Impact stylized character rendering, featuring custom shader and scene workflow.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[43],"tags":[58,71,53],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/noirccc.net\/blog\/wp-json\/wp\/v2\/posts\/54"}],"collection":[{"href":"https:\/\/noirccc.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/noirccc.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/noirccc.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/noirccc.net\/blog\/wp-json\/wp\/v2\/comments?post=54"}],"version-history":[{"count":17,"href":"https:\/\/noirccc.net\/blog\/wp-json\/wp\/v2\/posts\/54\/revisions"}],"predecessor-version":[{"id":621,"href":"https:\/\/noirccc.net\/blog\/wp-json\/wp\/v2\/posts\/54\/revisions\/621"}],"wp:attachment":[{"href":"https:\/\/noirccc.net\/blog\/wp-json\/wp\/v2\/media?parent=54"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/noirccc.net\/blog\/wp-json\/wp\/v2\/categories?post=54"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/noirccc.net\/blog\/wp-json\/wp\/v2\/tags?post=54"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}