cocos2dx 老照片效果

本文介绍了一种在Cocos2d-X中实现老照片效果的方法,通过自定义着色器来调整图片的颜色,包括两种实现方式:一是直接在代码中设置着色器字符串,二是从文件加载预设的着色器文件。

在此做个记录,方便以后查询使用

方式一:

-- 老照片效果
function GameTableUI:setNodeGray(node,flag)
    -- 默认vert
    local vertShaderByteArray = "\n"..
        "attribute vec4 a_position; \n" ..
        "attribute vec2 a_texCoord; \n" ..
        "attribute vec4 a_color; \n"..
        "#ifdef GL_ES  \n"..
        "varying lowp vec4 v_fragmentColor;\n"..
        "varying mediump vec2 v_texCoord;\n"..
        "#else                      \n" ..
        "varying vec4 v_fragmentColor; \n" ..
        "varying vec2 v_texCoord;  \n"..
        "#endif    \n"..
        "void main() \n"..
        "{\n" ..
        "gl_Position = CC_PMatrix * a_position; \n"..
        "v_fragmentColor = a_color;\n"..
        "v_texCoord = a_texCoord;\n"..
        "}"

    -- 老照片frag
    local flagShaderByteArray = "#ifdef GL_ES \n" ..
        "precision mediump float; \n" ..
        "#endif \n" ..
        "varying vec4 v_fragmentColor; \n" ..
        "varying vec2 v_texCoord; \n" ..
        "void main(void) \n" ..
        "{ \n" ..
        "vec4 c = texture2D(CC_Texture0, v_texCoord); \n" ..
        "gl_FragColor.xyz = vec3(0.38*c.r + 0.38*c.g +0.38*c.b); \n"..
        "gl_FragColor.r = c.r * 0.393 + c.g * 0.769 + c.b * 0.189; \n"..
        "gl_FragColor.g = c.r * 0.349 + c.g * 0.686 + c.b * 0.168; \n"..
        "gl_FragColor.b = c.r * 0.272 + c.g * 0.534 + c.b * 0.131; \n"..
        --"gl_FragColor.rgb = c.rgb + (gl_FragColor.rgb - c.rgb) * 1 \n;"..//控制照片老化程度(0-1)
        "gl_FragColor.w = c.w; \n"..
        "}"

    -- 移除老照片frag
    local pszRemoveGrayShader = "#ifdef GL_ES \n" ..
        "precision mediump float; \n" ..
        "#endif \n" ..
        "varying vec4 v_fragmentColor; \n" ..
        "varying vec2 v_texCoord; \n" ..
        "void main(void) \n" ..
        "{ \n" ..
        "gl_FragColor = texture2D(CC_Texture0, v_texCoord); \n" ..
        "}"
    if flag then
        local glProgram = cc.GLProgram:createWithByteArrays(vertShaderByteArray,flagShaderByteArray)
        glProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_POSITION,cc.VERTEX_ATTRIB_POSITION)
        glProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_COLOR,cc.VERTEX_ATTRIB_COLOR)
        glProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_TEX_COORD,cc.VERTEX_ATTRIB_FLAG_TEX_COORDS)
        glProgram:link()
        glProgram:updateUniforms()
        node:getVirtualRenderer():getSprite():setGLProgram(glProgram)
    else
        local glProgram = cc.GLProgram:createWithByteArrays(vertShaderByteArray,pszRemoveGrayShader)
        glProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_POSITION,cc.VERTEX_ATTRIB_POSITION)
        glProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_COLOR,cc.VERTEX_ATTRIB_COLOR)
        glProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_TEX_COORD,cc.VERTEX_ATTRIB_FLAG_TEX_COORDS)
        glProgram:link()
        glProgram:updateUniforms()
        node:getVirtualRenderer():getSprite():setGLProgram(glProgram)
    end
end

方式二:

-- 老照片效果
function GameTableUI:setNodeGrayFromFile(node,flag)
    if flag then

        --添加老照片
        local glProgram = cc.GLProgram:createWithFilenames("SHZ/res/shaders/gray.vsh","SHZ/res/shaders/gray.fsh")
        glProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_POSITION,cc.VERTEX_ATTRIB_POSITION)
        glProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_COLOR,cc.VERTEX_ATTRIB_COLOR)
        glProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_TEX_COORD,cc.VERTEX_ATTRIB_FLAG_TEX_COORDS)
        glProgram:link()
        glProgram:updateUniforms()
        node:getVirtualRenderer():getSprite():setGLProgram(glProgram)
    else

        --移除老照片
        local glProgram = cc.GLProgram:createWithFilenames("SHZ/res/shaders/normal.vsh","SHZ/res/shaders/normal.fsh")
        glProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_POSITION,cc.VERTEX_ATTRIB_POSITION)
        glProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_COLOR,cc.VERTEX_ATTRIB_COLOR)
        glProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_TEX_COORD,cc.VERTEX_ATTRIB_FLAG_TEX_COORDS)
        glProgram:link()
        glProgram:updateUniforms()
        node:getVirtualRenderer():getSprite():setGLProgram(glProgram)
    end
end

 

附:

gray.fsh(片段着色器)文件:

#ifdef GL_ES
precision mediump float;
#endif

varying vec4 v_fragmentColor;
varying vec2 v_texCoord;

void main()
{
    vec4 c = texture2D(CC_Texture0, v_texCoord);
    gl_FragColor.xyz = vec3(0.2126*c.r + 0.7152*c.g + 0.0722*c.b);
    gl_FragColor.r = c.r*0.393 + c.g*0.769 + c.b*0.189;
    gl_FragColor.g = c.r*0.349 + c.g*0.686 + c.b*0.168;
    gl_FragColor.b = c.r*0.272 + c.g*0.534 + c.b*0.131;

    gl_FragColor.rgb = c.rgb + (gl_FragColor.rgb - c.rgb) * 1--控制照片老化程度(0-1)
    gl_FragColor.w = c.w;
}

gray.vsh文件:

attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;

#ifdef GL_ES
varying lowp vec4 v_fragmentColor;
varying mediump vec2 v_texCoord;
#else
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
#endif

void main()
{
gl_Position = CC_PMatrix * a_position;
//CC_PMatrix 为纹理原坐标   CC_MVPMatrix  为变动坐标
v_fragmentColor = a_color;
v_texCoord = a_texCoord;
}

normal.fsh文件

#ifdef GL_ES
precision mediump float;
#endif

varying vec4 v_fragmentColor;
varying vec2 v_texCoord;

void main()
{
    gl_FragColor = texture2D(CC_Texture0, v_texCoord);
}

 

normal.vsh文件:

attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;

#ifdef GL_ES
varying lowp vec4 v_fragmentColor;
varying mediump vec2 v_texCoord;
#else
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
#endif

void main()
{
gl_Position = CC_PMatrix * a_position;
//CC_PMatrix 为纹理原坐标   CC_MVPMatrix  为变动坐标
v_fragmentColor = a_color;
v_texCoord = a_texCoord;
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

西溪漫步

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值