[ shader ] 凸透镜效果

Creator 2.x
#1

  • Creator 版本： 2.4.0

  • 就是很简单的凸透镜效果。

  • 第一次发帖。

  • 实现思路过程之后如果需要会更新。

  • 这是动图：

  • 这是GitHub地址：MyShader(凸透镜)

  • the end…

2赞
#2

不用推导 ，大致讲一下原理就行。

#3

谢谢大佬提醒，第一次发帖，不太懂，嘿嘿。:3:

#4

鬼鬼，有点东西嗷

#5

:14:其实还好啦～

#6

谢谢分享，留个爪印

#7

谢谢分享， 记录一下

#8

第一次搞shader ，用了effect，界面显示一个放大镜 运行没效果。 看看是哪还要注意。 是还需要分组么？
testShader.zip (917.3 KB)

#9

瞅瞅 ~~~

#10

图片源文件的packable选项勾选掉就可以了

#11

是 修改 magnifierCenterPoint 坐标点，实现上面动画效果么？ 看其他列子好像还需要搞个 ShaderUtils桥接，绑定之后才能操作

#12

是的，修改magnifierCenterPoint坐标点参数就可以实现移动操作，这个值的范围是0～1，之前没有material系统的时候需要ShaderUtils，现在creator把这个暴露出来了，我们就不需要写ShaderUtils了。

#13

this.spNode.getMaterials(); 拿到材质，怎么获取到 magnifierCenterPoint的值呢， 断点进去没看到这个参数。 第一次搞shader不太会这个流程。

#14

this.spNode.getComponent(cc.Sprite).getMaterials(0).setProperty(‘magnifierCenterPoint’, cc.v2(x,y));

#15

ok 我试试

#16

提醒一下，验证出来的，如果需要图片预设为自己的Effect,需要注意的是：

1，图片合批必须关掉，也就是Packable

2，如果使用了自动合图，则需要将需要设置的图片独立出来

3，如果使用的是图集，则需要在使用纹理时，对纹理进行重定向

4，如果要对下拉的头像做挖空处理，需要在下拉到纹理时，对纹理中_packable属性进行关闭

以上是目前验证出来的，这是在Effect不改变拿来即用的前提下需要注意的事项

3赞
#17

蟹蟹补充:yum: