zoukankan      html  css  js  c++  java
  • 任意两张带透明图像的一种形状过渡效果

    一直想要一个Flash 那种形状渐变效果,这两天苦思冥想了一番实现了,先看效果。

    1S%4`6HAO054V`OS$`875KD

    一开始是往把贴图alpha通道识别成路径,建模想办法拉顶点的方向去,想来想去不是个好办法,后来还是决定直接基于位图实现,尽量采用gpu可以处理的方式。

    然后往这边思考后,脑子里就浮现出了ditance field 这个概念,alpha表达的还是颜色,直接插值alpha会呈现出颜色渐变的结果。

    而distance field 反映的是离边的远近,插值他就会呈现出每个像素离边的距离的变化。

    确定方案后就是实现了。

    我采用的方案是把原图的alpha通道替换掉,存成距离。这个过程比较慢,要提前进行。

    这个步骤的代码如下:image

    主要是将每个alpha值替换为离边的距离,在形状内>128,离边越远越大,在形状外<128,离边越远越小

    然后在使用的时候就完全可以gpu来解决了,对unity来说,写个shader就可以了

    普通的diffuseshader,在输出alpha值的地方改一下就可以了,每个alpha的值设计是>128 就是不透明,否则就是透明。

    shader代码就这么一句

    c.a =step(stepvalue,c.a);

    我们设置的是128,对shader来说 就是 stepvalue 取0.5;

    stepvalue 也是可以修改的,stepvalue变小就会呈现出膨胀的效果,如上面的效果。

    渐变什么的就是插值,那就没啥要讲的了

  • 相关阅读:
    WCF 通讯标准绑定
    FTP FtpWebRequest 异步上传文件
    适用于zTree 、EasyUI tree、EasyUI treegrid
    PropertyInfo 类
    通过类库ChineseChar实现将汉字转化为拼音
    使用内存流导出Excel
    钉钉开发文档示例
    .Net Mail SMTP 发送网络邮件
    C# 解析 Json数据
    Newtonsoft.Json高级用法(转)
  • 原文地址:https://www.cnblogs.com/crazylights/p/3782565.html
Copyright © 2011-2022 走看看