本章为大家带来内发光特效。

2d-sprite-glow-inner.gif

一、内发光原理

学习 Shader 过程中，偶然在网上看到一句的内发光原理，十分精辟受用：

采样周边像素alpha取平均值，叠加发光效果

事实上，根据这句精辟的原理，就可以实现内发光了，你也试试吧？

以下为我的实现过程。

二、采样周边像素Alpha取平均值

怎么采集某个点的周边像素呢？这里我们可以用「按圆采样」算法

2.1 采样圆边上某点的 Alpha 值

如果我们已知圆的半径 radius ，已经某个角度 angle ，那么这个点的坐标就很好计算了，其上的 Alpha 值就不再话下：

Step 1

x = radius * cos(angle);
y = radius * sin(angle);

在 Cocos Creator 的 Shader 中，代码如下：

  /**
   * 获取指定角度方向，距离为xxx的像素的透明度
   *
   * @param angle 角度 [0.0, 360.0]
   * @param dist 距离 [0.0, 1.0]
   *
   * @return alpha [0.0, 1.0]
   */
  float getColorAlpha(float angle, float dist) {
    // 角度转弧度，公式为：弧度 = 角度 * (pi / 180)
    // float radian = angle * 0.01745329252; // 这个浮点数是 pi / 180
    float radian = radians(angle);
    vec4 color = getTextureColor(texture, v_uv0 + vec2(dist * cos(radian), dist * sin(radian))); 
    return color.a;
  }

PS：

这里我们用到了 sin 和 cos 函数，函数接受的参数是弧度制，因此我们要实现角度转弧度

// 角度转弧度，公式为：弧度 = 角度 * (pi / 180)
float radian = angle * 0.01745329252; // 这个浮点数是 pi / 180

但实际上，GLSL ES 语言已然存在内置函数 radians(float degree)：将角度值转化为弧度值，因此我们就用内置函数即可。

2.2 采样圆边上所有点的 Alpah 平均值

上面我们已经实现了获取圆上某点的颜色 Alpha 值。那么，我们只需要来一个 for 循环，遍历 0 到 360 度，那这个圆上所有点的颜色 Alpha 平均值就很容易算出来了。

但是，这样子可能会有两个问题：

计算量可能会太多，导致我们的性能低下
半径很少的时候，相邻的两个或多个角度的点可能很近，或者甚至重合，此时这两个点的 Alpha 值有可能相差不大，那么此时分别计算这些角度的 Alpha 值，就可能显得有点冗余了，取其一即可

基于以上考虑，最终我采用的是圆采样方式为：

以某个角度作为间隔，遍历由此产生的各个方向的Alpha值，将这些值的和的平均值近似看作这个圆的Alpha值

比如：

假设以 45° 角间隔，那么我只需要计算下图的 [10, 17] 共计 8 个点的 Alpha 平均值，那么这个值我就可以近似看作这个圆上所有点的 Alpha 平均值了

Step2

在 Cocos Creator 的 Shader 中，代码如下：

  /**
   * 获取指定距离的周边像素的透明度平均值
   *
   * @param dist 距离 [0.0, 1.0]
   *
   * @return average alpha [0.0, 1.0]
   */
  float getAverageAlpha(float dist) {
    float totalAlpha = 0.0;
    // 以30度为一个单位，那么「周边一圈」就由0到360度中共计12个点的组成
    totalAlpha += getColorAlpha(0.0, dist);
    totalAlpha += getColorAlpha(30.0, dist);
    totalAlpha += getColorAlpha(60.0, dist);
    totalAlpha += getColorAlpha(90.0, dist);
    totalAlpha += getColorAlpha(120.0, dist);
    totalAlpha += getColorAlpha(150.0, dist);
    totalAlpha += getColorAlpha(180.0, dist);
    totalAlpha += getColorAlpha(210.0, dist);
    totalAlpha += getColorAlpha(240.0, dist);
    totalAlpha += getColorAlpha(270.0, dist);
    totalAlpha += getColorAlpha(300.0, dist);
    totalAlpha += getColorAlpha(330.0, dist);
    return totalAlpha * 0.0833; // 1 / 12 = 0.08333
  }

2.3 采样点周边像素 Alpha 平均值

上面两个步骤，我们已经实现了 近似采样一个圆上所有点的 Alpha 平均值 。

而如果我们把「周边」这个词语理解为由很多个半径不同的圆组合起来，那么现在我们只需要采样多几个圆，那么就可以实现我们的最终需求了—— 采样周边像素Alpha取平均值 。

Step3

