Cocos2d-x Shader 外发光与呼吸效果｜默然的博客

本文先对透明像素周边做 alpha 采样生成外发光，再通过周期函数改变发光强度，形成呼吸效果。示例用于说明实现思路，移动端使用前需要验证 Shader 编译兼容性和采样性能。

实现步骤

1. 不透明区域直接渲染原纹理。
2. 对透明区域周围的 alpha 进行采样，根据不透明采样点数量计算发光颜色和强度。
3. 周期性调整 glow_expand，实现呼吸效果。

外发光 Shader

// glow.fsh
#ifdef GL_ES
precision mediump float;
#endif

varying vec4 v_fragmentColor;
varying vec2 v_texCoord;

uniform vec2 resolution; // 纹理像素宽高
uniform vec3 glow_color;    // 发光颜色
uniform float glow_expand; // 发光强度
uniform float glow_range;  // 发光范围

const float sampleNum = 5.0;
const float AsNotAlpha = 0.3;  // 0.0 - 1.0
// 思路：先过滤不透明点，然后按照角度找到这个范围内不透明的点的“不透明程度”，不透明程度越高，发光越多

void debug(float x)
{
    //vec4 col = texture2D(CC_Texture0, v_texCoord.xy);
    // if (v_texCoord.x > 0.5 && v_texCoord.y > 0.5) 
    {
        gl_FragColor = vec4(x/255.0, x/255.0, x/255.0, 1.1);
    }
}

// 获取像素周围不透明点的数量
int getStrokeCount()
{
    vec2 unit = 1.0 / resolution.xy;//单位坐标
    float r = glow_range;
    float step = r / sampleNum;
    int count = 0;
    //遍历一个矩形，当前的坐标为中心点，遍历矩形中每个像素点的颜色
    for(float x = -r; x < r; x += step)
    {
        for(float y = -r; y < r; y += step)
        {
            vec4 col = texture2D(CC_Texture0, v_texCoord + vec2(x * unit.x, y * unit.y));
            if(col.a > AsNotAlpha)
            {
                count = count + 1;
            }
        }
    }
    return count;
}

void main()
{
    vec4 myC = texture2D(CC_Texture0, v_texCoord);
    
    if (myC.a > AsNotAlpha)
    {
        gl_FragColor = v_fragmentColor * myC;
        return;
    }

    // 获取像素周围不透明点的数量
    int strokeCount = getStrokeCount();
    
    float totalSample = (sampleNum * 2.0) * (sampleNum * 2.0);
    float limit = totalSample * 0.8;
    float strokeCountF = float(strokeCount);
    if (strokeCountF > limit)  //四周围有足够多不透明点时，这个点设成描边颜色
    {
        myC.rgb = glow_color * glow_expand;
        myC.a = strokeCountF * glow_expand / totalSample;
    }
    else
    {
        myC.rgb = glow_color * strokeCountF * glow_expand / limit;
        myC.a = strokeCountF * glow_expand / totalSample;
    }

    gl_FragColor = v_fragmentColor * myC;
}

兼容性与性能

这段 Shader 的双层循环边界来自 uniform。部分 OpenGL ES 2.0 驱动要求循环次数可在编译期确定，可能无法通过编译；同时，每个透明片元约进行 100 次纹理采样，大图或多个节点同时使用时开销较高。生产环境可改用固定循环上限、预生成外发光纹理，或使用横纵两次处理的方案。

实现呼吸效果

通过 scheduleUpdate 周期性修改 glow_expand。可以使用 sin 或 cos 生成平滑变化：

alpha 不能为负，因此对 sin(time) 取绝对值：

logo:scheduleUpdate(function(delta)
    time = time + delta
    local sin_value = math.abs(math.sin(time))
    glProgramState:setUniformFloat("glow_expand", sin_value)
end)

最终效果：

完整 Lua 参数设置

local logo = self.holder:getChildByName("Sprite_start_logo")
local size = logo:getTexture():getContentSizeInPixels()

glProgramState:setUniformVec2("resolution", {x = size.width, y = size.height})
glProgramState:setUniformVec3("glow_color", cc.vec3(0, 1, 0))
glProgramState:setUniformFloat("glow_range", 10)
glProgramState:setUniformFloat("glow_expand", 1)

local time = 0
logo:scheduleUpdate(function(delta)
    time = time + delta
    local sin_value = math.sin(time)
    glProgramState:setUniformFloat("glow_expand", math.abs(sin_value))
end)

logo:setGLProgramState(glProgramState)

节点退出或效果结束时，应停止对应的更新回调，避免无效调度继续执行。

相关阅读

• Cocos2d-x 自定义着色器入门（1）
• Cocos2d-x Shader uniform 变量（3）
• Cocos2d-x Shader 实现图片模糊