游戏场景过渡效果

异名实现了一个基于颜色偏移的游戏场景过渡效果。这种效果利用了起始颜色与目标颜色之间的动态插值，创造出一种流畅的视觉体验。效果十分吸引眼球，尤其在切换不同场景时表现出色

实现思路

整体的场景切换脚本可以看之前的文章，这里就不再展开了，本次过渡效果作为其中的一个拓展，核心是下面这个 transition 函数，基于位置和颜色进行渐变插值

vec4 getFromColor(vec2 uv) {
  return texture(texture, uv);
}
vec4 getToColor(vec2 uv) {
  return texture(texture2, uv);
}
vec4 transition(vec2 p) {
  vec4 ca = getFromColor(p);
  vec4 cb = getToColor(p);

  vec2 oa = (((ca.rg + ca.b) * 0.5) * 2.0 - 1.0);
  vec2 ob = (((cb.rg + cb.b) * 0.5) * 2.0 - 1.0);
  vec2 oc = mix(oa, ob, 0.5) * strength;

  float w0 = progress;
  float w1 = 1.0 - progress;
  return mix(getFromColor(p + oc * w0), getToColor(p - oc * w1), progress);
}

代码解读可以分两部分来看，首先看颜色插值部分

vec2 oa = (((ca.rg + ca.b) * 0.5) * 2.0 - 1.0);
  vec2 ob = (((cb.rg + cb.b) * 0.5) * 2.0 - 1.0);
  vec2 oc = mix(oa, ob, 0.5) * strength;

其中 ca.rg + ca.b 将红绿通道的和与蓝通道相加，并取其平均值（乘以 0.5），然后通过乘以 2.0，再减去 1.0，将这个结果转化为范围在 [-1.0, 1.0] 的偏移向量

oa 和 ob 分别是起始颜色和目标颜色的偏移向量，使用红、绿、蓝通道来生成二维的偏移量

然后通过 mix(oa, ob, 0.5) 进行线性插值，计算起始颜色和目标颜色之间的过渡向量，0.5 表示在起始和目标之间取中点，最后乘以 strength，这个参数控制偏移的强度，影响过渡效果的扭曲程度

float w0 = progress;
  float w1 = 1.0 - progress;
  return mix(getFromColor(p + oc * w0), getToColor(p - oc * w1), progress);

进度控制部分，progress 是用于控制场景切换进度的参数，当 progress = 0 时，显示起始场景，当 progress = 1 时，显示目标场景，其取值在 [0, 1] 范围内

最后使用 mix 函数根据 progress 对起始和目标颜色进行插值，p + oc * w0 和 p - oc * w1 调整了起始和目标的坐标偏移，制造了空间上的扭曲效果

效果预览

源码获取请点击查看原文，长按二维码查看效果👇

长按预览效果

更

多

精

彩

融球效果(shader)    颜色滤镜    水波扩散效果(shader)

镜面光泽效果    圆形头像（shader）    追光效果

shader 溶解效果    富文本打字机效果    放大镜效果

子弹跟踪效果    移动残影效果    刮刮卡实现

微信小游戏首包超出4M之后      设计稿生成游戏界面

GameJam线下48小时极限游戏开发体验  

马赛克效果(shader)