那么，那么我们要采样多少个圆呢？采集少了，效果可能粗糙，采集多了，可能计算量过多导致性能降低

一般而言，这种可变的属性，我们应该交给上层去传入，但是如果上层要用内发光特效，你暴露的一个参数名字叫 采样多少个圆 ，那使用者一般会很茫然。

事实上，更加贴合上层使用者理解的属性名应该为 发光宽度 glowColorSize。

那我们又如何在程序上，在这个发光宽度上，控制采样多少个圆呢？

划分方案有很多种，这里我们采用按照发光宽度，等比划分10个圆，只采样这10个圆。（当然你可以改动这里的划分方案）

在 Cocos Creator 的 Shader 中，代码如下：

  /**
   * 获取发光的透明度
   */
  float getGlowAlpha() {
    // 如果发光宽度为0，直接返回0.0透明度，减少计算量
    if (glowColorSize == 0.0) {
      return 0.0;
    }

    // 将传入的指定距离，平均分成10圈，求出每一圈的平均透明度，
    // 然后求和取平均值，那么就可以得到该点的平均透明度
    float totalAlpha = 0.0;
    totalAlpha += getAverageAlpha(glowColorSize * 0.1);
    totalAlpha += getAverageAlpha(glowColorSize * 0.2);
    totalAlpha += getAverageAlpha(glowColorSize * 0.3);
    totalAlpha += getAverageAlpha(glowColorSize * 0.4);
    totalAlpha += getAverageAlpha(glowColorSize * 0.5);
    totalAlpha += getAverageAlpha(glowColorSize * 0.6);
    totalAlpha += getAverageAlpha(glowColorSize * 0.7);
    totalAlpha += getAverageAlpha(glowColorSize * 0.8);
    totalAlpha += getAverageAlpha(glowColorSize * 0.9);
    totalAlpha += getAverageAlpha(glowColorSize * 1.0);
    return totalAlpha * 0.1;
  }

2.4 调试发光

Ok，有了上面的采样手段，现在我们可以来调试了。

首先，那么发光颜色选什么好呢？

交给上层控制吧，我们只需要定义一个 发光颜色 glowColor 即可。

float alpha = getGlowAlpha();
gl_FragColor = glowColor * alpha;

先来个内发红光看下： glowColor = vec4(1.0, 0.0, 0.0, 1.0);

Test 1

可以看到右边的调试结果还是挺符合我们的输出预期，周边点明显是有一个渐变透明过程

但是，此时我们得到的是内部透明度为1，靠近边缘的为接近0的透明度，其他位置为0的透明度。而内发光效果的话，恰恰相反，我们需要的是一个内部透明度为0，靠近内边缘透明度为1的效果。

那么我们尝试反转一下

float alpha = getGlowAlpha();

// 内发光是从边缘发光的，是需要内部透明度为0，靠近边缘的接近1的透明度
// 因此我们需要反转一下透明度
alpha = 1.0 - alpha;
      
gl_FragColor = glowColor * alpha;

Test 2

现在是反转了，但是图像外边的其他位置却上色了，而在反转之前，图像外边的其他位置是透明的，为了应用这部分过来，在反转之前，我们判断一下，透明度大于某个阈值，我们才反转 alpha 值。

那么这里的阈值要怎么定义呢？

为了更加深入理解这个问题，我们先来放大一下 Cocos 的 Logo 上方的那个角，先看清楚一个问题：

glowThreshold

可以看到图像的边缘黑色并不是立即切换到完全透明的，而是一个过渡效果，从黑色开始慢慢变透明直到完全透明，透明从1 -> 0 慢慢过渡。事实上大部分的图像边缘都差不多类似这样子，甚至部分图片的设计，本身就是有一个很长的渐变过渡带。

那么问题来了，针对这种有渐变过渡带的纹理，在我们实现的内发光特效中，我们的发光边缘要怎么定义呢？

从图像边缘最外边的透明度为0.0开始发光？
从图像边缘往内，不透明（即透明度为1.0）的地方开始发光？
从图像 0.0 到 1.0 之间的某个值开始发光？

不好取舍，不同图片可能是需要不同处理，效果才好。

既然如此，我们就可以将这几种定义抽象一下，比如叫 发光阈值 glowThreshold，范围[0.0, 1.0]。我们暴露给上层使用者，交由上层使用者自行根据纹理去控制此值的大小即可。

现在我们的代码就可以修改为这样子了：

float alpha = getGlowAlpha();
if (alpha > glowThreshold) {
  // 内发光是从边缘发光的，是需要内部透明度为0，靠近边缘的接近1的透明度
  // 因此我们需要反转一下透明度
  alpha = 1.0 - alpha;
}
gl_FragColor = glowColor * alpha;

