diff --git a/doc/SwitchScene__Morph/resource/demo.gif b/doc/SwitchScene__Morph/resource/demo.gif new file mode 100644 index 0000000..8f893a5 Binary files /dev/null and b/doc/SwitchScene__Morph/resource/demo.gif differ diff --git a/doc/SwitchScene__Morph/resource/ewm.png b/doc/SwitchScene__Morph/resource/ewm.png new file mode 100644 index 0000000..99e9557 Binary files /dev/null and b/doc/SwitchScene__Morph/resource/ewm.png differ diff --git a/doc/SwitchScene__Morph/游戏转场效果.md b/doc/SwitchScene__Morph/游戏转场效果.md new file mode 100644 index 0000000..07f3d6f --- /dev/null +++ b/doc/SwitchScene__Morph/游戏转场效果.md @@ -0,0 +1,63 @@ +# 效果演示 + +异名实现了一个基于颜色偏移的场景过渡效果。这种效果利用了起始颜色与目标颜色之间的动态插值,创造出一种流畅的视觉体验。效果十分吸引眼球,尤其在切换不同场景时表现出色 + +![](http://cdn.blog.ifengzp.com/switch-scene/3-min.gif) + +# 实现思路 + +整体的场景切换脚本可以看[之前的文章](https://mp.weixin.qq.com/s/pnek7_P3YQlbnozi-ZNY2Q),这里就不再展开了,本次过渡效果作为其中的一个拓展,核心是下面这个 `transition` 函数,基于位置和颜色进行渐变插值 + +```c++ +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); +} +``` + +代码解读可以分两部分来看,首先看颜色插值部分 + +```c++ + 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`,这个参数控制偏移的强度,影响过渡效果的扭曲程度 + +```c++ + 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` 调整了起始和目标的坐标偏移,制造了空间上的扭曲效果 + +![](http://cdn.blog.ifengzp.com/switch-scene/3-min.gif) + +# 效果预览 + +**源码**获取请点击**查看原文**,长按二维码**查看效果**👇 + +![长按预览效果](http://cdn.blog.ifengzp.com/switch-scene/ewm-3.png) +