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

请问大佬,3.8.2,网页运行,使用修改后的给图片描边会出现边缘也变色,取消自动合图也会这样,所以我打算判断处理的v_uv0在不在边缘,该怎么写呢

‘出现边缘也变色’,是什么意思呀,没有很理解,可以截图看看吗 :thinking:

截图 边缘也设置的0.001,设置0.01就背景全绿了,取消合图也一样

你这个图是不是下方贴着边缘的?

没有呀,故意用ps改成了四周有空的

哦?这个Effect是根据图片透明度alpha值来检测图像边缘的,你可以检查一下图片的边缘的透明度。如果方便的话可以发一下原图,我也测试一下。

Pic_house

Creator 3.8.2 我测试时没遇到这个问题

编辑器:

浏览器:

1720754813009

代码基本上也没改动:

宽度我也测试了一下,也还好:

:thinking:

截图2

奇怪,我单独创建一个场景也没有边,但是这四周可以看到明显的缺口,代码也一样的,不知道哪里的问题

我知道了,你的图用了trim。

我取消勾选也是一样的

嗯,缺口是因为 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赞