X-Ray扫描动效可以打造成开机动画、汽车自检等场景吗

电子说

1.2w人已加入

描述

X-Ray扫描动效是影视中常见的特效,变形金刚电影中汽车人扫描汽车变身的镜头让人印象深刻,科技感扑面而来。那么,这么炫的技能能不能应用在智能汽车的HMI设计上?将开机动画、汽车自检等场景打造成X-Ray扫描动效是一种什么感受?

当!然!可!以! 一切交给KANZI

通过KANZI软件实现X-Ray扫描动效 接下来我们将逐步讲述如何使用KANZI实现X-Ray扫描特效:

1. 在车模原有效果不变的情况下,实现X光移动扫描车身的效果

在KANZI中,汽车模型一般使用特殊材质例如光照模型材质、PBR材质来实现真实的汽车效果,因此要在原有的材质效果上实现动效,需要在原有的材质Shader代码上进行功能扩展。

本例中的车模使用的是KANZI自带的Blinn-Phong着色模型;

在Fragment Shader中,对最后经过光照计算输出的color值进行操作实现效果,最后通过gl_FragColor输出。

在Vertex Shader中,定义vPos变量代表模型在世界坐标系下的顶点坐标,输出到Fragment Shader使用。

Fragment Shader中定义ScanLinePosX和ScanLineWidthX两个float值;

将世界坐标系下模型顶点坐标的X与ScanLinePosX相减并取绝对值,获取每个顶点到Scan Line PosX的距离dist,与Scan Line WidthX进行判断,在范围内对color值进行再计算实现效果,范围外则显示原有车模颜色值,以此确定扫描区域的范围; 扫描

通过Animation曲线动态更改Scan Line PosX实现扫描区域的移动;

2. X光扫描车身,模型边缘发光效果的实现

边缘光即Rim Light,在当前观察视角下模型的边缘加个光的效果,通过常见的光照模型检测边缘,模型顶点的法线向量(即垂直于顶点平面的向量)与摄像机和顶点间的视角向量之间的夹角越大,说明越靠近边缘。

扫描

定义uniform 参数Rim Light Color 作为边缘光颜色输入值,Rim Power Factor作为边缘光强度因子,N为标准化后的顶点法线向量,V为标准化后的顶点与摄像机间方向向量,这两个向量在原本的光照模型Shader中都已近计算好了,可以直接使用。

OpenGL内置dot(N, V)函数表示返回两个向量的点积,返回值越接近0表示夹角越大、越接近边缘,Rim Power Factor参数传入Open GL内置pow ()指数函数,控制边缘光强度,最后获得扫描区域rimColor颜色值。 

3. X光扫描区域透视效果实现

定义uniform 参数XRay Percentage表示X-Ray透视强度,分别控制了Rim Light颜色与车模原本颜色混合强度,和扫描区域透视强度;

XRay Percentage越大区域显示边缘光越强,反之则显示车模原本颜色。 实现透视效果需要车模分出内部与外壳两个结构,设置车模外壳部分节点混合Blend Mode为阿尔法: 预乘(Alpha: Premultiplied),使车外壳模型可透明,内部模型则不需要。

rimColor的alpha通道通过内置函数smoothstep()返回0到1直接的值,并通过XRay Percentage参数控制;

最终实现X-Ray效果可控:

4. X光扫描区域网格效果及边缘渐变的实现

定义Wire Texture传入网格图纹理,纹理Wrap Mode设置Repeat;

通过放到UV坐标使纹理重复扩展形成网格,定义Wire Tex Strength参数控制网格显示强度,最后将网格纹理颜色值与rimColor混合叠加。

1)X-Ray扫描区域边缘需要有渐变过度的效果,通过之前计算得到的模型顶点与Scan Line PosX之间的距离值dist,与区域的宽度值Scan Line WidthX相比,获得0到1之间的值;

2)通过pow()返回它的1.5次方得到factor,表示当前模型顶点到扫描区域中心的距离因子,扫描区域边缘的距离越远,factor值越小;

3)再通过mix()函数混合rim Color与车模原始色,越接近扫描区域边缘越向车模原始色渐变;

最后使用Animation或状态机控制Shader的自定义的参数实现X-Ray扫描的效果。
       责任编辑:pj

打开APP阅读更多精彩内容
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉

全部0条评论

快来发表一下你的评论吧 !

×
20
完善资料,
赚取积分