shader！曲面效果的实现

前言

今天菜鸟给大家带来的效果如标题所说，是一个曲面效果的实现。在大多跑酷类游戏中这种效果用的相对比较多，今天菜鸟就带来自己的实现思路。

效果展示

正文

1.实现原理

其实曲面的实现常见的有两种方式

• 1.在制作模型的时候将模型本身做成曲面类型
• 2.在程序中使用代码达到曲面的效果

第一种不用说了，今天主要说一下第二种。

主要步骤：

• 首先菜鸟使用的是顶点偏移的方式来实现效果
• 根据世界坐标下顶点距离摄像机的距离确定每个顶点的朝x,y,z,三个方向的偏移量
• 偏移量的计算，菜鸟结合数学中的匀加速运动方程式x=vt+½at²，其中v初始0，a为可设置属性，t为摄像机距离顶点的距离
  

2.代码

详细代码见：surfaces.effect

属性

properties: &props
    mainTexture:    { value: white }
    mainColor:      { value: [1, 1, 1, 1], editor: { type: color } }
    surfaces:       { value: [0, 0,0, 0] }
    start_dis:       { value: [10] }
# surfaces 偏移量 数组前三位位分别表示x,y,z三个方向的偏移,第四位忽略
# start_dis 偏移启示距离，当顶点距离摄像机超过这个值开始偏移

顶点着色器

vec4 position=matWorld * In.position;
float dis=cc_cameraPos.z-position.z;   //-10-(-20)
//x=v0*t+0.5*a*t*t;  其中的t=dis  a=surfaces  v0默认0
if(dis>start_dis){
    position.x+=0.5*(surfaces.x/100.0)*dis*dis;
    position.y+=0.5*(surfaces.y/100.0)*dis*dis;
    position.z+=0.5*(surfaces.z/100.0)*dis*dis;

}
factor_fog = CC_TRANSFER_FOG(position);
CCPassShadowParams(position);
return cc_matProj * cc_matView *position;
注意：菜鸟的demo中菜鸟是取得z轴方向的距离进行处理，同时菜鸟对偏移量缩小了100倍，具体参数更具项目调整

地址

• 微信公众号：搬砖小菜鸟
  
• 扫码关注公众号，发送"曲面"可获取源码