马赛克原理
要实现马赛克的效果，需要把图片一个相当大小的正方形区域用同一个点的颜色来表示，相当于将连续的颜色离散化，因此我们可以想到用取整的方法来离散颜色，但是在我们的图片纹理坐标采样时在0到1的连续范围，因此我们需要将纹理坐标转换成实际大小的整数坐标，接下来要把图像这个坐标量化离散，比如对于一个分辨率为256X256像素的图片，马赛克块的大小为8X8像素，我们先得将纹理坐标乘以（256,256）使其映射到0到256的范围，相当于一个整数代表一个像素，再将纹理坐标取除以8之后取整，最后再将坐标乘以8，除以256.重新映射回0到1的范围，但是纹理坐标已经是离散的，而非连续的。
顶点着色器代码
attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;
//varying 顶点shader和片段shader之间相互传递的参数。
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
void main()
{
gl_Position = CC_PMatrix * a_position;
v_fragmentColor = a_color;
v_texCoord = a_texCoord;
}
片段着色器
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
//宿主程序传递的值
uniform vec2 texSize; //图片纹理大小
uniform vec2 mosaicSize; //马赛克格子大小
void main()
{
//得到当前纹理坐标相对图像大小整数值
vec2 intXY = vec2(v_texCoord.x * texSize.x, v_texCoord.y * texSize.y);
//根据马赛克块大小进行取整
vec2 XYMosaic = vec2(int(intXY.x / mosaicSize.x) * mosaicSize.x, int(intXY.y / mosaicSize.y) * mosaicSize.y);
//把整数坐标转换回纹理采样坐标
vec2 UVMosaic = vec2(XYMosaic.x / texSize.x, XYMosaic.y / texSize.y);
gl_FragColor = texture2D(CC_Texture0, UVMosaic);
}
cocos2d-x代码
在头文件上添加声明代码
//public:
void onUpdate(float dt); //update 这里每帧调用
cocos2d::GLProgramState* _glProgramState = nullptr;
float _timer = 0.0;
在源文件的init()函数里添加以下代码
//精灵
auto splash = Sprite::create("HelloWorld.png");
splash->setPosition(100, 100);
this->addChild(splash, 1);
//vert:顶点着色器 frag:片段着色器
auto glprogram = GLProgram::createWithFilenames("Mosaic.vert", "Mosaic.frag");
_glProgramState = GLProgramState::getOrCreateWithGLProgram(glprogram);
//设置属性
//设置纹理大小
_glProgramState->setUniformVec2("texSize", Vec2(splash->getContentSize().width, splash->getContentSize().height));
_glProgramState->applyUniforms();
splash->setGLProgramState(_glProgramState);
_timer = 0.0;
//每帧刷新
schedule(schedule_selector(HelloWorld::onUpdate));
最后onUpdate(）更新马赛克
void HelloWorld::onUpdate(float dt)
{
//更新马赛克
_timer += dt;
float mskSzie = (sin(_timer) + 2.0) * 8;
_glProgramState->setUniformVec2("mosaicSize", Vec2(mskSzie, mskSzie));
}
可以看到动态马赛克效果
马赛克效果变种
在网上查资料的过程中，也看到一些很有意思的马赛克算法变种，例如圆形，蜂巢形等。下面推荐链接，有兴趣的可以去了解。
http://www.voidcn.com/blog/panda1234lee/article/p-6147128.html
想要了解更多的shader效果可以看一个牛人的博客：
http://blog.csdn.net/panda1234lee/article/category/6347204/1
网友评论