Creator 2.1.2 Shader(粗解)

Demo在最下方–>>>>>
Tip:因为切圆的shader在浏览器上的图片顶点取值好像有问题(实测: 在 8 * 8 以下 和 513*513 以上的图片尺寸,在web上没问题),所以我重新放了一个外发光的shader,供大家参考。
web显示有问题的解决方案 :
// 关掉引擎的动态图集 (慎用,这会导致游戏的其他drawcall 增高)
cc.dynamicAtlasManager.enabled = false;

最近空闲的时候,研究了一下2.1.2版本的shader,这里单独提出来一个说明一下,希望对想了解2.1.2的童鞋有所帮助。
首先,新建一个Effect,从上往下说吧。


现在2.1.2的creator把effect做成了和Component类似的组件,在properties中,这里可以设置外部属性,在编译器中暴露出来。在当前版本中,可以在properties中设置的类型有:float vec2 vec3 color4

第二,在vs中,属性名称有所变化


这里特别注意的是 uniform mat4 cc_matViewProj;

第三,在fs中,基本和2.0.x的没有什么变化,只需要把外部属性 对应在 properties中


注意,在 properties中 类型为 color4 的,这里是vec4

最后,就是调用的问题,现在因为shader还不稳定,所以官方也没有把api完善,有点问题。我只写了一个需要刷新time的外部属性的例子,可以照着写。

哦,对了,Effect设置好了,直接拖拽就可以用了

Demo:
Demo.zip (2.6 MB)

20赞

能分享下这个 shader 么,谢谢 (:slight_smile:)

能分享下这个 shader 么,谢谢 (^__^)

有空学学

哦哦 看到了,刚才没加载出来,谢谢大佬

貌似demo圆形的不显示出来?


大佬你好,我在编辑器里能看到效果,但是打开后就没效果了, 能帮忙看下么

1赞

哦,没注意看浏览器,在模拟器上没问题的,可能shader代码有问题,导致了全部隐藏了。后面空了我再看看shader代码为毛在浏览器上有问题。(那个shaderTime这里没用的,CirclePortaint没刷新)

嗯 好的谢谢

圆形shader在浏览器上非纯色的图片有问题,大家可以找shader大神改改(我不是大神!)。Demo仅供参考

@visow
@大掌教
大佬们 ,帮忙看看 吧 :yum:

@fylz1125

不错不错,收藏了

收藏shader

@您好

我使用这个材质,发现还是有部分头像没能显示成圆形,能帮忙看下么,多谢
(我还发现如果头像图片太小,不能正确显示为圆形的概率会变大)

可以加我微信 15811337109, 有酬谢。。。

估计是因为你的那几个头像用的是图集·

并不是阿,是拉取的 Facebook 头像

你顺着这个思路查肯定能查到,shader明显是生效了的,但按uv拆切的范围和图片显示区域对不上

Demo更新。。。实测: 在 8 * 8 以下 和 513*513 以上的图片尺寸,在web上没问题

这个shader的代码,是从左上角到右下角裁切的,不知道为什么 8* 8 到 513513 之间的图片尺寸有问题,这个需要shader大神来重写。你如果非常急的话,有个方案可以参考,你让服务器存储Facebook的图片,尺寸设置在513513,你再creator中设置node的size,这样也可以使用。就是会增加图片大小的开销。