风格化草渲染

风格化草技术文档总结
一、风格化草渲染
利用曲边细分着色器和几何着色器进行草的绘制，并且通过草距离相机的距离和屏幕的大小对细分的数量进行控制，从而提升性能。

1、 曲面细分着色器
a.曲面着色器中每条边都有一个细分因数控制该条边的细分数量。

b.可以通过每条边中点距离摄像机的距离来控制细分的程度，因为远离摄像机的话，高精度细分会造成性能浪费。同时，细分的数量与屏幕的分辨率也有关系，分辨率降低，细分数量相应降低提升效率。这里引入_ScreenParams.y ，屏幕像素的高度来进行计算。


距离对细分的影响

c.使用hullshader进行细分的计算。

d.domain shader中利用重心坐标计算每个点在模型空间的信息包括顶点信息、法线信息。并将计算出来的结果传给几何着色器

2.几何着色器

a.以上一步传入的顶点信息为基础，在顶点的模型空间重新绘制三角形，结果如下图所示。
几何着色器绘制简单三角形

b.但是直接在模型空间绘制会遇到问题，假设在曲面绘制，绘制出来的三角形不会与曲面垂直。为了解决这个问题需要在切线空间中绘制三角形，因此我们需要将顶点转换到切线空间。同时需要注意切线空间的up方向为z轴，而模型空间为y轴，因此我们还需要构建矩阵对顶点进行旋转。
构建TBN矩阵。

构建旋转矩阵：参数为角度和旋转轴

模型空间绘制三角形

切线空间绘制三角形

c.对于绘制的三角形进行随机宽度、高度、旋转、弯曲的设置。
随机高度


随机旋转

随机弯曲

给予随机的高度、宽度、旋转

给予随机的弯曲

d.增加叶片的细分，核心代码如下。

1. 设置顶点最大数量SEGMENT*2+1
2. 生成三角形利用了TrangleStrip的算法，即前三个顶点形成一个三角形，额外增加的新的顶点会与前两个顶点形成新的三角形。
3. 具体过程：SEGMENT代表生成的草叶一共有几层顶点，如图所示就三层。当第一层时高度为segmentH0=0,宽度为segmentW0。随着高度增加，宽度递减。按照左右左右的方式画出叶片。最上部的顶点只有一个，单独计算。
   4）同时，增加了叶片的弯曲度，每往上一层，顶点会相前偏移。

e.增加风对于叶片的影响

1. 取顶点在模型空间的xz坐标+随时间变换的值，并用这个值作为uv去采样一张噪波图。
   将采样的结果应用于顶点的变换。以风的方向为旋转轴，对顶点进行旋转。
2. 注意：底部的顶点不会受风的影响和弯曲的影响，最后在做顶点变换的时候需要做区分。

3.片元着色器
这一步主要对草的颜色利用一张噪波图对草的颜色进行了区分。草的颜色会随着风的吹拂而变化，借鉴光遇。
a.采样一张噪波图对叶片顶点色进行区分，同一个叶片的顶点用同一种颜色。
b.片元着色器中利用采样获得的数据进行插值，以此来获得丰富的绿色。

颜色遮罩

插值后色彩

c.加入风对颜色的影响。这个部分我是给风增加了一个颜色。先用风的颜色和草的颜色去做插值，这个插值的因子其实就是采样风移动的噪波图获得的数据。又根据草uv.y的信息进行插值，让风的颜色只有靠近顶部才有。

4.物体与草的交互
a.计算物体与草的顶点的距离，加入参数_Radius，半径越大偏移的量就越大，最后让草的顶点位置减去物体的位置，计算出偏移的方向乘上偏移量，得出顶点偏移的向量。
b.把这步加入到草做顶点细分的步骤，除了底部不偏移，越往上偏移的量越大。

c.通过C#脚本，将物体的位置信息传入到shader中。

最终成果：

卡通渲染+风格化草渲染