写 Shader 转场的几点思考
站长
· 阅读数 51
前言
转场效果在视频编辑工具中最为常见，在两段视频或图像之间增加一个「过渡」的效果，可以让整个过程更佳柔滑自然。常见的转场如渐变过渡、旋转、擦除等（下图为 iMovie 自带转场）：
而且现在很多视频 App 中也自带了影集功能，你可以选择不同的转场来制作出动态影集：
而在 WebGL 实现转场，相比起编辑器有很大的不同，这些不同带来了一些思考：
一、材质切换时机
简单解释下，假设我们的转场效果是从右往左切换（正如动图所示），切换的时机就是每轮动画的结束，对u_Sampler0和u_Sampler1进行重新赋值，每轮动画的第一张图就是上一轮动画的下一张图，这种瞬间的赋值会让整个动画无变化感知，从而实现不同材质的循环，并且不会占用 WebGL 中太多的纹理空间（只需要两个），这种方式也是来自于 Web 端 Slider 的编写经验。
相关代码如下：
// 更换材质
function changeTexture(gl, imgList, count) {
var texture0 = gl.createTexture();
var texture1 = gl.createTexture();
if (!texture0 && !texture1) {
console.log('Failed to create the texture object');
return false;
}
var u_Sampler0 = gl.getUniformLocation(gl.program, 'u_Sampler0');
if (!u_Sampler0) {
console.log('Failed to get the storage location of u_Sampler0');
return false;
}
var u_Sampler1 = gl.getUniformLocation(gl.program, 'u_Sampler1');
if (!u_Sampler1) {
console.log('Failed to get the storage location of u_Sampler1');
return false;
}
loadTexture(gl, texture0, u_Sampler0, imgList[count%imgList.length], 0);
loadTexture(gl, texture1, u_Sampler1, imgList[(count+1)%imgList.length], 1);
}
// 加载材质
function loadTexture(gl, texture, u_Sampler, image, index) {
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1)
gl.activeTexture(gl['TEXTURE'+index])
gl.bindTexture(gl.TEXTURE_2D, texture)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.uniform1i(u_Sampler, index);
return true;
}
二、转场效果切换
很多时候我们会使用不同的转场效果的组合，这里有两种思路：
1. 在 shader 中实现转场的切换
传入一个记录转场次数的变量，在着色器代码中判断第几次，并切换转场
precision mediump float;
varying vec2 uv;
uniform float time; // 变化时间
uniform sampler2D u_Sampler0;
uniform sampler2D u_Sampler1;
uniform float count; // 循环第几次
void main() {
if (count == 1.) {
// 第一次转场
// 播放第一个效果
}
else if (count == 2.) {
// 第二次转场
// 播放第二个效果
}
}
这种方式缺点明显：首先文件不够颗粒化，一个文件存在多个效果；其次逻辑与效果耦合在一起，不便于做不同转场的任意搭配，比如我有1、2、3种转场，如果是独立文件存放，我可以随意调整顺序 123/132/231/213/312/321/1123/....，控制每个转场的播放时长。所以更加推荐第二种方式：
2. 每个转场独立为文件，代码做切换
// transition1.glsl
precision mediump float;
varying vec2 uv;
uniform float time;
uniform sampler2D u_Sampler0;
uniform sampler2D u_Sampler1;
void main() {
// ...
}
// transition2.gls
precision mediump float;
varying vec2 uv;
uniform float time;
uniform sampler2D u_Sampler0;
uniform sampler2D u_Sampler1;
void main() {
// ...
}
然后我们在 JavaScript 中控制转场：
// 在 main() 底部加入这段代码
void main() {
function render() {
var img1 = null;
var img2 = null;
// 每次移出一张图来
if (imgList.length > 2) {
img1 = imgList.shift()
img2 = imgList[0]
} else {
return;
}
// 我随便添加了一个逻辑，在图片还剩三张的时候，切换第二个转场。
// 这里忽略了文件获取过程
if (imgList.length == 3) {
setShader(gl, VSHADER_SOURCE, FSHADER_SOURCE2);
} else {
setShader(gl, VSHADER_SOURCE, FSHADER_SOURCE);
}
// 设置材质
setTexture(gl, img1, img2);
// 下面通过 time 和 timeRange 来确定每个轮播的时间（这里用的是时间戳）
// 并通过 getAnimationTime() 来获取从 0~1 的 progress 时间
var todayTime = (function() {
var d = new Date();
d.setHours(0, 0, 0, 0);
return d.getTime();
})()
var duration = 2000;
var startTime = new Date().getTime() - todayTime;
var timeRange = gl.getUniformLocation(gl.program, 'timeRange');
gl.uniform2f(timeRange, startTime, duration);
var time = gl.getUniformLocation(gl.program, 'time');
gl.uniform1f(time, todayTime);
// 因为调用 setShader 重新设置了 program，所有所有跟 gl.program 相关的变量要重新赋值
var xxx = gl.getUniformLocation(gl.program, 'xxx');
gl.uniform2f(xxx, 750., 1334.);
// 内循环，每次把这轮的转场播放完
var requestId = 0;
(function loop(requestId) {
var curTime = new Date().getTime() - todayTime;
if (curTime <= startTime + duration) {
gl.uniform1f(time, curTime)
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
requestId = requestAnimationFrame(loop.bind(this, requestId))
} else {
cancelAnimationFrame(requestId)
render()
}
})(requestId)
}
render()
}
// 更换材质
function setTexture(gl, img1, img2) {
var texture0 = gl.createTexture();
var texture1 = gl.createTexture();
var inputImageTexture = gl.getUniformLocation(gl.program, 'inputImageTexture');
var inputImageTexture2 = gl.getUniformLocation(gl.program, 'inputImageTexture2');
loadTexture(gl, texture0, inputImageTexture, img1, 0);
loadTexture(gl, texture1, inputImageTexture2, img2, 1);
}
// 切换不同的转场（只需要改变 fshader）
function setShader(gl, vshader, fshader) {
if (!initShaders(gl, vshader, fshader)) {
console.log('Failed to intialize shaders.');
return;
}
}
三、材质过渡方式
转场一般伴随着两张图片的切换，常见的切换方式有两种：
- 两张图像素点的线性插值
mix()，切换比较柔和 - 根据时间来切换，切换比较生硬
1. 线性插值
一般适用于过渡平缓的转场，能明显看到两张图交替的过程：
return mix(texture2D(u_Sampler0, uv), texture2D(u_Sampler1, uv), progress);
2. 根据时间切换
一般适用于转场变化很快的情况下，这种切换肉眼分辨不出来。
if (progress < 0.5) {
gl_FragColor = texture2D(u_Sampler0, uv);
} else {
gl_FragColor = texture2D(u_Sampler1, uv);
}
比如下图第一个转场时根据时间瞬间切换纹理（但是看不出来），后者是通过线性插值渐变：
四、动画速率模拟
基本上所有转场都不会是简单到线性匀速运动，所以这里需要模拟不同的速度曲线。为了还原出更好的转场效果，需要分几步：
1. 获取真实的时间曲线
假设转场由自己设计，那么可以使用一些预设好的曲线，如 这里 提供的：
我们可以直接获取到曲线的贝塞尔公式：
假设转场效果由他人提供，如设计师使用 AE 制作转场效果，那么在 AE 中可以找到相关运动对应的时间变化曲线：
2. 使用速度曲线
拿到曲线之后，接下来当然就是获取其数学公式，带入我们的变量中（progress/time/uv.x 等）。
首先需要明确的是，现实世界中的时间是不会变快或变慢的，也就是说时间永远是匀速运动。只不过当我们在单位时间上施加了公式之后，让结果有了速率上的变化（假如 x 轴的运动是我们的自变量，那么 y 可以作为因变量）。
#ifdef GL_ES
precision mediump float;
#endif
#define PI 3.14159265359
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
float plot(vec2 st, float pct){
return smoothstep( pct-0.01, pct, st.y) -
smoothstep( pct, pct+0.01, st.y);
}
float box(vec2 _st, vec2 _size, float _smoothEdges){
_size = vec2(0.5)-_size*0.5;
vec2 aa = vec2(_smoothEdges*0.5);
vec2 uv = smoothstep(_size,_size+aa,_st);
uv *= smoothstep(_size,_size+aa,vec2(1.0)-_st);
return uv.x*uv.y;
}
void main() {
vec2 st = gl_FragCoord.xy / u_resolution;
vec2 boxst = st + .5;
// 这里用线条绘制出数学公式 y = f(x)
// 自变量是 st.x，因变量是 st.y
float f_x = sin(st.x*PI);
// 这里则计算小正方形每次运动的位置
// 公式跟上面 f(x) 展示的一样，只不过
// 我们的因变量从 st.x 变成了 fract(u_time)
// fract(u_time) 让时间永远从0到1
// 之所以要 *.6 是因为不让运动太快以至于看不清运动速率变化
boxst.y -= sin(fract(u_time*.6)*PI);
boxst.x -= fract(u_time*.6);
// 绘制时间曲线和正方形
float box = box(boxst, vec2(.08,.08), 0.001);
float pct = plot(st, f_x);
vec3 color = pct*vec3(0.0,1.0,0.0)+box;
gl_FragColor = vec4(color,1.0);
}
后面我们只需要替换这里的公式，以st.x或u_time / progress 的时间变量作为自变量，就可以得到相应的运动曲线和动画呈现了，下面我们可以试试其他动画曲线：
// 展示部分代码
float f_x = pow(st.x, 2.);
boxst.y -= pow(fract(u_time*.6), 2.);
boxst.x -= fract(u_time*.6);
float f_x = -(pow((st.x-1.), 2.) -1.);
boxst.y -= -(pow((fract(u_time*.6)-1.), 2.) -1.);
boxst.x -= fract(u_time*.6);
// easeInOutQuint
float f_x = st.x<.5 ? 16.*pow(st.x, 5.) : 1.+16.*(--st.x)*pow(st.x, 4.);
boxst.y -= fract(u_time*.6)<.5 ? 16.*pow(fract(u_time*.6), 5.) : 1.+16.*(fract(u_time*.6)-1.)*pow(fract(u_time*.6)-1., 4.);
boxst.x -= fract(u_time*.6);
// easeInElastic
float f_x = ((.04 -.04/st.x) * sin(25.*st.x) + 1.)*.8;
boxst.y -= ((.04 -.04/fract(u_time*.6)) * sin(25.*fract(u_time*.6)) + 1.)*.8;
boxst.x -= fract(u_time*.6);
// easeOutElastic
float f_x = (.04*st.x /(--st.x)*sin(25.*st.x))+.2;
boxst.y -= (.04*fract(u_time*.6)/(fract(u_time*.6)-1.)*sin(25.*fract(u_time*.6)))+.2;
boxst.x -= fract(u_time*.6);
更多的缓动函数：
EasingFunctions = {
// no easing, no acceleration
linear: function (t) { return t },
// accelerating from zero velocity
easeInQuad: function (t) { return t*t },
// decelerating to zero velocity
easeOutQuad: function (t) { return t*(2-t) },
// acceleration until halfway, then deceleration
easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t },
// accelerating from zero velocity
easeInCubic: function (t) { return t*t*t },
// decelerating to zero velocity
easeOutCubic: function (t) { return (--t)*t*t+1 },
// acceleration until halfway, then deceleration
easeInOutCubic: function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 },
// accelerating from zero velocity
easeInQuart: function (t) { return t*t*t*t },
// decelerating to zero velocity
easeOutQuart: function (t) { return 1-(--t)*t*t*t },
// acceleration until halfway, then deceleration
easeInOutQuart: function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t },
// accelerating from zero velocity
easeInQuint: function (t) { return t*t*t*t*t },
// decelerating to zero velocity
easeOutQuint: function (t) { return 1+(--t)*t*t*t*t },
// acceleration until halfway, then deceleration
easeInOutQuint: function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t },
// elastic bounce effect at the beginning
easeInElastic: function (t) { return (.04 - .04 / t) * sin(25 * t) + 1 },
// elastic bounce effect at the end
easeOutElastic: function (t) { return .04 * t / (--t) * sin(25 * t) },
// elastic bounce effect at the beginning and end
easeInOutElastic: function (t) { return (t -= .5) < 0 ? (.02 + .01 / t) * sin(50 * t) : (.02 - .01 / t) * sin(50 * t) + 1 },
easeIn: function(t){return function(t){return pow(t, t)}},
easeOut: function(t){return function(t){return 1 - abs(pow(t-1, t))}},
easeInSin: function (t) { return 1 + sin(PI / 2 * t - PI / 2)},
easeOutSin : function (t) {return sin(PI / 2 * t)},
easeInOutSin: function (t) {return (1 + sin(PI * t - PI / 2)) / 2 }
}
3. 构造自定义速度曲线
自定义的速度曲线我们可以通过贝塞尔曲线来绘制，如何把我们在 CSS 常用的贝塞尔曲线转成数学公式？这篇文章给了我们思路，通过对其提供的 JavaScript 代码进行改造，得到了以下的 Shader 函数：
float A(float aA1, float aA2) {
return 1.0 - 3.0 * aA2 + 3.0 * aA1;
}
float B(float aA1, float aA2) {
return 3.0 * aA2 - 6.0 * aA1;
}
float C(float aA1) {
return 3.0 * aA1;
}
float GetSlope(float aT, float aA1, float aA2) {
return 3.0 * A(aA1, aA2)*aT*aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
}
float CalcBezier(float aT, float aA1, float aA2) {
return ((A(aA1, aA2)*aT + B(aA1, aA2))*aT + C(aA1))*aT;
}
float GetTForX(float aX, float mX1, float mX2) {
float aGuessT = aX;
for (int i = 0; i < 4; ++i) {
float currentSlope = GetSlope(aGuessT, mX1, mX2);
if (currentSlope == 0.0) return aGuessT;
float currentX = CalcBezier(aGuessT, mX1, mX2) - aX;
aGuessT -= currentX / currentSlope;
}
return aGuessT;
}
float KeySpline(float aX, float mX1, float mY1, float mX2, float mY2) {
if (mX1 == mY1 && mX2 == mY2) return aX; // linear
return CalcBezier(GetTForX(aX, mX1, mX2), mY1, mY2);
}
这段函数应该怎么使用，首先我们通过贝塞尔曲线编辑器得到四个参数，比如这两款工具：bezier-easing-editor 或 cubic-bezier ：
或者
将这四个数字和自变量代入即可得到相应的曲线了，比如我们自己构造了一条曲线：
然后把.1, .96, .89, .17 代入，就能得到我们想要的运动曲线了：
不过当我们传入一些特殊值得时候，如 0.99,0.14,0,0.27 会得到一条奇怪的曲线：
实际上想要的曲线是：
这是因为作者在实现转换到时候并没有考虑到多角度倾斜等情况，经过他的更新后我们得到了更健壮等代码：github.com/gre/bezier-… ，同样的，我再次把它们转换成 Shader 函数：
float sampleValues[11];
const float NEWTON_ITERATIONS = 10.;
const float NEWTON_MIN_SLOPE = 0.001;
const float SUBDIVISION_PRECISION = 0.0000001;
const float SUBDIVISION_MAX_ITERATIONS = 10.;
float A(float aA1, float aA2) {
return 1.0 - 3.0 * aA2 + 3.0 * aA1;
}
float B(float aA1, float aA2) {
return 3.0 * aA2 - 6.0 * aA1;
}
float C(float aA1) {
return 3.0 * aA1;
}
float getSlope(float aT, float aA1, float aA2) {
return 3.0 * A(aA1, aA2)*aT*aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
}
float calcBezier(float aT, float aA1, float aA2) {
return ((A(aA1, aA2)*aT + B(aA1, aA2))*aT + C(aA1))*aT;
}
float newtonRaphsonIterate(float aX, float aGuessT, float mX1, float mX2) {
for (float i = 0.; i < NEWTON_ITERATIONS; ++i) {
float currentSlope = getSlope(aGuessT, mX1, mX2);
if (currentSlope == 0.0) {
return aGuessT;
}
float currentX = calcBezier(aGuessT, mX1, mX2) - aX;
aGuessT -= currentX / currentSlope;
}
return aGuessT;
}
float binarySubdivide(float aX, float aA, float aB, float mX1, float mX2) {
float currentX, currentT;
currentT = aA + (aB - aA) / 2.0;
currentX = calcBezier(currentT, mX1, mX2) - aX;
if (currentX > 0.0) {
aB = currentT;
} else {
aA = currentT;
}
for(float i=0.; i<SUBDIVISION_MAX_ITERATIONS; ++i) {
if (abs(currentX)>SUBDIVISION_PRECISION) {
currentT = aA + (aB - aA) / 2.0;
currentX = calcBezier(currentT, mX1, mX2) - aX;
if (currentX > 0.0) {
aB = currentT;
} else {
aA = currentT;
}
} else {
break;
}
}
return currentT;
}
float GetTForX(float aX, float mX1, float mX2, int kSplineTableSize, float kSampleStepSize) {
float intervalStart = 0.0;
const int lastSample = 10;
int currentSample = 1;
for (int i = 1; i != lastSample; ++i) {
if (sampleValues[i] <= aX) {
currentSample = i;
intervalStart += kSampleStepSize;
}
}
--currentSample;
// Interpolate to provide an initial guess for t
float dist = (aX - sampleValues[9]) / (sampleValues[10] - sampleValues[9]);
float guessForT = intervalStart + dist * kSampleStepSize;
float initialSlope = getSlope(guessForT, mX1, mX2);
if (initialSlope >= NEWTON_MIN_SLOPE) {
return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
} else if (initialSlope == 0.0) {
return guessForT;
} else {
return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
}
}
float KeySpline(float aX, float mX1, float mY1, float mX2, float mY2) {
const int kSplineTableSize = 11;
float kSampleStepSize = 1. / (float(kSplineTableSize) - 1.);
if (!(0. <= mX1 && mX1 <= 1. && 0. <= mX2 && mX2 <= 1.)) {
// bezier x values must be in [0, 1] range
return 0.;
}
if (mX1 == mY1 && mX2 == mY2) return aX; // linear
for (int i = 0; i < kSplineTableSize; ++i) {
sampleValues[i] = calcBezier(float(i)*kSampleStepSize, mX1, mX2);
}
if (aX == 0.) return 0.;
if (aX == 1.) return 1.;
return calcBezier(GetTForX(aX, mX1, mX2, kSplineTableSize, kSampleStepSize), mY1, mY2);
}
终于得到了我们想要的运动曲线了：
有了贝塞尔曲线这个强大的工具，基本可以满足我们对任意动画变化速率的需求了。为我们实现优雅自然的转场效果提供了强大的保障。
下面通过两张动图感受下匀速运动和非匀速运动对转场带来的细微感官差异（第一张图是匀速的，第二张图加了贝塞尔曲线，GIF 会影响最终效果，但能大致感受）：
相关链接：
转载自:https://juejin.cn/post/6844903686037045255