前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >灵魂扫描线算法

灵魂扫描线算法

作者头像
Jean
发布2021-09-07 11:22:30
5730
发布2021-09-07 11:22:30
举报
文章被收录于专栏:Web行业观察

比如要生成如上所示的扫描线,可以作用于任何网格体,我们用虚幻引擎的shader编辑器来实现这个GPU特效。为什么叫灵魂扫描线呢,因为这个扫描线是由内而外的:从物体的外接球中心(外心)发射,直到外接球边缘,匀速地扫描经过的每个像素(原子),被扫射的像素们呈现反色,往复循环,这就是灵魂扫描线的基本原理。所以我们需要以下输入:

  • 原子坐标:像素的世界坐标(原子指网格体三角面上每个逻辑点)
  • 外心:包围球中心
  • 外接球半径:包围球半径
  • 时间摄动:时间参数
  • 速度:扫描线运动速率(相对速率,相对于半径)
  • 宽度:扫描线的宽度(相对宽度,相对于半径),半径的占比
  • 原色:物体的底色,需要根据此计算出反色(1-color)

首先我们要算出原子到球心的距离与半径之比,由此按距离给所有原子分配0~1的值。

这样子,扫描线的宽度和速度都和物体大小成正比。因为输出的是归一化的数值,我们使用fractional这个周期为1的函数。

二(三)选一函数:If与Step

if和step是shader中常用的二选一函数,相当于C语言中的三元表达式(?),它们都是通过2个数的大小比较,进行二选一。

  • step是阶级函数,返回0或1,因为GPU中都是通过浮点数0.0和1.0来表示bool类型的,这和cpu不太一样。
  • if函数则可以返回0和1以外的值,除此之外,if函数还可以通过”相等误差“参数实现三选一,图中的”Equals Threshold“的值控制着A==B的情况。

但是我们只需要在原色和反色之间进行二选一,所以在上面的frac函数图像中,作常函数Y=width与原frac相交,Y<width的部分才显示反色。于是我们有:

其中1-x就是反色算法,A接入的是之前的frac函数,width就是扫面线的相对宽度,base color是物体的底色(所以扫描线是材质函数,非材质)。整个shader如下:

调用方式示例:

下面展示一些demo:

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-08-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 WebHub 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档