OpenGL ES 2.0 顶点着色器的妙用

1.飘扬的旗帜(水面起伏)

基本原理

绘制一帧画面时由顶点着色器根据一定的规则变换各个顶点的位置，即可得到旗帜迎风飘扬的效果。

为了使旗帜的飘动过程比较平滑，采用基于正弦曲线的顶点位置变换规则。

 

计算方法

1. 传入顶点着色器的原始顶点的Z{X|Y|Z}坐标都是相同的(本案例为0)，经过顶点着色器变换后顶点的Z{X|Y|Z}坐标是根据正弦曲线分布的
2. 首先计算出当前处理顶点的X坐标与最左侧顶点X坐标的差值，即X距离
3. 然后根据距离与角度的换算率将X距离换算为当前顶点与最左侧顶点的角度差(tempAngle)
4. 接着将tempAngle加上最左侧顶点的对应角度(startAngle)即可得到当前顶点的对应角度(currAngle)
5. 最后通过求currAngle的正弦值即可得到当前顶点变换后的Z坐标

距离与角度的换算率指的是由开发人员认为设定的一个值，将距离乘以其后就可以换算成角度值。

例如可以规定，X方向上距离4等于2PAI，则换算公式为：X距离x2PAI/4

2.扭动的软糖

基本原理

实现扭曲软糖的效果只要将代表软糖的长方体中各层顶点的X,Z坐标按照一定的规则根据顶点的Y坐标以及当前帧的控制参数进行变换即可。

计算步骤

1. 首先，需要计算出当前顶点Y坐标与最下层顶点Y坐标的差值。
2. 接着根据Y坐标的差值，角度换算比例以及本帧的总扭曲角度换算出当前顶点的扭曲角度,计算公式为currAngle=(currY-startY)/ySanxangleSpan.
3. 最后根据当前顶点的X、Z坐标，扭曲的角度计算出变换后顶点的X、Z坐标，

X2 = xcosa-zsina

Z2 = xsina+zcosa

3.风吹椰林场泉的开发

基本原理

为了简化计算，采用的风向是与XOZ平面平行的。设当前风向与Z轴正方向的夹角为a,树干原始状态下与Y轴重合，点A为树干模型中的任一顶点，在风的吹动下偏转到A`点

则顶点着色器需要计算的问题为:已知A点坐标(X0,Y0,Z0)、当前风向与Z轴正方向的夹角a以及弧OA`所在圆的半径OO`,求A点偏转到A`后的坐标。

计算步骤：

......有时间补补数学吧

4.展翅飞翔的雄鹰

基本原理：

给顶点着色器提供动画中的每个关键帧对应的各个顶点的位置数据以及融合比例。顶点着色器根据两套位置数据及当前融合的比例融合出一套结果顶点位置数据。只要在绘制每一帧时提供不同的混合比例即可产生想要的动画。

5.二维扭曲

 要想能对原始三角形实现扭曲处理，必须将大三角形切分为很多的小三角形。