BlueRose/BlueRoseNote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Init

Browse Source
This commit is contained in:
BlueRose
2025-08-02 12:09:34 +08:00
commit e70b01cdca
2785 changed files with 575579 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
03-UnrealEngine/卡通渲染相关资料/渲染功能/其他渲染功能/Toon眉毛渲染.md Normal file
View File

@@ -0,0 +1,123 @@
---
title: Toon眉毛渲染
date: 2023-12-08 17:48:07
excerpt:
tags:
rating: ⭐
---
## 有关眉毛、表情需要使用 模板功能
UTS使用模板
![[08-Assets/Images/ImageBag/UrealEngineNPR/UTS表情.png]]
![[08-Assets/Images/ImageBag/UrealEngineNPR/UTS表情_StencilOut.png]]
![[08-Assets/Images/ImageBag/UrealEngineNPR/UTS表情_StencilMask.png]]
```
Stencil
{
Ref[_StencilNo] //设置渲染的模板缓存值，0~255
Comp[_StencilComp] //模板测试的通过条件，有除了equal，还有Greater、Less、Always、Never等，类似ZTest。
Pass[_StencilOpPass] //表示通过模板测试和Z测试（注意是都通过）的像素，怎么处置它的模板值。
Fail[_StencilOpFail] //表示通过了模板测试但没通过Z测试的像素，怎么处置它的模板值。
}
_UTS_StencilMode mode = (_UTS_StencilMode)(material.GetInt(ShaderPropStencilMode));
switch (mode)
{
case _UTS_StencilMode.Off:
// material.SetInt(ShaderPropStencilNo,0);
material.SetInt(ShaderPropStencilComp, (int)_StencilCompFunction.Disabled);
material.SetInt(ShaderPropStencilOpPass, (int)_StencilOperation.Keep);
material.SetInt(ShaderPropStencilOpFail, (int)_StencilOperation.Keep);
break;
case _UTS_StencilMode.StencilMask:
// material.SetInt(ShaderPropStencilNo,0);
material.SetInt(ShaderPropStencilComp, (int)_StencilCompFunction.Always);
material.SetInt(ShaderPropStencilOpPass, (int)_StencilOperation.Replace);
material.SetInt(ShaderPropStencilOpFail, (int)_StencilOperation.Replace);
break;
case _UTS_StencilMode.StencilOut:
// material.SetInt(ShaderPropStencilNo,0);
material.SetInt(ShaderPropStencilComp, (int)_StencilCompFunction.NotEqual);
material.SetInt(ShaderPropStencilOpPass, (int)_StencilOperation.Keep);
material.SetInt(ShaderPropStencilOpFail, (int)_StencilOperation.Keep);
break;
}
```
七大罪中使用使用了深度测试 Greater Equal.(默认是 less Equal)。但这个方式可能在UE4里不太行，因为UE4的深度测试是全局的？
这个应该需要创建一个MeshProcessor来实现：
```c#
FSingleLayerWaterPassMeshProcessor::FSingleLayerWaterPassMeshProcessor(const FScene* Scene, const FSceneView* InViewIfDynamicMeshCommand, const FMeshPassProcessorRenderState& InPassDrawRenderState, FMeshPassDrawListContext* InDrawListContext)
: FMeshPassProcessor(Scene, Scene->GetFeatureLevel(), InViewIfDynamicMeshCommand, InDrawListContext)
, PassDrawRenderState(InPassDrawRenderState)
{
if (SingleLayerWaterUsesSimpleShading(Scene->GetShaderPlatform()))
{
// Force non opaque, pre multiplied alpha, transparent blend mode because water is going to be blended against scene color (no distortion from texture scene color).
FRHIBlendState* ForwardSimpleWaterBlendState = TStaticBlendState<CW_RGBA, BO_Add, BF_One, BF_InverseSourceAlpha>::GetRHI();
PassDrawRenderState.SetBlendState(ForwardSimpleWaterBlendState);
}
}
//默认是CF_DepthNearOrEqual，做这个效果可能就要使用CF_DepthFartherOrEqual
void SetupBasePassState(FExclusiveDepthStencil::Type BasePassDepthStencilAccess, const bool bShaderComplexity, FMeshPassProcessorRenderState& DrawRenderState)
{
DrawRenderState.SetDepthStencilAccess(BasePassDepthStencilAccess);
if (bShaderComplexity)
{
// Additive blending when shader complexity viewmode is enabled.
DrawRenderState.SetBlendState(TStaticBlendState<CW_RGBA, BO_Add, BF_One, BF_One, BO_Add, BF_Zero, BF_One>::GetRHI());
// Disable depth writes as we have a full depth prepass.
DrawRenderState.SetDepthStencilState(TStaticDepthStencilState<false, CF_DepthNearOrEqual>::GetRHI());
}
}
```
设置位置在于FXXXPassMeshProcessor::Process()中的SetDepthStencilStateForBasePass()中。需要bMaskedInEarlyPass为false，GetDepthStencilAccess为DepthRead。
```c#
const bool bMaskedInEarlyPass = (MaterialResource.IsMasked() || Mesh.bDitheredLODTransition) && MaskedInEarlyPass(GShaderPlatformForFeatureLevel[FeatureLevel]);
if (bEnableReceiveDecalOutput)
{
// Set stencil value for this draw call
// This is effectively extending the GBuffer using the stencil bits
const uint8 StencilValue = GET_STENCIL_BIT_MASK(RECEIVE_DECAL, PrimitiveSceneProxy ? !!PrimitiveSceneProxy->ReceivesDecals() : 0x00)
| STENCIL_LIGHTING_CHANNELS_MASK(PrimitiveSceneProxy ? PrimitiveSceneProxy->GetLightingChannelStencilValue() : 0x00);
if (bMaskedInEarlyPass)
{
DrawRenderState.SetDepthStencilState(TStaticDepthStencilState<
false, CF_Equal,
true, CF_Always, SO_Keep, SO_Keep, SO_Replace,
false, CF_Always, SO_Keep, SO_Keep, SO_Keep,
0xFF, GET_STENCIL_BIT_MASK(RECEIVE_DECAL, 1) | STENCIL_LIGHTING_CHANNELS_MASK(0x7)
>::GetRHI());
DrawRenderState.SetStencilRef(StencilValue);
}
else if (DrawRenderState.GetDepthStencilAccess() & FExclusiveDepthStencil::DepthWrite)
{
DrawRenderState.SetDepthStencilState(TStaticDepthStencilState<
true, CF_GreaterEqual,
true, CF_Always, SO_Keep, SO_Keep, SO_Replace,
false, CF_Always, SO_Keep, SO_Keep, SO_Keep,
0xFF, GET_STENCIL_BIT_MASK(RECEIVE_DECAL, 1) | STENCIL_LIGHTING_CHANNELS_MASK(0x7)
>::GetRHI());
DrawRenderState.SetStencilRef(StencilValue);
}
else
{
DrawRenderState.SetDepthStencilState(TStaticDepthStencilState<
false, CF_GreaterEqual,
true, CF_Always, SO_Keep, SO_Keep, SO_Replace,
false, CF_Always, SO_Keep, SO_Keep, SO_Keep,
0xFF, GET_STENCIL_BIT_MASK(RECEIVE_DECAL, 1) | STENCIL_LIGHTING_CHANNELS_MASK(0x7)
>::GetRHI());
DrawRenderState.SetStencilRef(StencilValue);
}
}
else if (bMaskedInEarlyPass)
{
DrawRenderState.SetDepthStencilState(TStaticDepthStencilState<false, CF_Equal>::GetRHI());
}
```

