quick cocos使用shader给图片描边再挖空

最新推荐文章于 2024-04-08 11:18:03 发布

dongforever

最新推荐文章于 2024-04-08 11:18:03 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： C-C++ cocos2dx-lua

本文链接：https://blog.youkuaiyun.com/u011755031/article/details/50371031

cocos2dx-lua 同时被 2 个专栏收录

21 篇文章

订阅专栏

C-C++

10 篇文章

订阅专栏

这篇博客介绍了如何在Cocos2d-x中利用OpenGL ES的Shader技术，为2D图片添加描边和挖空效果。通过详细解析2d_effect_frag.material、2d_outline_frag.frag和2d_default.vert等文件，阐述了顶点着色器和片段着色器在图形处理中的应用，并提供了具体的调用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Cocos2dx底层图形绘制使用OpenGL ES可编程着色器(Shader)。OpenGL ES(OpenGl for Embedded System)是OpenGL三维图形API的子集，针对手机，PDA和游戏主机等嵌入式设备而设计。

2d_effect_frag.material 文件：

material Outline
{
    technique
    {
        pass
        {
            shader
            {
                vertexShader = 2d_default.vert
                fragmentShader = 2d_outline_frag.frag

                u_outlineColor  = 0,0,0
                u_textureOffset = 0.03,0.0
            }
        }

    }
}

2d_outline_frag.frag 文件：

#ifdef GL_ES
precision mediump float;
#endif

varying vec2 v_texCoord;//从顶点文件传来的坐标
varying vec4 v_fragmentColor;

uniform vec3 u_outlineColor;//可以从外部传值的参数。
uniform float u_threshold;
uniform vec2 u_textureOffset;

void main()
{
    vec4 accum = vec4(0.0);
    vec4 normal = vec4(0.0);
    normal = texture2D(CC_Texture0, vec2(v_texCoord.x, v_texCoord.y));//将CC_Texture0代表的图片的v_texCoord顶点位置的颜色取出到normal中。

//叠加4张图片，分布在上下左右，效果即为**对图片描边**
    accum += texture2D(CC_Texture0, vec2(v_texCoord.x + u_textureOffset.x, v_texCoord.y + u_textureOffset.y));
    accum += texture2D(CC_Texture0, vec2(v_texCoord.x - u_textureOffset.x, v_texCoord.y + u_textureOffset.y));
    accum += texture2D(CC_Texture0, vec2(v_texCoord.x - u_textureOffset.x, v_texCoord.y - u_textureOffset.y));
    accum += texture2D(CC_Texture0, vec2(v_texCoord.x + u_textureOffset.x, v_texCoord.y - u_textureOffset.y));
    //设置叠加的4张图片的颜色，u_outlineColor可以从外部传入进来
    accum.rgb = u_outlineColor * accum.a;
    //将原始图片位置挖空
    if (normal.a != 0.0)
    {
        accum.a = 0.0;
    }
    //只保留边框
    normal = (accum * (1.0 - normal.a));        // + (normal * normal.a);
    //输出边框
    gl_FragColor = v_fragmentColor * normal;
}

2d_default.vert 文件：vertex shader，用于顶点计算，主要用于控制顶点的位置，可以传入当前顶点位置和纹理坐标。

attribute vec4 a_position;//attribute变量，可以从外部传入。
attribute vec2 a_texCoord;
attribute vec4 a_color;

#ifdef GL_ES
varying lowp vec4 v_fragmentColor;//varying变量，用于vertex shader 和fragment shader 之间传递数据。
varying mediump vec2 v_texCoord;
#else
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
#endif

void main()
{
    gl_Position = CC_PMatrix * a_position;
    v_fragmentColor = a_color;
    v_texCoord = a_texCoord;
}

调用：调用时设置相对应的参数即可。

    local color = cc.c3b(0,0,0)
    local material = cc.Material:createWithFilename("shaders/Growth/2d_effect_frag.material")
    local program_state = material:getTechniqueByIndex(0):getPassByIndex(0):getGLProgramState()
    program_state:setUniformVec3("u_outlineColor", cc.vec3(color.r/255, color.g/255, color.b/255))     --设置u_outlineColor的值
    program_state:setUniformVec2("u_textureOffset", {x = 0.02, y = 0.02})
    sprite:setGLProgramState(program_state)