shader!曲面效果的实现

标签: Cocos Creator 3D  cocos-creator  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倍,具体参数更具项目调整

地址

  • 微信公众号:搬砖小菜鸟
  • 扫码关注公众号,发送"曲面"可获取源码
版权声明:本文为carlos13207原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/carlos13207/article/details/109429034