shader水面起伏的波浪

利用shader来实现飘扬的旗帜,同样可以实现水面起伏的效果.

说多无益,来看一张实现的美图,蔚蓝的天,还有那阵阵微风,水浪徐徐波动,动人心悸.

安卓版简单的demo下载

安卓版海滩波浪demo下载

一.原理

旗帜飘扬的动作都比较平滑,这个是利用了正弦曲线来实现顶点位置的变换规则,

简单看一下上图,水波利用先定义的一个函数来计算Y方向的移动,在VertexShader里面调用此函数来实现模型在Y轴方向的位置,并随着时间而起伏,实现类似波浪和旗帜飘扬的效果.

看一下效果图

代码实现:

float ReturnY( VS_INPUT In )
  {
    // --------------------- shader 1 -----------------------
    // 设置比较点，
    float3 fZero = float3( 0.0 ,0.0 , 0.0 );
    //振动值
    float fScale = sin(1.40*distance(In.Position, fZero) - g_fTime * 5) + 1.5;
    //随距离衰减

    float fY = -1.0 * exp( - fScale ) +1.0 ;
    //; 
    return max( fY , -4.0 );
  }

VS_OUTPUT RenderSceneVS( VS_INPUT In )
  {
    
    VS_OUTPUT Out = ( VS_OUTPUT )0;
    In.Position.y = ReturnY( In );
      
    float4x4 matWorldView = mul( g_matWorld ,g_matView );
    float4x4 matWorldViewProject = mul( matWorldView ,g_matProject );
    Out.Position = mul( In.Position , matWorldViewProject );
    Out.TextureUV = In.TextureUV;
    return Out; 
  }

在ReturnY函数里面,先求每个定点与原点的距离distance(In.Position, fZero),在缩放后(乘1.4,有更多波浪)再与时间合并才能变化,然后按指数衰减可.

水波制作

其实这里的浪是可以动的,只是在图片下面不是非常好的表达出来,在远处的波浪的效果更佳

我们只贴出处water的Vertex代码

uniform mat4 uMVPMatrix; //总变换矩阵
uniform float uStartAngle;//本帧起始角度
uniform float uWidthSpan;//横向长度总跨度
attribute vec3 aPosition;  //顶点位置
attribute vec2 aTexCoor;    //顶点纹理坐标
varying vec2 vTextureCoord;  //用于传递给片元着色器的变量
void main()     
{                  
   
   //计算X向角度          		
   float angleSpanH=40.0*3.14159265;//横向角度总跨度,对波纹的X轴幅度有影响 
   float startX=0.0;//起始X坐标
   //根据横向角度总跨度、横向长度总跨度及当前点X坐标折算出当前点X坐标对应的角度
   float currAngleH=uStartAngle+((aPosition.x-startX)/uWidthSpan)*angleSpanH;
   
   //计算出随z向发展起始角度的扰动值
   float startZ=0.0;//起始z坐标
   //根据纵向角度总跨度、纵向长度总跨度及当前点Y坐标折算出当前点Y坐标对应的角度
   float currAngleZ=((aPosition.z-startZ)/uWidthSpan)*angleSpanH;
   //计算斜向波浪
   float tzH=sin(currAngleH-currAngleZ)*0.7;   
   //根据总变换矩阵计算此次绘制此顶点位置
   gl_Position = uMVPMatrix * vec4(aPosition.x,tzH,aPosition.z,1); 
   
  // gl_Position = uMVPMatrix * vec4(aPosition,1); 
   vTextureCoord = aTexCoor;//将接收的纹理坐标传递给片元着色器
}  

参考: OpenGL es游戏开发(下)

DirectX 3D hlsl高级实例精讲

安卓版简单的demo下载

安卓版海滩波浪demo下载