<think>我们已经在之前的双Pass头发shader基础上，现在需要添加动态飘动效果。参考引用中实现旗帜飘动和植物动态的方法，我们可以将类似技术应用于头发模型。核心思路：在顶点着色器中修改顶点位置，通过时间和空间坐标计算偏移量。具体实现步骤：1.选择影响头发飘动的方向（通常垂直于头发方向或特定轴向）2.使用正弦函数结合时间变量产生周期性摆动3.根据顶点在模型空间的位置（如高度）调整摆动幅度，使发梢摆动更大注意：头发飘动效果需要自然，因此通常会结合噪声图来产生随机性（如引用[1]和引用[4]的方法）我们将修改之前双Passshader的第一个Pass（UniversalForward）的顶点着色器，添加顶点偏移计算。同时，为了性能考虑，我们只在主Pass中修改顶点位置（因为第二个Pass是边缘光，不需要再次偏移顶点，否则会叠加）。实现细节：-引入时间变量：_Time.y-参数：飘动强度(_SwingStrength)、飘动速度(_SwingSpeed)-使用模型空间坐标计算偏移量参考引用[4]的代码，我们可以这样写：halfstage1=dot(positionOS,float3(0,1,0))*_Strength;//这里用y轴方向（高度）来影响强度halfstage2=sin(dot(positionOS,float3(1,0,0))*_Strength+_Time.y*_Speed);//沿x轴方向的正弦波halfstage3=stage1*stage2*float3(0.001,0,0.001);//偏移量，注意控制幅度但头发通常需要沿法线方向偏移，因此我们修改为：float3offsetDirection=a_normal;//使用顶点法线方向作为偏移方向floatswingFactor=sin(_Time.y*_SwingSpeed+positionOS.x*_SwingFrequency)*_SwingStrength;//根据高度（从发根到发梢）增加摆动幅度：假设发根在y=0，发梢在y=1，则使用positionOS.yswingFactor*=positionOS.y;//这样发梢摆动更大float3offset=offsetDirection*swingFactor;然后：positionOS.xyz+=offset;但是，直接在模型空间修改顶点可能会带来问题（比如模型原点不在根部），因此我们可以使用世界空间，但这样计算量稍大。另一种方法是使用物体空间，并假设头发模型是垂直的（根部在底部，发梢在顶部）。考虑到性能，我们使用物体空间计算。另外，为了增加随机性，我们可以引入噪声（如引用[1]）。但为了简化，我们先使用正弦波。步骤：1.在Properties中添加控制参数：_SwingStrength（强度）、_SwingSpeed（速度）、_SwingFrequency（空间频率）2.在顶点着色器中计算偏移量注意：顶点法线在物体空间（Attributes中的normal）是单位向量，但偏移方向可能需要调整（比如垂直于头发主方向）。如果头发模型是垂直的，我们可以使用法线在水平方向的分量。或者，我们可以使用一个固定方向（如物体空间的x轴）来作为摆动方向。这里我们采用：使用物体空间的x轴和z轴方向（水平方向）的偏移，而摆动方向可以取法线在水平面的投影。具体：float3normalOS=IN.normal;//计算水平方向的法向量（去掉y分量）float3horizontalNormal=normalize(float3(normalOS.x,0,normalOS.z));//摆动因子：由时间和空间位置决定floatphase=_Time.y*_SwingSpeed+(positionOS.x+positionOS.z)*_SwingFrequency;floatswingFactor=sin(phase)*_SwingStrength;//根据高度（y坐标）增强效果：假设头发底部y=0，顶部y>0，使用positionOS.y（需要归一化？但模型大小不一，所以引入参数控制）//我们可以用positionOS.y除以模型高度范围，但这里简化：直接乘以一个系数，然后乘以positionOS.yswingFactor*=positionOS.y*_HeightFactor;//_HeightFactor用于调整高度影响positionOS.xyz+=horizontalNormal*swingFactor;但这样计算可能导致头发整体膨胀，所以更合适的方法是沿一个固定方向（比如风向）摆动。我们引入一个风向向量_WindDirection。因此，我们修改为：float3windDirection=normalize(_WindDirection.xyz);//摆动因子计算同上floatphase=dot(positionOS,windDirection)*_SwingFrequency+_Time.y*_SwingSpeed;floatswingFactor=sin(phase)*_SwingStrength;swingFactor*=(positionOS.y-_RootHeight)*_HeightFactor;//从根部开始摆动，_RootHeight是根部的高度值（假设模型空间）但是，每个模型的根部高度不同，我们可以用顶点颜色的某个通道来标记发根位置（比如顶点颜色的r通道为0表示发根，1表示发梢），这样更通用。如果没有顶点颜色，我们仍然用y坐标。为了通用性，我们假设头发模型从y=0（根部）到y>0（发梢）。因此：floatheightFactor=saturate((positionOS.y-_MinHeight)/(_MaxHeight-_MinHeight));//归一化高度因子swingFactor*=heightFactor;但这样需要设置_MinHeight和_MaxHeight，不够方便。另一种方法：使用顶点颜色。我们要求美术在制作头发模型时，在顶点颜色中存储从发根到发梢的渐变（比如红色通道从0到1）。这样：floatheightFactor=IN.color.r;//从顶点颜色读取因此，我们修改顶点结构，增加颜色属性。考虑到兼容性，我们提供两种方式，这里先用顶点颜色。步骤：1.在Attributes结构体中加入：float4color:COLOR;2.在Varyings结构体中不需要传递颜色（因为片段着色器不需要）3.计算偏移量时使用color.r作为高度因子如果没有顶点颜色，则用y坐标。我们这里先假设有顶点颜色，并作为高度因子。最终顶点偏移计算：float3windDirection=normalize(_WindDirection.xyz);floatphase=dot(positionOS,windDirection)*_SwingFrequency+_Time.y*_SwingSpeed;floatswingFactor=(sin(phase)*_SwingStrength)*IN.color.r;//发根处颜色r=0，不偏移；发梢r=1，偏移最大//偏移方向：我们希望垂直于头发主方向，但通常头发是垂直的，所以水平方向摆动。这里我们使用一个垂直于风向和头发主方向（向上）的向量？//实际上，我们希望头发沿着风向的垂直方向摆动（即风向是水平方向，头发在水平面上摆动）。因此，偏移方向可以取一个固定的水平方向（比如windDirection的垂直向量），或者直接用模型法线在水平面的投影。//为了简化，我们使用一个固定的摆动方向向量：_SwingDirection，由美术调整。//或者，我们直接使用windDirection的垂直向量：取一个固定向量（0,0,1）与windDirection叉乘得到垂直向量，但这样计算量较大。//我们直接使用_SwingDirection（归一化的向量）positionOS.xyz+=normalize(_SwingDirection)*swingFactor;但是，这样可能不够自然。另一种方法是：将偏移方向存储在每个顶点的切线空间中，或者使用顶点法线在水平面的投影。考虑到性能，我们采用一个统一的摆动方向向量_SwingDirection。因此，我们需要在Properties中增加：_WindDirection("WindDirection(XYZ)",Vector)=(1,0,0,0)_SwingDirection("SwingDirection(XYZ)",Vector)=(0,0,1,0)_SwingStrength("SwingStrength",Float)=0.1_SwingSpeed("SwingSpeed",Float)=1.0_SwingFrequency("SwingFrequency",Float)=1.0注意：_WindDirection和_SwingDirection都是模型空间的方向向量。实现：修改第一个Pass的顶点着色器：在Attributes结构体中加入：float4color:COLOR;在顶点着色器中：float3windDirection=normalize(_WindDirection.xyz);floatphase=dot(IN.positionOS.xyz,windDirection)*_SwingFrequency+_Time.y*_SwingSpeed;floatswingFactor=sin(phase)*_SwingStrength;swingFactor*=IN.color.r;//使用顶点颜色的红色通道控制从发根到发梢的影响float3swingDirection=normalize(_SwingDirection.xyz);float3offset=swingDirection*swingFactor;IN.positionOS.xyz+=offset;然后进行正常的坐标变换。注意：这样修改后，法线是否需要重新计算？由于偏移量较小，我们忽略法线变化。如果需要精确光照，可以重新计算法线（但性能开销大，头发通常不需要）。另外，为了增加随机性，可以引入噪声（如引用[1]），但这里先实现基础版本。完整修改后的第一个Pass（主Pass）的顶点着色器部分：由于我们修改了顶点位置，需要重新计算世界空间位置和法线。但这里偏移量小，且法线不变（假设刚性摆动），所以我们仍然使用原来的法线。如果偏移量大，则需要重新计算法线（使用导数或通过偏移后的相邻顶点计算），但这样复杂，所以建议摆动幅度不要太大。因此，我们保持原来的法线计算。代码实现：在Properties块中添加新属性：_WindDirection("WindDirection",Vector)=(1,0,0,0)_SwingDirection("SwingDirection",Vector)=(0,0,1,0)_SwingStrength("SwingStrength",Range(0,1))=0.1_SwingSpeed("SwingSpeed",Float)=1.0_SwingFrequency("SwingFrequency",Float)=1.0在HLSL代码中定义这些变量：float3_WindDirection;float3_SwingDirection;float_SwingStrength;float_SwingSpeed;float_SwingFrequency;顶点着色器修改：由于我们修改了positionOS，所以需要在顶点变换之前。修改后的顶点着色器代码：Varyingsvert(AttributesIN){//计算顶点偏移float3windDir=normalize(_WindDirection);floatphase=dot(IN.positionOS.xyz,windDir)*_SwingFrequency+_Time.y*_SwingSpeed;floatswingFactor=sin(phase)*_SwingStrength;swingFactor*=IN.color.r;//顶点颜色红色通道控制权重float3swingDir=normalize(_SwingDirection);IN.positionOS.xyz+=swingDir*swingFactor;VaryingsOUT;VertexPositionInputsposInput=GetVertexPositionInputs(IN.positionOS.xyz);OUT.positionHCS=posInput.positionCS;OUT.uv=IN.uv;VertexNormalInputsnormInput=GetVertexNormalInputs(IN.normal);OUT.normalWS=normInput.normalWS;OUT.viewDir=GetWorldSpaceViewDir(posInput.positionWS);returnOUT;}注意：这个偏移计算在物体空间进行。如果模型有蒙皮动画，则不能直接使用物体空间坐标（因为骨骼动画会修改顶点位置）。这时需要将偏移放在骨骼变换之后。但本shader不涉及蒙皮。因此，这个shader适用于静态网格的头发。对于带骨骼动画的头发，飘动应该在动画之后添加（即在模型空间已经经过骨骼变换后的位置进行偏移）。这需要修改动画shader，不在本文讨论范围。现在，我们给出完整修改后的双Pass头发shader（包含飘动效果）的代码：注意：第二个Pass（边缘光）不需要飘动，因为顶点位置已经由第一个Pass输出（SV_POSITION），所以第二个Pass的顶点着色器直接使用偏移后的顶点（从第一个Pass传递过来的位置？但两个Pass是独立的，所以第二个Pass也会执行自己的顶点着色器，因此也会偏移两次！）为了避免两个Pass都偏移，我们有两种方法：1.只在第一个Pass偏移顶点，第二个Pass不偏移。但是第二个Pass需要知道偏移后的顶点位置，而它无法访问第一个Pass的输出。2.将偏移计算放在一个单独的Pass之前？但URP不支持。因此，我们只能让两个Pass都进行相同的偏移计算，这样就能保证顶点位置一致。但这样会重复计算，增加开销。或者，我们只让第一个Pass修改顶点位置，第二个Pass不修改。但是第二个Pass的顶点位置会与第一个Pass不一致，导致深度测试问题（Z-fighting）和边缘光位置错位。所以，我们必须在两个Pass中执行相同的顶点偏移计算。因此，我们将顶点偏移代码复制到第二个Pass的顶点着色器中。但是，这样性能会有所下降（计算两次）。为了优化，我们可以将偏移计算封装为一个函数，然后在两个Pass中调用。但两个Pass的HLSL代码是独立的，所以不能共享函数。因此，我们复制代码。同时，为了确保两个Pass的偏移计算完全一致，我们需要使用相同的参数和计算过程。因此，我们在两个Pass中都添加相同的偏移代码。修改第二个Pass的顶点着色器：同样，在Attributes结构体中加入color属性。然后，在第二个Pass的顶点着色器中，添加与第一个Pass相同的偏移计算。注意：第二个Pass中我们不需要法线等光照计算，但需要偏移后的位置和法线（用于边缘光计算，因为边缘光需要世界空间法线）。但是，第二个Pass中我们修改了顶点位置，那么法线方向是否应该重新计算？由于偏移是刚性的（法线方向不变），所以我们仍然使用原始法线。因此，第二个Pass的顶点着色器修改：Varyingsvert(AttributesIN){//同样的偏移计算float3windDir=normalize(_WindDirection);floatphase=dot(IN.positionOS.xyz,windDir)*_SwingFrequency+_Time.y*_SwingSpeed;floatswingFactor=sin(phase)*_SwingStrength;swingFactor*=IN.color.r;//顶点颜色红色通道控制权重float3swingDir=normalize(_SwingDirection);IN.positionOS.xyz+=swingDir*swingFactor;VaryingsOUT;VertexPositionInputsposInput=GetVertexPositionInputs(IN.positionOS.xyz);OUT.positionHCS=posInput.positionCS;//注意：第二个Pass只需要法线和视线方向用于边缘光计算VertexNormalInputsnormInput=GetVertexNormalInputs(IN.normal);OUT.normal=normInput.normalWS;OUT.viewDir=GetWorldSpaceViewDir(posInput.positionWS);returnOUT;}这样，两个Pass的顶点位置偏移就一致了。完整Shader代码（包含飘动效果）如下：</think>在Unity URP中实现头发动态飘动效果，可以通过顶点着色器修改顶点位置来实现。以下是完整的实现方法和代码：
### 动态飘动头发Shader实现方案
#### 核心原理
1. **顶点位移**：在顶点着色器中对顶点位置进行动态偏移
2. **波动方程**：使用正弦函数结合时间变量创造周期性运动
3. **高度影响**：发梢比发根摆动幅度更大
4. **方向控制**：通过法线方向控制摆动方向
```hlsl
Shader "Custom/AnimatedHair"
{
Properties
{
_MainTex ("Base Texture", 2D) = "white" {}
_Color ("Hair Color", Color) = (1,1,1,1)
// 飘动参数
_SwingStrength ("Swing Strength", Range(0, 0.5)) = 0.1
_SwingSpeed ("Swing Speed", Range(0, 5)) = 1.0
_SwingFrequency ("Swing Frequency", Range(0, 10)) = 2.0
}
SubShader
{
Tags { "RenderType"="Opaque" "RenderPipeline"="UniversalPipeline" }
// Pass 1: 主光照+飘动效果
Pass
{
Tags { "LightMode"="UniversalForward" }
HLSLPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"
#include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Lighting.hlsl"
struct Attributes
{
float4 positionOS : POSITION;
float2 uv : TEXCOORD0;
float3 normal : NORMAL;
};
struct Varyings
{
float4 positionHCS : SV_POSITION;
float2 uv : TEXCOORD0;
float3 normalWS : TEXCOORD1;
float3 viewDir : TEXCOORD2;
};
TEXTURE2D(_MainTex);
SAMPLER(sampler_MainTex);
float4 _Color;
// 飘动参数
float _SwingStrength;
float _SwingSpeed;
float _SwingFrequency;
// 顶点位移函数
float3 ApplySwingEffect(float3 position, float3 normal, float time)
{
// 计算基础摆动因子
float swing = sin(time * _SwingSpeed + position.x * _SwingFrequency);
// 基于高度(Y)增强发梢摆动
float heightFactor = saturate(position.y * 2); // 假设模型Y=0是发根
swing *= heightFactor * _SwingStrength;
// 沿法线方向位移
return position + normal * swing;
}
Varyings vert(Attributes IN)
{
Varyings OUT;
// 应用飘动效果[^1][^2][^4]
float3 animatedPos = ApplySwingEffect(
IN.positionOS.xyz,
IN.normal,
_Time.y
);
VertexPositionInputs posInput = GetVertexPositionInputs(animatedPos);
OUT.positionHCS = posInput.positionCS;
OUT.uv = IN.uv;
VertexNormalInputs normInput = GetVertexNormalInputs(IN.normal);
OUT.normalWS = normInput.normalWS;
OUT.viewDir = GetWorldSpaceViewDir(posInput.positionWS);
return OUT;
}
half4 frag(Varyings IN) : SV_Target
{
half4 baseColor = SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, IN.uv) * _Color;
// 基础光照计算
Light mainLight = GetMainLight();
float3 normal = normalize(IN.normalWS);
float NdotL = saturate(dot(normal, mainLight.direction));
float3 diffuse = mainLight.color * NdotL;
return half4(baseColor.rgb * diffuse, baseColor.a);
}
ENDHLSL
}
// Pass 2: 边缘光（不需要飘动）
Pass
{
Tags { "LightMode"="SRPDefaultUnlit" }
Blend SrcAlpha OneMinusSrcAlpha
HLSLPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"
struct Attributes
{
float4 positionOS : POSITION;
float3 normal : NORMAL;
};
struct Varyings
{
float4 positionHCS : SV_POSITION;
float3 normal : NORMAL;
float3 viewDir : TEXCOORD0;
};
Varyings vert(Attributes IN)
{
Varyings OUT;
VertexPositionInputs posInput = GetVertexPositionInputs(IN.positionOS.xyz);
OUT.positionHCS = posInput.positionCS;
VertexNormalInputs normInput = GetVertexNormalInputs(IN.normal);
OUT.normal = normInput.normalWS;
OUT.viewDir = GetWorldSpaceViewDir(posInput.positionWS);
return OUT;
}
half4 frag(Varyings IN) : SV_Target
{
float3 normal = normalize(IN.normal);
float3 viewDir = normalize(IN.viewDir);
float rim = 1.0 - saturate(dot(normal, viewDir));
rim = pow(rim, 2);
return half4(1,1,1,0.5) * rim; // 白色半透明边缘光
}
ENDHLSL
}
}
}
```
#### 关键实现细节
1. **飘动算法**：
```hlsl
float swing = sin(time * _SwingSpeed + position.x * _SwingFrequency);
swing *= heightFactor * _SwingStrength;
return position + normal * swing;
```
- `sin()`函数创建基础波形[^2][^4]
- `_SwingSpeed`控制动画速度
- `_SwingFrequency`控制波动密度
- `heightFactor`使发梢摆动更大[^1]
2. **高度因子计算**：
```hlsl
float heightFactor = saturate(position.y * 2);
```
- 假设模型底部(Y=0)是发根
- 顶部(Y≈1)是发梢
- 使用`saturate()`确保值在[0,1]范围
3. **参数优化建议**：
- 典型值：`Strength=0.05-0.2`, `Speed=1-3`, `Frequency=2-5`
- 发束根部：添加`position.y > 0.3`条件限制根部运动
- 随机性：添加噪声扰动[^1]
```hlsl
// 添加简单噪声
float noise = sin(position.x * 10) * 0.2;
swing += noise;
```
#### 使用注意事项
1. **模型要求**：
- 头发模型应垂直放置（Y轴方向）
- 发根在模型底部(Y=0附近)
- 建议使用发丝卡片(alpha clipped)而非实体模型
2. **性能优化**：
- 只在主Pass计算飘动
- 避免复杂三角函数计算
- 使用`half`精度替代`float`
3. **进阶扩展**：
- 添加风场影响：`windDirection * windStrength`
- 使用顶点颜色控制摆动幅度
- 结合物理模拟实现更自然运动
> **调试技巧**：在Scene视图中调整`_SwingStrength`实时观察效果，从0.01开始逐步增加[^1][^2]。
### 效果对比
| 静态头发 | 动态头发 |
|----------|----------|
| 僵硬不自然 | 自然飘动 |
| 无环境互动 | 响应虚拟风场 |
| 适合短发造型 | 适合长发表现 |
乌龙记：理发师误会头发染色
扫一扫
802
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
