电子说
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
全部0条评论
快来发表一下你的评论吧 !