在 glowThreshold 为 0.2 时，效果如下：

Test 3

OK，看上去差不多的样子了，现在我们试着简单手动混合一下，看起来内发光效果就有了

Test 4

？？？

好像还并不是内发光的效果，看上去上方尖角的光源有点扩边了？这是那里出问题了呢？

因为我们是要做内发光，所以如果点本来是透明的或者小于我们设立的阈值，那么其实这个点是没必要进行采样周边Alpha平均值的，否则就会有上面这种扩边的问题，那么我们在取发光透明度的时候，在判断一下即可

  /**
   * 获取发光的透明度
   */
  float getGlowAlpha() {
    // 如果发光宽度为0，直接返回0.0透明度，减少计算量
    if (glowColorSize == 0.0) {
      return 0.0;
    }

    // 因为我们是要做内发光，所以如果点本来是透明的或者接近透明的
    // 那么就意味着这个点是图像外的透明点或者图像内透明点（如空洞）之类的
    // 内发光的话，这些透明点我们不用处理，让它保持原样，否则就是会有内描边或者一点扩边的效果
    // 同时也是提前直接结束，减少计算量
    vec4 srcColor = getTextureColor(texture, v_uv0);
    if (srcColor.a <= glowThreshold) {
      return srcColor.a;
    } 

    // 将传入的指定距离，平均分成10圈，求出每一圈的平均透明度，
    // 然后求和取平均值，那么就可以得到该点的平均透明度
    float totalAlpha = 0.0;
    totalAlpha += getAverageAlpha(glowColorSize * 0.1);
    totalAlpha += getAverageAlpha(glowColorSize * 0.2);
    totalAlpha += getAverageAlpha(glowColorSize * 0.3);
    totalAlpha += getAverageAlpha(glowColorSize * 0.4);
    totalAlpha += getAverageAlpha(glowColorSize * 0.5);
    totalAlpha += getAverageAlpha(glowColorSize * 0.6);
    totalAlpha += getAverageAlpha(glowColorSize * 0.7);
    totalAlpha += getAverageAlpha(glowColorSize * 0.8);
    totalAlpha += getAverageAlpha(glowColorSize * 0.9);
    totalAlpha += getAverageAlpha(glowColorSize * 1.0);
    return totalAlpha * 0.1;
  }

现在看下来效果差不多了，是内发光了！

Test 5

但是好像发光强度不够得样子？没关系，我们给它加点料，来个一元四次方程加强，让靠近边缘的地方更加亮

flavour

对应代码如下：

float alpha = getGlowAlpha();
if (alpha > glowThreshold) {
  // 内发光是从边缘发光的，是需要内部透明度为0，靠近边缘的接近1的透明度
  // 因此我们需要反转一下透明度
  alpha = 1.0 - alpha;

  // 给点调料，让靠近边缘的更加亮
  alpha = -1.0 * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) + 1.0;
}
gl_FragColor = glowColor * alpha;

现在大概效果已经出来了：

Glow Inner

三、混合颜色

在上面动图中，实际上为了演示，我是有两个 Sprite，一个用内置材质，一个用在调试中的内发光材质，通过手动移动的方式，我们已经大概看到将内发光叠加到原图上方，看起来就是内发光特效了。

Test 5

那么这一步，我们要怎么实现一步到位，直接就将内发光叠加在原图上，形成最终效果。

实际上，这也叫 混合模式 ，混合模式主要解决的是两种颜色之间，该如何混合，比如叠加、覆盖等等。

混合模式在我们平时开发中也是经常在使用着的，比如，Sprite 组件：

Blend

理解不同的组合，对于我们实现不同混合效果，是基础中的基础。

关于这部分，官方在 UI渲染批次合并指南的 Blend 模式章节一文中有说到，觉得纯文字比较难以理解的，可以参考网上 2dx 关于混合模式的相关文章。

回归我们的主题，要实现在原图上叠加我们的内发光特效，那么

// 源颜色就是内发光颜色
vec4 color_dest = o;

// 目标颜色就是图案颜色色 
vec4 color_src = glowColor * alpha;

// 按照官方的混合颜色介绍和规则
//
// 要在图案上方，叠加一个内发光，将两者颜色混合起来，那么最终选择的混合模式如下：
//
// （内发光）color_src: GL_SRC_ALPHA
// （原图像）color_dest: GL_ONE
// 
// 即最终颜色如下：
// color_src * GL_SRC_ALPHA + color_dest * GL_ONE
gl_FragColor = color_src * color_src.a + color_dest;