202
03-UnrealEngine/卡通渲染相关资料/渲染功能/其他渲染功能/Toon眼睛渲染.md Normal file
View File

@@ -0,0 +1,202 @@
# 资料整理
## 凹模型
直接贴图即可。
折射
模型高光
## 凸模型
1. 使用视差贴图来控制瞳孔效果 + 折射模拟
```
float2 viewL = mul(viewW, (float3x2) worldInverse);
float2 offset = height * viewL;
offset.y = -offset.y;
texcoord -= parallaxScale * offset;
```
![](https://pic2.zhimg.com/v2-80c97cefce517b57de36593a44425ce5_r.jpg)
2. Physically based refraction
```c++
// 角膜区域突起的模型
// Alternatively, use a displacement map
// height = max(-positionL.z – eyeIrisDepth, 0.0);
// 球形模型
// Plot[Max[1.0 - 18.4 * r * r, 0.0], {r, 0, 0.3}]
height = anteriorChamberDepth * saturate( 1.0 - 18.4 * radius * radius );
// refractedW
float w = n * dot( normalW, viewW );
float k = sqrt( 1.0 + ( w - n ) * ( w + n ) );
float3 refractedW = ( w - k ) * normalW - n * viewW;
float cosAlpha = dot(frontNormalW, -refractedW);
float dist = height / cosAlpha;
float3 offsetW = dist * refractedW;
float2 offsetL = mul(offsetW, (float3x2) worldInverse);
texcoord += float2(mask, -mask) * offsetL;
```
![](https://pic2.zhimg.com/80/v2-e14db6acc5d6f7400009c2a3ff3e2b89_720w.jpg)
代码中首先计算了height，即前房的高度，PPT中height有两种计算方式，分别对应两种眼睛的模型结构，对应的结构写在注释中了。
然后计算了refracted，这个是rtr中快速拟合的计算方法，n是空气与介质折射率的比值，关于refracted的推论可以参考：
YivanLee：虚幻4渲染编程(人物篇)【第三卷：Human Eye Rendering】
[129 赞同 · 12 评论文章](https://zhuanlan.zhihu.com/p/151786832)
最后一段，先通过frontNormalW与refractedW的点积计算出α角的cos值（上图中的α应该是标识错误，α是-refractedW与frontNormalW的夹角）。然后已知height，通过比值可以计算出refractedW的模长dist。offsetW即为完整的refractedW向量。最后转换到本地空间，乘上眼睛的Mask，加到原本的UV上。
之后就是使用偏转后的UV去采样贴图了。
与视差相同，这里也是在本地与世界空间中进行的计算，同样会有轴向问题，主要是normalW、viewW和frontNormalW参与的计算，normal与view可以转换到切线空间计算，而frontNormalW代表的是模型向前的朝向，这个必须要指定，不过图方便的话，把frontNormalW改成切线空间法线也不是不可以。
### 多层复合模型
樱花大战cedec2020分享：https://blog.ch-wind.com/cedec2020-new-sakura-wars-note/
>本作的眼睛分为三个部分，眼白的部分是一个内凹的形状，瞳孔的部分则分为了向内凹的部分和向外突出的部分。
![](../../public/UrealEngineNPR渲染实现/樱花大战眼睛效果.png)
>瞳孔的高光叠加在其突出的半透明部分上。根据摄像角度的不同，各个部分的贴图会分开进行移动，使得在哪个角度高光都能处在一个刚好的位置。
控制上，有针对高光上下左右的移动强度与控制移动范围的参数共同作用。
![](../../public/UrealEngineNPR渲染实现/樱花大战眼睛贴图.png)
>从左边开始，是作为基础颜色的Albedo，以及用于Mask瞳孔的Alpha贴图，用于在Albedo上进行叠加的spt贴图，以及两张瞳孔高光，以及反应环境的matcapture贴图。
虽然很多动画风格的渲染中会省略掉瞳孔中的虹彩部分，但是本作为了提高角色靠近时的效果，进行了详细的绘制，同时为了体现环境的变化与matcap的贴图进行叠加。
高光贴图有两张，分别使用不同的UV动画进行控制，用于表现眼睛的湿润感。虽然是很细微的操作，但是对于表现角色的感情非常的有用。
![](../../public/UrealEngineNPR渲染实现/UntiyChanSSS_Eye.jpg)
SunnySideUp UnityChan
### 其他效果实现
#### 眼睛高光效果
1. 贴图高光。使用事先绘制的高光形状贴图，贴到最外面的。并且使用ViewDirection来控制。设定4个UV Coord, 根据 View=》眼睛的本地坐标系=》Normalize后的向量进行插值。
2. ~~PBR的思路~~
#### Matcap反射效果
Matcap材质+球形法线贴图
```c++
float3 NormalBlend_MatcapUV_Detail = viewNormal.rgb * float3(-1,-1,1);
float3 NormalBlend_MatcapUV_Base = (mul( UNITY_MATRIX_V, float4(viewDirection,0)).rgb*float3(-1,-1,1)) + float3(0,0,1);
float3 noSknewViewNormal = NormalBlend_MatcapUV_Base * dot(NormalBlend_MatcapUV_Base, NormalBlend_MatcapUV_Detail) / NormalBlend_MatcapUV_Base.b - NormalBlend_MatcapUV_Detail;
float2 ViewNormalAsMatCapUV = noSknewViewNormal.rg * 0.5 + 0.5;
```
#### 焦散效果
>焦散的表现反倒简单了，直接画在眼睛贴图上都可以，考虑到卡通表达的自由性，焦散是否存在与焦散的形状都可以没有限制，只要好看就行。
下图也是miHoYo的分享，可以简单的理解为直接贴张Mask上去，然后用光照方向和菲涅尔去影响强度变化。
![](https://pic4.zhimg.com/80/v2-c4859a4c140a895547136557e9c4f01b_720w.jpg)
使用Mask贴图、NoL与菲尼尔来控制
# 其他参考整理
![[ToonEye.png|400]]
![[ToonEyes.png|400]]
## PBR Refrection（有问题）
```
//input anteriorChamberDepth 贴图 使用HeightMap
//input radius
//input mask 贴图
//input texcoord
//input n 折射率比值
//input frontNormalW 贴图float3(0,0,1) Local=>World
// 角膜区域突起的模型 height = max(-positionL.z – eyeIrisDepth, 0.0);
// 球形模型 Plot[Max[1.0 - 18.4 * r * r, 0.0], {r, 0, 0.3}]
float height = anteriorChamberDepth ;//* saturate( 1.0 - 18.4 * radius * radius );
float3 normalW=Parameters.WorldNormal;
float3 viewW= mul(float3(0,0,1),(float3x3)View.ViewToTranslatedWorld);//CameraViewToTranslatedWorld
// refractedW
float w = n * dot( normalW, viewW );
float k = sqrt( 1.0 + ( w - n ) * ( w + n ) );
float3 refractedW = ( w - k ) * normalW - n * viewW;
refractedW=-normalize(refractedW);
//float3 frontNormalW=mul(float(0,0,1),float(3x3)GetPrimitiveData(Parameters.PrimitiveId).LocalToWorld) * -1;
float cosAlpha = dot(frontNormalW, refractedW);
float dist = height / cosAlpha;
float3 offsetW = dist * refractedW;
float2 offsetL = mul(offsetW, (float3x2)GetPrimitiveData(Parameters.PrimitiveId).WorldToLocal);
texcoord += float2(mask, -mask) * offsetL;
return texcoord;
```
### 原始代码
```
// 角膜区域突起的模型
// Alternatively, use a displacement map
// height = max(-positionL.z – eyeIrisDepth, 0.0);
// 球形模型
// Plot[Max[1.0 - 18.4 * r * r, 0.0], {r, 0, 0.3}]
height = anteriorChamberDepth * saturate( 1.0 - 18.4 * radius * radius );
// refractedW
float w = n * dot( normalW, viewW );
float k = sqrt( 1.0 + ( w - n ) * ( w + n ) );
float3 refractedW = ( w - k ) * normalW - n * viewW;
float cosAlpha = dot(frontNormalW, -refractedW);
float dist = height / cosAlpha;
float3 offsetW = dist * refractedW;
float2 offsetL = mul(offsetW, (float3x2) worldInverse);
texcoord += float2(mask, -mask) * offsetL;
```
## Matcap反射效果
```
float2 CalcMatcapUV(FMaterialPixelParameters Parameters,float3 normalTexture)
{
float3 ViewVector=Parameters.CameraVector * -1;
float3 ViewSpaceRightVector=normalize(cross(ViewVector , mul( float3(0.0,1.0,0.0) , ResolvedView.ViewToTranslatedWorld )));
float3 ViewSpaceUpVector=cross(ViewVector ,ViewSpaceRightVector);
float3x3 Matrix=float3x3(
ViewSpaceRightVector.x,ViewSpaceUpVector.x,ViewVector.x,
ViewSpaceRightVector.y,ViewSpaceUpVector.y,ViewVector.y,
ViewSpaceRightVector.z,ViewSpaceUpVector.z,ViewVector.z
);
float3 ZeroOneNormal=mul(normalize(Parameters.WorldNormal+normalTexture),Matrix)*0.5+0.5;
return float2(ZeroOneNormal.x,ZeroOneNormal.y*-1);
}
```
### 这个不太行
```
//input normalTexture 法线贴图
float3 TangentWS=Parameters.TangentToWorld[0];
float3 NormalWS=Parameters.TangentToWorld[2];
float3 BinormalWS=cross(NormalWS, TangentWS);
float3 worldNormal;
worldNormal.x = dot(float3(TangentWS.x,BinormalWS.x,NormalWS.x), normalTexture);
worldNormal.y = dot(float3(TangentWS.y,BinormalWS.y,NormalWS.y), normalTexture);
worldNormal.z = dot(float3(TangentWS.z,BinormalWS.z,NormalWS.z), normalTexture);
worldNormal = normalize(worldNormal);
float3 e = normalize(GetWorldPosition(Parameters) - ResolvedView.WorldCameraOrigin);
float3 reflectVector = reflect(e, worldNormal);
float3 reflectVectorVS = normalize(mul(reflectVector,ResolvedView.TranslatedWorldToView));
float m = 2.82842712474619 * sqrt(reflectVectorVS.z + 1.0);
float2 cap = reflectVectorVS.xy / m + 0.5;
cap=cap*0.5 + 0.5;
return cap;
```
## 高光贴图位置调整
```
//input float2 LeftUp,LeftDown,RightUp,RightDown;
float3 viewW = mul(float3(0,0,1),(float3x3)View.ViewToTranslatedWorld);
float3 viewL = mul(viewW, (float3x2)GetPrimitiveData(Parameters.PrimitiveId).WorldToLocal);
float2 viewL2D = normalize(viewL.xy);
float2 Left=lerp(LeftUp,LeftDown,viewL2D.y);
float2 Right=lerp(RightUp,RightDown,viewL2D.y);
return lerp(Left,Right,viewL2D.x);
```
## 焦散
- dot(Parameters.WorldNormal,View.DirectionalLightDirection);
- Fresnel
乘以焦散Mask即可

181
03-UnrealEngine/卡通渲染相关资料/渲染功能/其他渲染功能/风格化渲染.md Normal file
View File

@@ -0,0 +1,181 @@
---
title: 未命名
date: 2025-03-03 11:02:16
excerpt:
tags:
rating: ⭐
---
![[风格化渲染项目需求]]
# 其他后处理效果资料
- Kuawara&SNN:
- [x] https://zhuanlan.zhihu.com/p/511693561
- [x] https://zhuanlan.zhihu.com/p/512500640
- [x] SNN
- [x] 优化所有 PassParameters->TextureExtent = SceneTextures.Config.Extent; uint32 => float
- [x] 添加Screen百分比适配
- [ ] 添加深度适配
- 其他Kuwahara算法
- Generalized Kuwahara filter:https://www.semanticscholar.org/paper/Edge-preserving-orientation-adaptive-filtering-Bakker-Vliet/0b1ab5c954e92fa51cffe9731482ec00bb851df9?p2df
- Mean of Least Variance(MLV) filter:https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.32.5041&rep=rep1&type=pdf
- Adaptative Kuwahara filter:https://link.springer.com/article/10.1007/s11760-015-0791-3
- Anisotropic Kuwahara Filtering:https://www.researchgate.net/publication/220507613_Image_and_Video_Abstraction_by_Anisotropic_Kuwahara_Filtering
- 阴影笔触感 以及 SNN
- 异度神剑3
- https://gamemakers.jp/article/2023_03_22_33475/
- https://bonoko.dev/xenowind/#980eb73b-a050-4eff-9630-d3a1a2263dbe
- 油画笔触化：主要使用绘画手动涂抹，考虑使用自动化工具生成贴图。
- [x] 技你太美_工具篇_UE4贴图批量水彩化滤镜 https://zhuanlan.zhihu.com/p/124869171
- [x] Unity-一个简单的吉卜力风石头渲染方法 https://zhuanlan.zhihu.com/p/369154984
- [x] 【(中英字幕)Substance Painter 2020制作化吉卜力风格全流程】 https://www.bilibili.com/video/BV1FK411V7vv/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e
- [ ] 虚幻4还原风格化“云海群山”场景（附岩石贴图制作思路） https://zhuanlan.zhihu.com/p/337054665
- [ ] Unity-两个简单的油画渲染方法:https://zhuanlan.zhihu.com/p/368352199
- [ ] 【虚幻5 艺术笔刷材质思路 风格化三渲二（菜鸟向）】 https://www.bilibili.com/video/BV1ZVyBY9Ehz/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e
- [ ] 【【UE5】复现大佬风格化手绘 Stylized Paint Shader】 https://www.bilibili.com/video/BV1wXHreNE7p/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e
- 风格化物体渲染
- 风格化渲染<树>：分析还原:https://zhuanlan.zhihu.com/p/552741254
- 虚幻4重现“哈尔的移动城堡”花园（附风格化草地制作分享）https://zhuanlan.zhihu.com/p/272734944
- [ ] [【Blender教程】使用PBR植物资产进行卡通渲染](https://www.bilibili.com/video/BV1Gh4y1F7g6/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e)
- 其他参考
- [ ] 【三渲二技法】《穿靴子的猫》同款Stamp Map制作 https://www.bilibili.com/video/BV1ou411c7pE/?spm_id_from=333.1387.favlist.content.click&vd_source=d47c0bb42f9c72fd7d74562185cee290
- 水墨效果参考
- https://zhuanlan.zhihu.com/p/602960198
- https://github.com/sacshadow/3D_ChineseInkPaintingStyleShader
- https://zhuanlan.zhihu.com/p/98948117
- https://zhuanlan.zhihu.com/p/63893540
- https://zhuanlan.zhihu.com/p/34406208
- https://zhuanlan.zhihu.com/p/352994629
- https://www.fab.com/listings/ae8ee250-6416-4dde-b36b-cfbb0b3d302e
- 商城风格化材质与场景
- https://www.fab.com/listings/6129b04e-3859-4a2d-90b3-000958a563d2
- https://www.fab.com/listings/e9b91c41-fce9-4a55-93c4-cb62bdd0e98e
- https://www.fab.com/listings/167453a5-7fde-4bde-819c-1f3d497c7db6
# 油画风格
蒸汽猫场景使用资产：
- 云朵使用了虚幻商城的[Sky Card](https://zhida.zhihu.com/search?content_id=163031429&content_type=Article&match_order=1&q=Sky+Card&zhida_source=entity)
- 个别地面植物为虚幻商城[CityPark](https://zhida.zhihu.com/search?content_id=163031429&content_type=Article&match_order=1&q=CityPark&zhida_source=entity)资源
- 树木使用[speedtree](https://zhida.zhihu.com/search?content_id=163031429&content_type=Article&match_order=1&q=speedtree&zhida_source=entity)和blender共同制作
- 山脉为[ZBrush](https://zhida.zhihu.com/search?content_id=163031429&content_type=Article&match_order=1&q=ZBrush&zhida_source=entity)雕刻
- 岩石为Bridge资源
1. [ ] 石头：使用 voronoi-noise-cell与 泊林Noise模糊后叠加到Diffuse上（overlay）。其中模糊使用Blur Slope。
1. https://zhuanlan.zhihu.com/p/369154984
2. voronoi-noise-cell
1. https://www.ronja-tutorials.com/post/028-voronoi-noise/
2. https://www.shadertoy.com/view/Xd23Dh
3. [ ] [虚幻引擎 5 ！如何在 3D 中创建吉卜力岩石 ! (免费原文件下载)！](https://www.bilibili.com/video/BV1LQ4y18753/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e)
2. [ ] 云
1. [ ] RayMarching 2D云，使用Kuwahara处理过深度图来进行计算。
2. [ ] UnityShader 基础（52）风格化模型(1)-云(法线传递) https://zhuanlan.zhihu.com/p/551289665
1. 建模云模型后，使用一个形状类似的球体进行法线映射。
2. 使用ceil制作分色块的Diffuse。
3. [ ] [[#草]]
4. [ ] 树木
1. [ ] 《原神》卡渲效果逆向还原 【一、风格化树】 https://zhuanlan.zhihu.com/p/438178299
2. [ ] 一些关于风格化树的学习总结 https://zhuanlan.zhihu.com/p/449599351
3. [ ] 风格化渲染<树>：分析还原 https://zhuanlan.zhihu.com/p/552741254
4. 总结细节要点
1. 映射法线，可通过建模或者Houdini生成相近形状模型进行映射。
2. ceil色阶Diffuse
3. 烘焙AO贴图作为自阴影
4. 使用寒霜的Fast散射制作投射效果
5. 等宽边缘光边缘
5. [ ] 水
1. [ ] [(中英字幕)Blender 2.83制作吉卜力风格动漫的水(免费下载原文件+贴图)](https://www.bilibili.com/video/BV1Eh411R7sT/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e)
2. [ ] [虚幻引擎5！制作吉卜力风格森林遗迹场景！(带材质节点)！](https://www.bilibili.com/video/BV17W4y1e7vM/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e)
1. ![[GhibliStyle_Water_Material1.png|300]]
2. ![[GhibliStyle_Water_Material2.png|300]]
3. [ ] [(中英字幕)Blender2.9制作吉卜力风格飞溅的水效果(原文件下载)](https://www.bilibili.com/video/BV1Zv411x7a6/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e)
4. [ ] [掌握 3D 风格化动画水教程！(免费原文件下载)](https://www.bilibili.com/video/BV1gD421K7ZC/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e)
5. [ ] 水面高光Shader [Blender 4.0 ！制作吉卜力风格技巧 03 ](https://www.bilibili.com/video/BV13C4y167NQ/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e)
6. [ ] 场景分解
1. [x] ***【如何创建吉卜力风格的 3D 环境 - 场景分解！】*** https://www.bilibili.com/video/BV1iKAPeKEqc/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e
1. [x] 渡神纪场景贴图制作： https://www.exp-points.com/immortals-fenyx-rising-qa-ubisoft
1. ***对法线贴图进行风格化处理***（估计是使用Kuwahara）
2. 对BaseColor进行风格化处理，以及涂抹处理。
3. 颜色方案与材质设计。
7. [ ] 贴图绘制手法
2. [x] ***蒸汽猫 虚幻4还原风格化“云海群山”场景（附岩石贴图制作思路）*** https://zhuanlan.zhihu.com/p/337054665
3. [x] ***从解构美术风格到技术的抽象与具体化*** https://zhuanlan.zhihu.com/p/510453324
4. [x] 【(中英字幕)Substance Painter 2020制作化吉卜力风格全流程】 https://www.bilibili.com/video/BV1FK411V7vv/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e
1. 给模型添加底色
2. 绘制Overlay贴图1
1. 使用泊林澡波贴图。
2. 添加Blur Slope滤镜。
3. 添加Blur Directional滤镜。
4. 添加Sharpen滤镜。
3. 绘制Overlay贴图2
1. 使用Ratio_cells贴图。
2. 添加Blur Slope滤镜。
4. 细节调整
1. AO
1. AO Generator
2. Blur Slope
2. 高光&刮痕模拟
1. Curvature generator
2. Blur Slope
5. 完成后重新叠一层半透明的原贴图。
8. 原神效果还原
1. 树
1. https://zhuanlan.zhihu.com/p/593500186
2. https://zhuanlan.zhihu.com/p/438178299
9. 使用资产
1. Grass
1. [Ultra Stylized Grass 卡通风格化动态交互草地材质](https://item.taobao.com/item.htm?id=858782487415)
2. [UE4虚幻5 Stylized - Dynamic Nature 风格化动态自然环境场景](https://item.taobao.com/item.htm?spm=tbpc.boughtlist.suborder_itemtitle.1.5e8a2e8dEYmizV&id=756800703841&pisk=gB68Ow1Gjr4kQMXJmgPmKMuytwqDeSjP0aSsKeYoOZQAJGnlZBYHOpQNWBM3aLAppZTcEUjkFHOC-N1kP_Ynp9QVyYDHFw2pRG54YUxlEDKCGaHhZgYlMDpPn_DHrzJdANvLSP2gIgSy8pagSmFGy9pyvHMWR2Dfch9pVsfSZ1syLpaKmvNgBg7s3vBjOHtbDHxnOY_BNnTXxEtINp_BlIt6j49CRw9jh3xEPYTBPjiXuhlSOv9CcqteY2MBNwGbD3YXRpOCRiGrXuLqV3Hd1xhpUtMLVvDhH3dJJvYrpN6SIQYsPUMELUKBwbjWkvMCHsgoZeT7_mYeEUSW2wyZULOd_Mxdy8H5JGWVkn__pAY50GfMaTNnICpvyBWWBDw5DLLJ1TAoVxb1DM1MMtq_QLpWP6vPxcUlDTQl4tInAj9JEsdOedwZPefcX9KdLyyAWGWVkn__pzsyyOX96BgMWHc7DohETQtVKaOcVHx46VKvSuOSTXRH0nLgDohETQt2DFqSdXletn5..)
3. [UE4虚幻5 Nanite Foliage - Grass 影视级3A草丛草地模型](https://item.taobao.com/item.htm?spm=tbpc.boughtlist.suborder_itemtitle.1.5e8a2e8dEYmizV&id=799009142227&pisk=gVjzOaGrGuEzB1OJritEuWs68v-JJHP_tMOBK9XHFQAuJLZnY9WMd8FLeZJhOseLe36HT65XMD9QyWnFg_6GPU1CPBvHisXSVBZJ86W166iQ2a9nYs6p-6sFpDJhK6eJO8UfeTKpx5N_Yl6RertB5Usern0DQt0oZU4Xm4R5UPV_fl64rLKCn5sWDLTMUdiHxUYnoIAvLDmkr6YmmpdmqpmkKj22MIvor4AoiIv9p2cht0q0mppnELAH-EYDIImkxefhn-JeiBcyV6f-0I8uLYmZR8ZgdUOGEIonbApHrkWnRcis0LTWsEAsxKs2UURGEgvK0FJcci86lvNXmOQfZK-ac4xG3wfNS6Usk3Whr6LVwS32GZjRKBYrKcB28Q7cqEknxtKXTe_Fa7uJZa12WKYmLlpf1IXRqZyKiTf6a3vDll2Nnebf2FI7i0-GWTt5-6Usk3WhrnSr6XpmHzSdzX0erKp21-yV-WyRzqDWKbgKJEzv3CwTB23prKp21-yqJ2LVXKR_BRC..)
4. [UE5虚幻5 Stylized Grass Starter Pack 风格化草地道具包](https://item.taobao.com/item.htm?id=708568933801)
5. [UE4虚幻5 Realistic Grass 1 高品质写实草地道具包](https://item.taobao.com/item.htm?id=725735796258)
2. Sky
1. [SkyCard 高质量体积自阴影云彩天空盒 虚幻5 UE4 27](https://item.taobao.com/item.htm?id=685202289650)
2. [UE5虚幻5 Stylized Dynamic Sky & Weather System 卡通动态天空](https://item.taobao.com/item.htm?id=775333923875)
10. [ ] Blur Slope
1. [ ] 屏幕后处理：梯度模糊:https://zhuanlan.zhihu.com/p/693256394
1. [ ] SubstancePainter的Blur Slope有使用Noise，估计是Noise + KuawaharaSize实现的位移
11. [ ] 各项异性Kuwahara：使用Saliency Map、 Edge Tangent Flow Map进行多重各种异性Kuwahara计算得出结果。
1. https://zhuanlan.zhihu.com/p/368352199
2. 论文:https://ieeexplore.ieee.org/stamp/stamp.jsp?tp=&arnumber=8772035
# 草
相关参考资料
1. [ ] 蒸汽猫虚幻4重现“哈尔的移动城堡”花园（附风格化草地制作分享） https://zhuanlan.zhihu.com/p/272734944
2. 手绘贴图视频
1. [x] https://www.youtube.com/watch?v=Za3kNIJDIPU
- ![[Stylized 3D Grass Tutorial.jpg]]
2. [x] https://www.youtube.com/@akbutea_art
- ![[Viktoriia Zavhorodnia.png]]
## 关键点
1. 手绘贴图与颜色配比？
2. [[#关闭阴影]]
3. [[#抹平法线]]
### 关闭阴影
选中植被InstancedFoliageActor，去掉`Cast Shadow`的√。
![[Grass_DisableShadow.png|1200]]
如果是讲StaticMesh转换成StaticMeshFolidgeType的情况，只需要设置StaticMeshFolidgeType中的选项即可。
![[Grass_FolidgeType_DisableShadow.png | 400]]
### 抹平法线
抹平法线
![[Grass_SmoothNormalBefore.png|800]]
### ![[Grass_SmoothNormalAfter.png| 800]]伪造阴影（调
参考：
![[Grass_DiffuseNoise.jpg]]
思路：
1. 通过映射Noise贴图添加因为生长周期不同而导致的颜色差异。
2. 通过高度Mask进行Lerp来制作伪造阴影。
3. 通过Panner节点来模拟被风吹过后，草被倒伏出现的颜色差异。
4. **针对Landscape材质使用相同的WorldSpaceNoise以此对根部颜色进行适配，** ***最好将其使用MaterialFunction进行封装，以保证效果统一。***
![[Grass_CurveRampTextureToBaseColor.png| 材质节点]]
![[Grass_EffectShow.png | 简单调制的结果]]
### 默认引擎存在问题
1. 没办法调整阴影亮度，其他物体的阴影投射到草地上结果会不正确。
## 风场效果
WPO 风
# 岩石

70
03-UnrealEngine/卡通渲染相关资料/渲染功能/其他渲染功能/风格化渲染项目需求.md Normal file
View File

@@ -0,0 +1,70 @@
---
title: 风格化渲染项目需求
date: 2025-03-11 20:35:40
excerpt:
tags:
rating: ⭐
---
# 项目需求
- [x] [🍄《百菌志》🍄2024纯享合集](https://www.bilibili.com/video/BV11x6DYbE2g/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e)
- [ ] [【IGN】《大神》续作先导预告 | TGA 2024](https://www.bilibili.com/video/BV1JbqqYuEVB/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e)
## 百菌志
- 背景（场景）为吉普力风格
- 可以半自动生成贴图的要素
- 树木
- 树干
- 地面（泥泞）
- 带有青苔的岩石
- 草地（青苔）
- 云朵/雾气
- 只能手绘的要素
- 细小植物
- 需要实现的效果
- [ ] 吉普力风格的水面高光 [🍄《百菌志》🍄2024纯享合集 【精准空降到 00:27】](https://www.bilibili.com/video/BV11x6DYbE2g/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e&t=27)
- [ ] 水滴留下来的动态效果 [🍄《百菌志》🍄2024纯享合集【精准空降到 00:45】](https://www.bilibili.com/video/BV11x6DYbE2g/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e&t=45)
- 角色（会动的物体）使用赛璐璐风格
- 不受GI影响
- [x] ceil分界，高光/亮面/暗面。
- [x] 阴影亮度控制
- [ ] ***描边（需要制作透明物体）***
![[百菌志_1.png | 树干 泥地 树叶 细小植被 |1200]]
![[百菌志_2.png|树木 泥土 青苔|1200]]
![[百菌志_3.png|岩石 青苔|1200]]
![[百菌志_4.png| 吉普力水面高光效果 泥地 青苔 细小植物 |1200]]
![[百菌志_5.png|青苔 草地 岩石|1200]]
![[百菌志_6.png|云 山 草地 泥土|1200 ]]
![[百菌志_7.png| 土地 岩石 青苔|1200]]
## 大神
***水墨配色的吉普力式绘制方法***
1. 水墨
1. [ ] 水墨晕染效果（3s~9s）：序列帧+UV扩张。
2. [ ] 水墨植物（10s~12s)
1. Kuawahara（各项异性？）实现水墨晕染效果？
3. [ ] 滤镜比重较大(22s~25s)：镜头不断变亮，但色块量变少、细节（叶子）变多。
2. 油画
1. [ ] 草地（25s~28s）:Kuawahara滤镜、刮痕+黑点叠加滤镜。
2. [ ] Kuawahara涂抹油画效果（28s~30s）：确定是后处理实现，因为阳光与山的交界处出现了多重采样的效果
3. [ ] 各项异性Kuawahara涂抹油画效果（36~39s）： 可以参考 https://zhuanlan.zhihu.com/p/368352199
![[大神_1.png | 1200]]
![[大神_2.png | 看不出滤镜与贴图比重 猜测贴图吉普力化 滤镜各占一半 |1200]]
![[大神_3.png | 远景刮痕与黑点叠加 | 1200]]
![[大神_4.png | 带有笔触的优化滤镜效果 |1200]]
![[大神_5.png | 1200]]
![[大神_6.png | 1200]]
《Oil Painting Style Rendering Based on Kuwahara Filter》论文效果
![Oil Painting Style Rendering Based on Kuwahara Filter](https://pic4.zhimg.com/v2-eb4d7b07529dd442934fab088f6798b1_r.jpg)