图形 3.3 曲面细分与几何着色器 大规模草渲染
2022/4/27 6:14:15
本文主要是介绍图形 3.3 曲面细分与几何着色器 大规模草渲染，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
曲面细分与几何着色器 大规模草渲染
曲面细分与几何着色器的应用
曲面细分着色器的应用
曲面细分就是把一条直线进行不断的细分，然后把它和曲线进行逼近，逐渐变成曲线的形状。
可以使用在海浪、雪地的部分，比如雪地的脚印，也可以通过曲面细分着色器来处理和优化。
或者和置换贴图进行结合使用。置换贴图能改变物体的形状，使得在边缘也有很强的凹凸感，但是如果模型的面数不够多的情况下，边缘就会十分尖锐突兀。此时便可以使用曲面细分着色器把模型面数变多变细来解决这个问题。
几何着色器的应用
应用于常见的几何动画，比如爆破破碎效果。或者应用于草的生成，并可以和曲面细分着色器结合，来获得一个动态调整密度的草地。
着色器执行顺序
Tessellation Shader：曲面细分着色器
Geometry Shader：几何着色器
然后曲面细分着色器又分成了Hull Shader、Tessellation Primitive Generator、Doamin Shader。其中两个部分是可以控制的。
Hull Shader定义一些细分的参数，Tessellation Primitive Generator是API去处理的，Domain Shader则是曲面细分着色器细分之后的点
TESS(曲面细分着色器)的输入与输出
- 输入
Patch, 可以看成是多个顶点的集合，包含每个顶点的属性，可以 指定一个Patch包含的顶点数以及自己的属性。
- 功能
将图元细分(可以是三角形，矩形等)
- 输出
细分后的顶点
TESS流程
- HULL Shader
- 决定细分的数量（设定Tessellation factor以及Inside Tessellation factor）
- 对输入的Patch参数进行改变(如果需要)
- Tessellation Primitive Generation
进行细分操作
- Domain Shader
对细分后的点进行处理，从重心空间(Barycentric coordinate system )转换到屏幕空间
HULL Shader各参数解析
- Tessellation Factor
决定将一条边分成几部分：
equal_Spacing 
等分
fractional_even_spacing 
最小为2，向上取最近的偶数
fractional_odd_spacing 
最小为1，向上取最近的奇数
fractional_even_spacing和fractional_odd_spacing会把周长分为n减2的等长的部分，以及两端的不等长部分
- Inner Tessellation Factor
说明内部的细分如何被绘制出来。
GS(几何着色器)的输入与输出
- 输入为图元（三角形，矩形，线等）
根据图元的不同，shader中会出现对应不同数量的顶点
- 输出同样为图元
一个或多个，需要自己从顶点构建，顺序很重要，同时需要定义最大输出的顶点数。
曲面细分Demo演示
- 将一个Quad细分
- 与置换贴图的结合
示例Shader
1 Shader "Unlit/TESS2"
2 {
3 Properties
4 {
5 _MainTex("MainTex",2D) = "white"{}
6 _DisplacementMap("_DisplacementMap",2D)="gray"{} //置换贴图
7 [HideInInspector]_DisplacementStrength("DisplacementStrength",Range(0,1)) = 0
8 _Smoothness("Smoothness",Range(0,5))=0.5
9 _TessellationUniform("TessellationUniform",Range(1,1024)) = 1
10 }
11 SubShader
12 {
13 Tags { "RenderType"="Opaque"
14 "LightMode"="ForwardBase"}
15 LOD 100
16 Pass
17 {
18 CGPROGRAM
19 //定义2个函数 hull domain
20 #pragma hull hullProgram
21 #pragma domain ds
22
23 #pragma vertex tessvert
24 #pragma fragment frag
25
26 #include "UnityCG.cginc"
27 #include "Lighting.cginc"
28 //引入曲面细分的头文件
29 #include "Tessellation.cginc"
30
31 #pragma target 5.0
32 float _TessellationUniform;
33 sampler2D _MainTex;
34 float4 _MainTex_ST;
35
36 sampler2D _DisplacementMap;
37 float4 _DisplacementMap_ST;
38 float _DisplacementStrength;
39 float _Smoothness;
40
41 struct VertexInput
42 {
43 float4 vertex : POSITION;
44 float2 uv : TEXCOORD0;
45 float3 normal : NORMAL;
46 float4 tangent : TANGENT;
47 };
48
49 struct VertexOutput
50 {
51 float2 uv : TEXCOORD0;
52 float4 pos : SV_POSITION;
53 float4 worldPos:TEXCOORD1;
54 half3 tspace0 :TEXCOORD2;
55 half3 tspace1 :TEXCOORD3;
56 half3 tspace2 :TEXCOORD4;
57 };
58
59 VertexOutput vert (VertexInput v)
60 //这个函数应用在domain函数中，用来空间转换的函数
61 {
62 VertexOutput o;
63 o.uv = TRANSFORM_TEX(v.uv,_MainTex);
64 //Displacement 处理置换贴图
65 //由于并不是在Fragnent shader中读取图片，GPU无法获取mipmap信息，因此需要使用tex2Dlod来读取图片，使用第四坐标作为mipmap的level，这里取了0
66 float Displacement = tex2Dlod(_DisplacementMap,float4(o.uv.xy,0.0,0.0)).g;
67 //_DisplacementStrength = frac((_Time) * 5) * 0.2;
68 _DisplacementStrength = abs(frac((_Time) * 3) - 0.5) * 0.4;
69 Displacement = (Displacement-0.5)*_DisplacementStrength;
70 v.normal = normalize(v.normal);
71 v.vertex.xyz += v.normal * Displacement;
72
73 o.pos = UnityObjectToClipPos(v.vertex);
74 o.worldPos = mul(unity_ObjectToWorld, v.vertex);
75
76 //计算切线空间转换矩阵
77 half3 vNormal = UnityObjectToWorldNormal(v.normal);
78 half3 vTangent = UnityObjectToWorldDir(v.tangent.xyz);
79 //compute bitangent from cross product of normal and tangent
80 half tangentSign = v.tangent.w * unity_WorldTransformParams.w;
81 half3 vBitangent = cross(vNormal,vTangent)*tangentSign;
82 //output the tangent space matrix
83 o.tspace0 = half3(vTangent.x,vBitangent.x,vNormal.x);
84 o.tspace1 = half3(vTangent.y,vBitangent.y,vNormal.y);
85 o.tspace2 = half3(vTangent.z,vBitangent.z,vNormal.z);
86 return o;
87 }
88
89 //和上面的shader一样 需要额外定义的宏
90 #ifdef UNITY_CAN_COMPILE_TESSELLATION
91 //顶点着色器结构的定义
92 struct TessVertex{
93 float4 vertex : INTERNALTESSPOS;
94 float3 normal : NORMAL;
95 float4 tangent : TANGENT;
96 float2 uv : TEXCOORD0;
97 };
98
99 struct OutputPatchConstant {
100 //不同的图元，该结构会有所不同
101 //该部分用于Hull Shader里面
102 //定义了patch的属性
103 //Tessellation Factor和Inner Tessellation Factor
104 float edge[3] : SV_TESSFACTOR;
105 float inside : SV_INSIDETESSFACTOR;
106 };
107
108 TessVertex tessvert (VertexInput v){
109 //顶点着色器函数
110 TessVertex o;
111 o.vertex = v.vertex;
112 o.normal = v.normal;
113 o.tangent = v.tangent;
114 o.uv = v.uv;
115 return o;
116 }
117
118 //float _TessellationUniform;
119 OutputPatchConstant hsconst (InputPatch<TessVertex,3> patch){
120 //定义曲面细分的参数
121 OutputPatchConstant o;
122 o.edge[0] = _TessellationUniform;
123 o.edge[1] = _TessellationUniform;
124 o.edge[2] = _TessellationUniform;
125 o.inside = _TessellationUniform;
126 return o;
127 }
128
129 [UNITY_domain("tri")]//确定图元，quad,triangle等
130 [UNITY_partitioning("fractional_odd")]//拆分edge的规则，equal_spacing,fractional_odd,fractional_even
131 [UNITY_outputtopology("triangle_cw")]
132 [UNITY_patchconstantfunc("hsconst")]//一个patch一共有三个点，但是这三个点都共用这个函数
133 [UNITY_outputcontrolpoints(3)] //不同的图元会对应不同的控制点
134
135 TessVertex hullProgram (InputPatch<TessVertex,3> patch,uint id : SV_OutputControlPointID){
136 //定义hullshaderV函数
137 return patch[id];
138 }
139
140 [UNITY_domain("tri")]//同样需要定义图元
141 VertexOutput ds (OutputPatchConstant tessFactors, const OutputPatch<TessVertex,3>patch,float3 bary :SV_DOMAINLOCATION)
142 //bary:重心坐标
143 {
144 VertexInput v;
145 v.vertex = patch[0].vertex*bary.x + patch[1].vertex*bary.y + patch[2].vertex*bary.z;
146 v.tangent = patch[0].tangent*bary.x + patch[1].tangent*bary.y + patch[2].tangent*bary.z;
147 v.normal = patch[0].normal*bary.x + patch[1].normal*bary.y + patch[2].normal*bary.z;
148 v.uv = patch[0].uv*bary.x + patch[1].uv*bary.y + patch[2].uv*bary.z;
149
150 VertexOutput o = vert (v);
151 return o;
152 }
153 #endif
154
155 float4 frag (VertexOutput i) : SV_Target
156 {
157 float3 lightDir =_WorldSpaceLightPos0.xyz;
158 float3 tnormal = UnpackNormal (tex2D (_DisplacementMap, i.uv));
159
160 half3 worldNormal;
161 worldNormal.x=dot(i.tspace0,tnormal);
162 worldNormal.y= dot (i.tspace1, tnormal);
163 worldNormal.z=dot (i.tspace2, tnormal);
164
165 float3 albedo=tex2D (_MainTex, i.uv). rgb;
166 float3 lightColor = _LightColor0.rgb;
167 float3 diffuse = albedo * lightColor * DotClamped(lightDir,worldNormal);
168 float3 viewDir = normalize (_WorldSpaceCameraPos. xyz-i. worldPos. xyz);
169 float3 halfVector = normalize(lightDir + viewDir);
170 float3 specular = albedo * pow (DotClamped (halfVector, worldNormal), _Smoothness * 100);
171 float3 result = specular + diffuse;
172 return float4(result, 1.0);
173
174 return float4(result,1.0);
175 }
176 ENDCG
177 }
178 }
179 Fallback "Diffuse"
180 }
几何着色器Demo演示
- 根据顶点的法线方向画线
- 根据顶点画三角形
1 Shader "Unlit/GEO1"
2 {
3 Properties
4 {
5 }
6 SubShader
7 {
8 Tags { "RenderType"="Opaque" }
9 LOD 100
10
11 Pass
12 {
13 CGPROGRAM
14 #pragma vertex vert
15 #pragma geometry geom
16 #pragma fragment frag
17 // make fog work
18 #pragma multi_compile_fog
19
20 #include "UnityCG.cginc"
21
22 struct appdata
23 {
24 float4 vertex : POSITION;
25 float3 normal : NORMAL;
26 float3 tangent : TANGENT;
27 };
28
29 //注意这里并不是从顶点直接到片元 而是要先经过几何着色器
30 struct v2g //vert-geo
31 {
32 float4 vertex : SV_POSITION;
33 float3 normal : NORMAL;
34 float3 tangent : TANGENT;
35 };
36
37 struct g2f //geo-frag
38 {
39 float4 vertex : SV_POSITION;
40 fixed4 col : COLOR;
41 };
42
43 v2g vert (appdata v)
44 {
45 v2g o;
46 //不作操作
47 o.vertex = v.vertex;
48 o.normal = v.normal;
49 o.tangent = v.tangent;
50 return o;
51 }
52
53 [maxvertexcount(3)]
54 void geom(point v2g input[1], inout TriangleStream<g2f> outStream)
55 {
56 g2f o;
57
58 float3 normalP = input[0].vertex + input[0].normal;
59 //画三角形
60 o.vertex = UnityObjectToClipPos(input[0].vertex - input[0].tangent * 0.125);
61 o.col = fixed4(0.0, 1.0, 0.0, 1.0);
62 outStream.Append(o);
63
64 o.vertex = UnityObjectToClipPos(input[0].vertex + input[0].tangent * 0.125);
65 o.col = fixed4(0.0, 1.0, 0.0, 1.0);
66 outStream.Append(o);
67
68 o.vertex = UnityObjectToClipPos(normalP);
69 o.col = fixed4(0.0, 0.0, 1.0, 1.0);
70 outStream.Append(o);
71 }
72
73 fixed4 frag (g2f i) : SV_Target
74 {
75 fixed4 col = i.col;
76 return col;
77 }
78 ENDCG
79 }
80 }
81 }
- 制作一片草地
给三角形上色，使其接近草。
随机长度宽度。
加入随机转向
加入曲面细分
加入风场
示例shader
1 Shader "Unlit/GEO1"
2 {
3 Properties
4 {
5 _ColorRoot("ColorRoot", color) = (0,1,0,1) //根部颜色
6 _ColorTop("ColorTop", color) = (0,1,0,1) //尖部颜色
7
8 _WidthScale("WidthScale", Range(0.25,4)) = 1.0 //根部宽度倍率
9 _WidthRandPow("WidthRandPow", Range(1.0,2.0)) = 1.0//宽度随机强度
10
11 _HeightScale("HeightScale", Range(0.25,4)) = 1.0 //高度倍率
12 _HeightRandPow("HeightRandPow", Range(1.0,2.0)) = 1.0//高度随机强度
13
14 _RotAngle("RotAngle", Range(0.0,180.0)) = 0.0//旋转值
15 _RotRandPow("RotRandPow", Range(1.0,2.0)) = 1.0//旋转随机强度
16
17 _TessellationUniform("TessellationUniform",Range(1,16)) = 1//曲面细分强度
18
19 _WindMap("WindMap", 2D) = "white"{}//风场图
20 _WindSpeed("WindSpeed", Vector) = (0.1, 0.1, 0, 0)//吹风速度
21 _WindPow("WindPow", Float) = 1//风力强度
22 }
23 SubShader
24 {
25 Tags { "RenderType"="Opaque" }
26 LOD 100
27
28 Pass
29 {
30 CGPROGRAM
31 #pragma vertex vert
32 #pragma geometry geom
33 #pragma fragment frag
34 #pragma hull hs
35 #pragma domain ds
36 #pragma target 4.6
37
38 #include "UnityCG.cginc"
39 #include "Lighting.cginc"
40
41 struct appdata
42 {
43 float4 vertex : POSITION;
44 float3 normal : NORMAL;
45 float3 tangent : TANGENT;
46 };
47
48 struct v2g //vert-tess
49 {
50 float4 vertex : SV_POSITION;
51 float3 normal : NORMAL;
52 float3 tangent : TANGENT;
53 };
54
55 struct g2f //geo-frag
56 {
57 float4 vertex : SV_POSITION;
58 fixed4 col : COLOR;
59 };
60
61 struct InternalTessInterp_appdata {
62 float4 vertex : INTERNALTESSPOS;
63 float3 tangent : TANGENT;
64 float3 normal : NORMAL;
65 float2 texcoord : TEXCOORD0;
66 };
67
68 float4 _ColorRoot;
69 float4 _ColorTop;
70
71 float _WidthScale;
72 float _WidthRandPow;
73 float _HeightScale;
74 float _HeightRandPow;
75 float _RotAngle;
76 float _RotRandPow;
77
78 float _TessellationUniform;
79
80 sampler2D _WindMap;
81 float4 _WindMap_ST;
82 vector _WindSpeed;
83 float _WindPow;
84 v2g vert (appdata v)
85 {
86 v2g o;
87 //不作操作
88 o.vertex = v.vertex;
89 o.normal = v.normal;
90 o.tangent = v.tangent;
91 return o;
92 }
93
94 UnityTessellationFactors hsconst (InputPatch<v2g,3> v) {
95 UnityTessellationFactors o;
96 //_TessellationUniform = frac(_Time * 5) * 32;
97 o.edge[0] = _TessellationUniform;
98 o.edge[1] = _TessellationUniform;
99 o.edge[2] = _TessellationUniform;
100 o.inside = _TessellationUniform;
101 return o;
102 }
103
104 [UNITY_domain("tri")]
105 [UNITY_partitioning("fractional_odd")]
106 [UNITY_outputtopology("triangle_cw")]
107 [UNITY_patchconstantfunc("hsconst")]
108 [UNITY_outputcontrolpoints(3)]
109 v2g hs (InputPatch<v2g,3> v, uint id : SV_OutputControlPointID) {
110 return v[id];
111 }
112
113 [UNITY_domain("tri")]
114 v2g ds (UnityTessellationFactors tessFactors, const OutputPatch<v2g,3> vi, float3 bary : SV_DomainLocation) {
115 appdata v;
116
117 v.vertex = vi[0].vertex*bary.x + vi[1].vertex*bary.y + vi[2].vertex*bary.z;
118 v.tangent = vi[0].tangent*bary.x + vi[1].tangent*bary.y + vi[2].tangent*bary.z;
119 v.normal = vi[0].normal*bary.x + vi[1].normal*bary.y + vi[2].normal*bary.z;
120
121 v2g o = vert (v);
122 return o;
123 }
124
125 [maxvertexcount(3)]
126 void geom(point v2g input[1], inout TriangleStream<g2f> outStream)
127 {
128 g2f o;
129
130 _WidthScale = _WidthScale * lerp(_WidthScale / _WidthRandPow, _WidthScale * _WidthRandPow, abs(sin(input[0].vertex.x * _WidthRandPow + cos(input[0].vertex.z))));
131 _HeightScale = _HeightScale * lerp(_HeightScale / _HeightRandPow, _HeightScale * _HeightRandPow, abs(frac(fmod(input[0].vertex.x,_HeightRandPow) + (input[0].vertex.z - _HeightRandPow) * _HeightRandPow)));
132
133 float3 normalP = input[0].vertex + input[0].normal * _HeightScale;
134
135 float3 BinT = cross(input[0].normal, input[0].tangent);
136 _RotAngle = _RotAngle + 180 * (_RotRandPow - 1) * lerp(0, 180, abs(cos(input[0].vertex.x + cos(input[0].vertex.z))));
137 float3 RotTangent = input[0].tangent * cos(_RotAngle / 3.141592);
138 float3 RotBinTangent = BinT * sin(_RotAngle / 3.141592);
139 float3 RotValue = (RotTangent + RotBinTangent) * 0.125 * _WidthScale;
140
141 //风场
142 float2 uv = input[0].vertex.xz * _WindMap_ST.xy + _WindMap_ST.zw + _WindSpeed * _Time.x;
143 float2 windTex = (tex2Dlod(_WindMap, float4(uv, 0, 0)).xy * 2 - 1) * _WindPow;
144 float3 wind = normalize(float3(windTex.x, windTex.y, 0));
145
146 //画三角形
147 o.vertex = UnityObjectToClipPos(input[0].vertex - RotValue);
148 o.col = _ColorRoot;
149 outStream.Append(o);
150
151 o.vertex = UnityObjectToClipPos(input[0].vertex + RotValue);
152 o.col = _ColorRoot;
153 outStream.Append(o);
154
155 o.vertex = UnityObjectToClipPos(normalP + wind);
156 o.col = _ColorTop;
157 outStream.Append(o);
158 }
159
160 fixed4 frag (g2f i) : SV_Target
161 {
162 fixed4 col = i.col;
163 return col;
164 }
165 ENDCG
166 }
167 }
168 }
参考链接
【技术美术百人计划】图形 3.3 曲面细分与几何着色器 大规模草渲染
LearnOpenGL-CN-高级OpenGL几何着色器
【Unity Shader】使用Geometry Shader进行大片草地的实时渲染
UnityShader_使用几何着色器实现草坪效果（简易）
跳转回百人合集
这篇关于图形 3.3 曲面细分与几何着色器 大规模草渲染的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES：转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发（ArkTS版）”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源，看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62（正式版本）去哪下载？
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀？
- 2024-05-09这种运行结果里的10.100000001，怎么能最快改成10.1？
