【分享】2D图像边缘发光Shader

好东西,收藏了

其实原理这样

6赞

没仔细看,直觉告诉我这么做的效率很低

学习了,这种外边框显然比楼主分享的好用,易用

原理明白了,就是不知道咋写…

写出来测试一下

原理就是差不多的,下面这个方法只要把主楼中的SAMPLE改为4,相对UV坐标存一个vec2数组去取而不是计算,最后把maxAlpha从max换成累加就是和下面一模一样了,性能也是差不多的。
其实这个SAMPLE取值用4和8就够了,16是没必要的,至于角度计算肯定是不好的,不清楚硬件会不会优化这个角度计算,但是肯定是存16个vec2,用16/SAMPLE间隔去取理论上性能好一点。

如果原理指的是从纹理采样赋值,那确实差不多。不然的话差异还挺大,lz的方法是探嗅半径r周围的片段,链接图的方法是相当于往四面偏移拓展了有效片段大小

效率不怕,渲染一次就好了。

刚好我的游戏需要一个点击提示的shader,救大命了

介绍下渐变边的思路:
第一次, 绘制到 stencil 或者 mask buffer上
第二次, 开始沿着黑边边界往外+1, 随着这个值越大, alpha 值越小, 对应的颜色变化, 转成uv 顺着一个条带贴图采样。(不要纠结内外,假设大的值为图像区域外,左大右小, 就往左; 上大小小, 就往上; 自己搬着笔杆子数数,然后写死;不要去搜图像处理,形态学,除非你想秃头)
重复上面第二部, 知道效果OK。

(高级的办法是第二部换成3x3, 5x5, 7x7 的卷积模板做)

如果是3D的情况, 就是 第一步之前通过各种办法获得这个mask 或者 stencile

1赞

https://www.shadertoy.com/view/WdGSDd
这个描边看起来就不错,还可以调整渐变 :rofl:

2赞

mark1111111111

这种有demo吗 需要只有红色的外边

这个描边效果不错,做了一个 3.5.2 升级

https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/2dP1/Creator3.5.2_2D_OuterEdgeOfText

1赞

渲染一次是什么意思

渲染一次保存下来。

保存在哪里

cc.RenderTexture

设置 纹理宽高有点麻烦,如果是个动画里面有多个纹理就炸了