shader！曲面效果的实现

前言

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

效果展示

正文

1.实现原理

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

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

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

主要步骤：

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

2.代码

详细代码见：surfaces.effect

属性

properties: &propsmainTexture:    { 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倍，具体参数更具项目调整

地址

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

shader！曲面效果的实现相关推荐

Cocos Creator 3D 材质系统：曲面效果如何实现？
引言前不久发布的 Cocos Creator 1.0.2 版本中正式加入了对 OPPO 小游戏.vivo 小游戏以及华为快游戏平台的支持,在诸多 Creator 3D 制作的小游戏案例中,<猪 ...
Android关于绘图中Shader 的效果（中级）
Android关于绘图中Shader 的效果(中级) 关于绘图中Shader 的效果本人对API中Shaser的参数理解不够深刻所以只能测试来看效果一下就看出来了 Shader mShade=n ...
shader镜子效果错误
shader镜子效果错误今天实现了下Unity shader的镜子效果,但是离谱的是跟着书上敲出来的代码,放在书上提供的场景中效果是正常的,我自己搭的场景就出现了左右都会映射,而且一层接一层.可能解 ...
[Unity Shader]凌波微步效果
[Unity Shader]凌波微步效果相信很多人都看过天龙八部,里面的段誉有一个技能就是凌波微步:移动的时候人先到,衣角跟随其后.说白了就是移动时有一个残影跟着他.下面先看下最终效果下面我们看如 ...
【Unity Shader 消融效果_案例分享】
1.实现逻辑消融效果主要是利用了Shader中的clip()函数,也就是透明测试功能,在ASE中叫"Opacity Mask". 消融效果是基于一张"Noise&quo ...
Shader玉石效果
(1)效果图如下: (2)效果分析: 1.边缘 :"高亮" "通透"效果 . 2.非边缘的"厚重"效果 3.光滑的反射"环境&qu ...
【Unity Shader 描边效果_案例分享】
1.实现逻辑描边效果Shader有多种实现方式,可以通过后处理和MatCap实现. 这次主要想展示的是通过两个Pass实现. 当Shader中有多个Pass时,渲染流程会安装顺序依次执行,于是后面的 ...
Shader——自发光效果
Shader "Custom/OutLightting" {// 属性Properties{_MainTex("Texture(RGB)", 2D) = &qu ...
unity shader景深效果
实现效果景深效果实现思路由两张图组成,分别是远处的模糊状态和近处的清晰状态,根据物体的深度判断物体离摄像机的距离确定物体的状态.两个图进行插值,越近越靠近清晰的图像. 代码脚本代码: usin ...

shader！曲面效果的实现

前言

效果展示

正文

1.实现原理

主要步骤：

2.代码

属性

顶点着色器

地址

shader！曲面效果的实现相关推荐

最新文章

热门文章