生草计划

🌿 | 风吹草低低低低 - 植被动画Ⅰ:顶点色实现

by ERIN.Z, 2022-04-13


写在前面

好久没写博客了...最近做完Substance的素材后就在赶中期进度,再加上休了一整个清明周,真是咕了好久。这几天帮忙整理SpeedTree到HDRP的流程,就顺便补一补植被动画的课。

Basic Vertex Animation

Shader

首先是比较经典的顶点动画实现方法,这里写了一个Subgraph用来计算顶点位置。 rotate 首先,我们希望植被是围绕生长的位置旋转,所以顶点位置的运算在object space进行,以(0,0,0)为旋转中点。 rotate 使旋转角度与距离相关,就可以让靠近枝头的顶点旋转得更远,使枝条看起来更柔软。加入基础的正弦动画,则可以得到这样的整体摆动效果。 sine animation stiffness 另外我们希望风强较大时,植被整体会产生倒伏,在周期性摇摆前又增加了一次整体的旋转。 rotate

Details from VertexColor

在speedtree或其他dcc软件中可以利用顶点色存储分簇/随机等信息,为动画添加细节。 speedtree在view-render中开启顶点色显示。 vertex color 在每个节点属性的vertex color一栏可以设置顶点颜色。如果没有这一栏,需要在tree运算器的Compute Flag中开启Vertex Color。

这里记录两种颜色通道的分配方式,首先是kk的教程版:

Chris’s version

Red Channel

R通道用来区分树冠的层次,第一级树枝线性增长,后续层级皆继承父级,总体上红色从内至外分布。 r r 在shader中,用红通道增加了风向的扰动,也用来控制从树干到枝头渐变的各种效果。

Blue Channel

B通道用来区分不同的分簇,第一级树枝随机分布,后续层级皆继承父季,使每一簇颜色不同。 b b 在shader中,用蓝通道增加了y方向的变化。

Green Channel

G通道用来增加随机性,树枝线性增长,树叶继承后增加随机性。 g g 在shader中用来增加叶片小枝条的动画。 着色后的预览效果如下: vc

ps.这里踩了一个小坑,speedtree有多个版本,之前使用的Unity Subscription Edition就没做顶点色导出的功能,只能换成Game Indie Edition导出为fbx才能使用顶点色信息😤😤。 vc 利用顶点色可以增添更多shader的动画细节: R通道是动画总控,是最主要的mask。后续BG的噪声都可以乘以R以过滤掉主要的树干。 BG通道可以分别为分簇和小叶片增加动画细节,将时间与通道值相加再求sine可以使动画获得不同的相位差。这里首先为分簇增加了y方向的的动画,实现方法为构造一个y值周期变化的Vector3,并与先前的坐标相加。分簇(B通道)的频率低一些,幅度大一些,叶片(G通道)的频率高一些,幅度小一些。为了让叶片的变化差别更大,这里周期长度、相位和幅度都用到了G通道的值: vc vc 到这里其实基本的Shader已经完成了。为了更好的视觉效果,我们还可以为叶片再添加一些旋转的细节。 用教程中的素材进行说明,在这里额外引入了一张贴图,r通道标记叶子的左侧,g通道标记叶子的右侧,b通道标记了整体的渐变。 windup tutorial graph 这样单一四边形的叶片也可以拥有简单的弯折动画: leaves bend

Lumberyard version

Blue Channel - Overall Stiffness

低频噪声控制整体摆动,255-最小幅度,0-最大幅度。

Red Channel - Leaves Stiffness

外围的高频噪声,0-最小幅度,255-最大幅度。在lumberyard engine中,红色通道需要读取面的法线,叶片的法线必须拥有水平分量。

Green Channel - Leaves Phase

噪声的相位差,也是以一个高频噪声的方式呈现。 speedtree的wind空间可以自动生成lumberyard的顶点色,所以一般不用手动编辑。 lunmberyard

Other versions

Firewatch中的顶点色设置: Firewatch Crysis中的顶点色设置: Crysis Crysis

by ERIN.Z

2024 © typecho & elise