//外发光效果 CCEffect %{ techniques: - passes: - vert: vs frag: fs blendState: targets: - blend: true rasterizerState: cullMode: none properties: texture: { value: white } u_edge: { value: 0.5 } u_offset: { value: 0.01 } u_edgeBlur: { value: 0.01 } u_mixColor: { value: [1, 1, 1, 1], inspector: { type: color } } u_edgeColor: { value: [1, 1, 1, 0], inspector: { type: color } } }% CCProgram vs %{ #include precision highp float; in vec4 a_position; in vec2 a_uv0; out vec2 uv0; void main() { gl_Position = cc_matViewProj * a_position; uv0 = a_uv0; } }% CCProgram fs %{ precision highp float; in vec2 uv0; uniform sampler2D texture; uniform ARGS{ vec4 u_mixColor; float u_edge; }; // 是否边缘羽化 #if IS_Edge_Blur uniform ARGS1{ float u_edgeBlur; }; #endif // 是否边缘发光(不要和羽化一起使用,会有边) #if IS_EdgeGlowing uniform ARGS2{ float u_offset; }; #endif // 是否使用边缘颜色 #if USE_EDGE_COLOR uniform ARGS3{ vec4 u_edgeColor; }; #endif // 应用贴图颜色 画圆 vec4 drawCircle() { float edge = u_edge; float dis = 0.0; float offset = 0.0; vec2 uv = uv0; // 是否边缘发光 #if IS_EdgeGlowing offset = u_offset; uv = vec2(0.5 + (uv0.x - 0.5) * ((offset*2.0) + 1.0), 0.5 + (uv0.y - 0.5) * ((offset*2.0) + 1.0)); #endif if ( uv.x < edge ) { if ( uv.y < edge ) { dis = distance( uv, vec2(edge, edge) ); } if ( uv.y > (1.0 - edge) ) { dis = distance( uv, vec2(edge, (1.0 - edge)) ); } } else if ( uv.x > (1.0 - edge) ) { if ( uv.y < edge ) { dis = distance( uv, vec2((1.0 - edge), edge ) ); } if ( uv.y > (1.0 - edge) ) { dis = distance( uv, vec2((1.0 - edge), (1.0 - edge) ) ); } } // 混合外边颜色 vec4 color = u_mixColor * texture2D(texture,uv); // 边缘颜色 vec4 edge_color = color; // 边缘羽化,默认0.01,减少抗锯齿 float blur = 0.0; // 是否边缘羽化 #if IS_Edge_Blur blur = u_edgeBlur; #endif // 如果有外部颜色,重新定义 边缘颜色 #if USE_EDGE_COLOR // 如果应用贴图颜色混合 #if USER_TEXTURE_COLOR edge_color = u_edgeColor * texture2D(texture,uv); #else edge_color = u_edgeColor; #endif #endif if(dis > 0.001) { // 外圈沟 float gap = edge * blur; if(dis <= edge - gap) { color = color; } else if(dis <= edge) { // 平滑过渡: ret smoothstep(a, b, x) 可以用来生成0到1的平滑过渡. float t = smoothstep(0.,gap,edge-dis); // 边缘颜色和透明度 color = vec4(edge_color.rgb,t * edge_color.a); }else{ // 隐藏不要的部分 // 是否边缘发光 #if IS_EdgeGlowing color = vec4(edge_color.rgb, (offset - (dis - edge))/offset); #else color = vec4(edge_color.rgb,0.); #endif } } else { // 是否边缘发光 #if IS_EdgeGlowing float absX = abs(uv.x - 0.5); if(absX > 0.5) { color = vec4( edge_color.rgb, (offset - (absX - 0.5))/offset); } else { float absY = abs(uv.y - 0.5); if (absY > 0.5){ color = vec4( edge_color.rgb, (offset - (absX - 0.5))/offset); } else{ color = color; } } #else color = color; #endif } return color; } void main() { vec4 color = drawCircle(); gl_FragColor = color; } }%