混合后的最终效果：

Glow Inner

四、编辑器 texture 函数问题

在对比 浏览器 和 Cocos Creator 编辑器 的预览结果的后，你可能会发现编辑器的发光效果，相比起浏览器的没有那么好，比如编辑器左右两边的发光很窄。

texture function problem

这是因为

在 Cocos Creator 2.2.1 的编辑器中，超出边界的uv并不是返回 vec4(0.0, 0.0, 0.0, 0.0)，实际返回为

超出左边界的uv，返回 v_uv0.x = 0 的颜色
超出右边界的uv，返回 v_uv0.x = 1 的颜色
超出上边界的uv，返回 v_uv0.y = 1 的颜色
超出下边界的uv，返回 v_uv0.y = 0 的颜色

而这样子的处理，会导致我们获取图像边缘位置的周边像素的的 alpha 值有可能偏低。

比如：在我们这个例子上，以图像中间左边缘为例，采样周边平均 Alpha 的时候，因为超出图像边界的都是 1.0 ，因此这个图像左边缘的平均 Alpha 就是1.0，相当于没有内发光了，光不起来，同理图像其他边缘也是。

要修复这个问题其实也很简单，我们只需要封装一层获取 uv 像素的函数

  vec4 getTextureColor(sampler2D texture, vec2 v_uv0) {
    if (v_uv0.x > 1.0 || v_uv0.x < 0.0 || v_uv0.y > 1.0 || v_uv0.y < 0.0) {
      return vec4(0.0, 0.0, 0.0, 0.0);
    }
    return texture(texture, v_uv0);
  }

然后将原来所有的 texture() 函数的地方直接替换为 getTextureColor() 即可

PS：上面用到的静图、动图都是修复后的效果图

五、总结

5.1 采样算法

在实现 采样周边像素Alpha取平均值 的时候，我们采用了「按圆采样」算法去进行采样，实际上，这里有很多种采样方式，比如：矩形偏移采样

矩形偏移采样：

取右、右上、上、左上、左、左下、下、右下共计8个方向的点作为周边
按照上一步的定义去扩大「周边」，从而实现收集

大概步骤如下图：

Total

不过，你也可以看到，这种方案的收集方式存在一个问题：

随着收集距离的扩大，会出现越来越多的点不会收集到，因为收集方向就只有8个，方向夹角之间的点是收集不了的（比如 23 -> 24， 33 -> 34 之间的点）

那是不是这个方案就不好呢，其实也不是，这个方案的最大优点是减少了很多 sin ， cos 的计算，因为就收集的8个方向，而这8个方向恰好只需要加法和减法就可以的出来了，因此性能上会更好，对于部分图片，如果发光宽度很短，那么此采集方案可能更优。

那么，简单总结下现在讨论的两种「周边采样算法」的优劣：

采样算法	优点	缺点	适用场合
按圆采样	覆盖面相对较全，效果相对细腻	计算量相对偏多	绝大部分场合
矩形偏移采样	覆盖面相对少，效果相对粗糙，且由于方向固定，可能存在特殊情况下，效果不理想	计算量相对较少	发光宽度较少，比较少大转折弯的纹理

当然，还有其他很多采样算法，如果你有想法，不妨自己动手试下吧，试完之后记得分析下优劣和使用场合，这会让你有更多收获。

5.2 关于发光强度

为了实现边缘更加光亮，我直接写死了一个一元四次方程，实际上这可能不好控制。另外一些好的公式可以使用二次贝塞尔或者三次贝塞尔可以很方便操作控制点，从而实现不同曲度。

5.3 其他

当然，在操作一遍下来后，说不准你也觉得这种实现不好，xxx地方有哪些地方可以优化，如果有更好的方案，我们不妨留言交流一下吧。

OK，本章完，完整代码在我的 Github 仓库或 Gitee 仓库中可以找到。

下一篇：

👉Cocos Creator Shader Effect 系列 - 7 - 点光/扫光特效

上一篇：

👉Cocos Creator Shader Effect 系列 - 5 - 马赛克/像素化特效

Cocos Creator Shader Effect 系列 - 6 - 内发光特效

Cocos Creator Shader Effect 系列 - 6 - 内发光特效

一、内发光原理

二、采样周边像素Alpha取平均值

2.1 采样圆边上某点的 Alpha 值

2.2 采样圆边上所有点的 Alpah 平均值

2.3 采样点周边像素 Alpha 平均值

2.4 调试发光

三、混合颜色

四、编辑器 texture 函数问题

五、总结

5.1 采样算法

5.2 关于发光强度

5.3 其他