cocos Shader & Glsl 入门（五）

#五丶 cocos creator Shader 示例

基于cocos creator2.4.7版本的引擎
https://github.com/SaltedFish1012/cocosEffctProject

马赛克效果

马赛克效果既在片段着色器中对像素进行区域化处理，使其分区域显示集中颜色。
float x = floor(v_uv0.x*100.0)/100.0;
float y = floor(v_uv0.y*100.0)/100.0;
vec4 mask = texture2D(texture, vec2(x,y));
gl_FragColor = mask;

边缘光效果

边缘光效果既使纹理的边缘色块色值一致。

幻灯片转场效果

缩放

vec4 texColor1 = texture(texture, v_uv0);
    vec4 texColor2 = texture(outTexture, v_uv0);

    float t = abs(cos(cc_time.x)) ;
    if (v_uv0.y > t || v_uv0.x > t){
    gl_FragColor = texColor1;
    }else{
    gl_FragColor = texColor2;
    }

推入

void main () {

    vec4 resColor = vec4(0.0,0.0,0.0,1.0);
    float R = 1.0 - abs(cos(cc_time.x));
    if (v_uv0.x >= R)
    resColor = texture(texture, vec2(v_uv0.x - clamp(R,0.0,1.0), v_uv0.y));
    else
    resColor = texture(outTexture, vec2(v_uv0.x - R + 1.0, v_uv0.y));

    gl_FragColor = resColor;
}

百叶窗

float random(vec2 st) {
    return fract(sin(dot(st.xy,vec2(12.9898, 78.233))) * 43758.5453123);
}

void main () {
    vec4 texColor1 = texture(texture, v_uv0);
    vec4 texColor2 = texture(outTexture, v_uv0);

    float t = abs(cos(cc_time.x));
    vec4 resColor = vec4(t,0.0,0.0,1.0);
    vec2 gridNum = vec2(55.0,42.0);
    float randomNum = random(floor(v_uv0.x * gridNum)/ gridNum);
    float randomNum2 = random(floor(v_uv0.y * gridNum)/ gridNum);
    if (t <= randomNum )  //&& cc_time.x <= randomNum2
        resColor = texColor1;
    else
        resColor = texColor2;
        
    gl_FragColor = resColor;
}

融入

float random(vec2 st) {
    return fract(sin(dot(st.xy,vec2(12.9898, 78.233))) * 43758.5453123);
}

void main () {
    vec4 texColor1 = texture(texture, v_uv0);
    vec4 texColor2 = texture(outTexture, v_uv0);

    float t = abs(cos(cc_time.x))*10.0;
    vec4 resColor = vec4(0.0,0.0,0.0,1.0);

    if (t < 10.){
    float c = t/10.;
    resColor = mix(texColor1, texColor2,c);
    }else{
    resColor = texColor2;
    }
    
        
    gl_FragColor = resColor;
}

擦除

 float random(vec2 st) {
  return fract(sin(dot(st.xy,vec2(12.9898, 78.233))) * 43758.5453123);
}

void main () {
vec4 texColor1 = texture(texture, v_uv0);
vec4 texColor2 = texture(outTexture, v_uv0);

float t = abs(cos(cc_time.x));
vec4 resColor = vec4(1.0,0.98,0.99,0.2);

if (t > v_uv0.x){
  resColor = mix(resColor,texColor2,t);
}else{
  resColor = mix(texColor1,resColor,t);
}

gl_FragColor = resColor;
}

旋转

#define PI 3.1415926
vec2 transform(vec2 texCoord,float theta,float zOffset)
{
    vec2 res = texCoord - 0.5;    // 从 (0.5,0.5) 移动到 (0,0)
    // 执行旋转和投影（投影本质上是剪切）
    res.x = res.x / cos(theta);
    res.y = res.y / (1.0 - res.x * sin(theta));
    res.x = res.x  / (1.0 - res.x * sin(theta));
    res = res * (1.0 + zOffset);    // 执行 z 方向的位移，经过投影后，整体视作缩放
    res = res + 0.5;    // 从 (0,0) 移动到 (0.5,0.5)
    return res;
}

void main()
{
    float t = abs(cos(cc_time.x));
    // 图片在z方向上的偏移量
    float zOffset = 0.2 - abs(0.4*t - 0.2);
    vec2 texCoordAfterTransform = transform(v_uv0, t*PI, zOffset);
    vec4 resColor = vec4(t,0.0,0.0,1.0);
    vec4 texColor1 = texture(texture, texCoordAfterTransform);
    vec4 texColor2 = texture(outTexture, vec2(1.0 - texCoordAfterTransform.x, texCoordAfterTransform.y));
    if (t <= 0.5)
        resColor = texColor1;
    else
        resColor = texColor2;
        
    gl_FragColor = resColor;
}