Shader之一行代码实现马赛克

Creator 2.x
#1

经过一两天的CocosShader学习，发现cocos与单纯的WebGL还是不太一样， 它提供了更多的内置函数与宏，还有一些默认变量；让开发者编写Shader特效更加方便；
看了看别人家写的马赛克shader教程，于是自己动手写了个马赛克，不小心一行代码搞定；

演示：

截屏2020-05-3007.14.05.png932×634 19.1 KB

代码：

uniform PIXEL{
float hgsize;
float vgsize;
};

#if USE_TEXTURE
in vec2 v_uv0;
uniform sampler2D texture;
#endif

float pixelateIt (float uv, float size){
return (uv-mod(uv,size)) + (size/2.0);
}

void main () {
vec4 o = vec4(1, 1, 1, 1);

#if USE_TEXTURE
  vec2 c = v_uv0;
  c.x = pixelateIt(c.x, hgsize);
  c.y = pixelateIt(c.y, vgsize); 
  CCTexture(texture, c, o);
#endif

ALPHA_TEST(o);

gl_FragColor = o;

}

看出那行关键代码了吗？:laughing:

欢迎关注公众号， 接收更多Cocos/Shader/TypeScript干货：

2赞
#2

(uv-mod(uv,size))/size*size + (size/2.0);
能解释一下这段代码的作用吗？另外两个参数设为1是不是就是原图了？

#3

return (uv-mod(uv,size)) + (size/2.0); 代码已经改成这样了，更精简， 之前由于其他语言的习惯多加了代码；

2个参数代表如何分割像素， hgsize 0.1 代表 水平方向每个格子按宽度的1/10 取色；这样水平方向就10个像素格子了；

如果要显示原图， 就去掉 material 。
如果要分割更多的格子， hgsize和vgsize就要更小。

那段代码的作用就是告诉 片元着色器 取哪一点的颜色作为当前位置的颜色；

1赞
#4

借道问个问题

如果我想让我的effect 不输出任何颜色，这个需求怎么完成？

我现在是 写成 ：
void main（）{
return；
}

真机上效果是达到了，也不报错，但webgl有点问题，也报错，说 active draw
buffers with missing fragment shader outputs,我知道是啥意思，请问这里有更好的方式解决吗？有大佬知道吗？

#5

试试
void main(){
discard;
}

#6

谢谢回答，不过不行，和return一个效果

#7

我这里有效果哦， 你发出完整的effect文件看看？

#8

ok了，discard 应该是有效果的，我这边需要把 position也要设置为0.0 才行，不然spine就会显示不正确，虽然不知道是为什么，谢谢大佬的指点