Shader入门学习案例，描边效果

[439642593]

牛啊。感谢。可以了

[3274917295 (mslmsl)]

我刚学shader，如果想要实现描边的不透明度逐渐降低，那这个描边方案能不能实现

[wy_xin152 (Xin52)]

这个案例里没有实现，所以不清楚效果怎么样，你要是自己改的话肯定是能用的

[3274917295 (mslmsl)]

（先感想大佬能这么快回复我 ）

我想能不能在片元着色器里，对每个像素周围半径x内的所有像素进行不透明度判断，以此实现描边宽度为x的效果，在计算的同时也能获得每个描边像素到需要描边对象的最短距离y；然后透明度设置为y/x，这样理论上应该可以实现颜色变淡效果。

我不知道这样操作是不是对性能不太好（应该是有更好的方案，不过个人脑子慢，还没想到。），主要是刚学也不知道这样子代码怎么写，弱弱地问下这样子行不行。

[wy_xin152 (Xin52)]

写写看才知道，实践经常会出现意想不到的问题；

你说的这个方法获取每个像素到描边对象的距离，可以在论坛里查一下SDF，有基于SDF的描边和外发光。

(并非大佬，也在学习中 )

[3274917295 (mslmsl)]

OK，那就谢谢前辈

[kome2000]

可以给spine动画用吗？

[wy_xin152 (Xin52)]

这是按 sprite 的模本改的，spine没试过但应该是不行的

[1111291 (花天狂骨)]

SDF纹理+高性能描边组件

网页体验链接 / Cocos Store 效果演示： [SDF描边] 组件介绍： 全新推出的 SpriteOutline 组件，为您的精灵图片实现更炫酷的描边和发光特效，兼具美观与性能优势。通过实时生成 SDF（有符号距离场）纹理，并结合自定义 Shader，实现更流畅、边缘更柔和的描边动画。 核心原理： 在运行时基于目标贴图生成 SDF 纹理，通过 Shader 使用该纹理即可实现多种视觉特效。以下为 Shader 核心逻辑片段： float time = cc_time.x; float sdf = texture(cc_spriteTexture, uv0).a; float outlineWidth = color.x; int u_mode = int(floor(color.y * 255.0 + 1e-5)); bool u_breath_ani = abs(color.z * 255.0 - 1.0) < 1e-5; // 计算边缘距离（>0：边界内，<0：边界外） float dist = (sdf - 0.5) * 2.0; float absDi…

[orchidworld]

这个SDF的方案是不是图片就能合批了

[1111291 (花天狂骨)]

是的，用了新的材质，会打断