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

嗯,缺口是因为 Trim 裁剪了

把图片属性中的 Trim Threshold 裁剪阈值 改为 0 试试

1720756501969

改了没缺口了,但之前的还是有绿边,我再找找原因

mark 都是我的

请问下,你们使用的顶点着色器和片段着色器的模板用的哪个呀?我自己创建的,用了shader代码后,整张图就变成一个颜色了。怎么调也不对。

2.X 的话 创建 Effect 时 模板就一个吧

屏幕截图 2024-08-13 183009

这个案例只需要修改 片段着色器 fs 就可以了

整张图就变成一个颜色

可能是 gl_FragColor 被赋值了一个固定的颜色,你可以检查一下

再请问下最后这句finalColor *= color; 这个color是哪儿来的?是顶点着色器传入的吗?

嗯 是的

先是在 顶点着色器

1723622514904

再由 顶点着色器 传到 片段着色器

1723622531816

你可以试着把这行代码去掉,这样的话 Node 中的 Color 就不会影响图片的颜色了

1723622674160

好的,谢谢。解决了一个问题,又遇到一个。我用的3.7.4的版本,shader也生效了。遇到一个蛋疼的问题,把材质挂到精灵上后,会发生奇怪的问题。
1.


这是正常的时候,不去点击或者拖拽他。
2.
当点击或者拖拽他的时候,精灵就偏到一边了。
有遇到过吗?理论来说,shader不会改变他的位置属性啊

偏移的话,大概是 顶点着色器 中,顶点的值随着视距变化了。

可能是模版选错了。

2D Shader 的话,可以根据具 Sprite 默认的 Effect builtin-sprite.effect 作为模版来修改,3.7.4 的话应该在 db://internal/effects/for2d/builtin-sprite.effect

1赞

牛啊。感谢。可以了

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

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

(先感想大佬能这么快回复我 :heart: :heart:

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

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

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

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

(并非大佬,也在学习中 :heart: :heart:)

1赞

OK,那就谢谢前辈

可以给spine动画用吗?

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

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

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