前言
今天菜鸟给大家带来的效果如标题所说,是一个曲面效果的实现。在大多跑酷类游戏中这种效果用的相对比较多,今天菜鸟就带来自己的实现思路。
效果展示
正文
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倍,具体参数更具项目调整
地址
- 微信公众号:搬砖小菜鸟
- 扫码关注公众号,发送"曲面"可获取源码