阅读 982

Shader 动画

Shader 动画和 Canvas 动画原理是一样的,通过定时器循环渲染,并改变画布中图形的属性来实现动画。

一些 Shader 编辑器都已经实现好了定时器的功能,同时会传递一些跟时间相关的值给到着色器代码中,如 ShaderToy 中与时间相关的属性是 iTime/iTimeDelta,gl-transition 中与时间相关的属性是 progress。通过将着色器代码中的变量与时间相结合,就可以让动画产生。

一、位移动画

在之前的文章中讲到了坐标的运算,其中加减就是位移:

那常规的位移动画就不说,下面讲些复杂的运动:

1. 圆周运动

st += vec(cos(u_time), sin(u_time)) 就是圆周运动了:

二、旋转

旋转可以通过矩阵来轻松完成:

但你会发现,当我们把矩阵和坐标相乘,得到的确实上面的圆周运动,这是因为旋转坐标在左下角,如果想旋转矩形,则必须把中心点挪到矩形中心,或者换个说法,把矩形中心挪到左下角。

封装好的代码:

mat2 rotate2d(float _angle){
    return mat2(cos(_angle),-sin(_angle),
                sin(_angle),cos(_angle));
}
复制代码

当我们在非正方形的画布中对材质进行旋转的时候,会遇到一个难以避开的问题,就是拉伸问题。举个例子,当画布是矩形时,暴露了旋转时拉伸的问题:

// 部分代码
void main() {
    vec2 st = textureCoordinate;
    float ratio = inputImageTextureSize.x / inputImageTextureSize.y;
    float animationTime = getAnimationTime();
    float easingTime = animationTime;

    float bigRotation = 30./180.*3.14159;
    st = rotateUv(st, bigRotation*easingTime, vec2(.5, .5), 1.);

    gl_FragColor = texture2D(inputImageTexture, st);
}
复制代码

这篇文章也提到了这个问题,之所以会出现这个问题,是因为由于宽高的比例不是 1:1,说明虽然 x 和 y 的坐标都是 0~1,但是它们表示的长度是不一样的,正因为这个长度不一样,导致在旋转的时候,像素点的运动并不符合画布的比例:

而解决方案也比较简单,我们在旋转的时候,对 y 轴进行画布比例的拉伸即可:

void main() {
    vec2 st = textureCoordinate;
    float ratio = inputImageTextureSize.x / inputImageTextureSize.y;
    float animationTime = getAnimationTime();
    float easingTime = animationTime;

    float bigRotation = 30./180.*3.14159;

    st.y *= 1./ratio;
    st = rotateUv(st, bigRotation*easingTime, vec2(.5, .5), 1.);
    st.y *= ratio;

    gl_FragColor = texture2D(inputImageTexture, st);
}
复制代码

三、缩放

缩放就是坐标的乘除运算,同样也可以通过矩形来实现:

同理,如果不对坐标系进行转换,缩放的中心还是在左下角:

两个动画组合一起:

封装好的代码:

mat2 scale(vec2 _scale){
    return mat2(_scale.x,0.0,
                0.0,_scale.y);
}
复制代码

四、正弦运动

正弦余弦是非常优美的动画曲线,我们在讲函数可视化也展示过下面这张图(图片来源于bookofshader):

所以通过这张图你应该知道正弦余弦函数可以做出什么样的效果了,我们来试试:

这是笛卡尔坐标系的运动,假设我们把坐标系变成极坐标系,大家能脑补大概的效果了吗?

假如我想做一个外向扩散的动画,类似雷达那样的效果呢?去掉 sin() 函数即可:

相关链接:

关注下面的标签,发现更多相似文章
评论