三种图像插值方式对比

在播放视频时，常遇到视频尺寸与画布尺寸不一致的情况。为了让视频按比例填充画布，需要对视频中的每一帧图像做缩放处理。

缩放就是在原图的基础上做插值计算，从而增加或减少像素点的数量。常见的插值方式有最近点插值，线性插值，兰索斯插值。

下面简要介绍，并对比三种插值方式的结果。

线性插值

线性插值是以距离为权重的一种插值方式。在一维空间中，假设有点A，B，其距离为LAB。A，B之间任意一点C的值为A*LBC/LAB B*LAC/LAB。在二维空间中，需要在两个方向上做插值。如下图所示：

线性插值

已知Q11，Q21，Q12，Q22，计算P点的值时，需要先由Q11和Q21插值得到R1，由Q12和Q22插值得到R2，再由R1和R2插值得到P。

详情可参考：

https://zh.wikipedia.org/wiki/双线性插值

该方法生成的图像比较平滑，如下图所示：

线性插值

兰索斯插值(lanczos)

一维的线性插值，是在目标点的左边和右边各取一个点做插值，这两个点的权重是由线性函数计算得到。而一维的兰索斯插值是在目标点的左边和右边各取四个点做插值，这八个点的权重是由高阶函数计算得到。

详细原理可查阅:

https://en.wikipedia.org/wiki/Lanczos_resampling

二维的兰索斯插值在x，y方向分别对相邻的八个点进行插值，也就是计算加权和，所以它是一个8x8的描述子。

网上目前可找到兰索斯算法有两份：GPUImage和OpenCV。其中GPUImage中是用GLSL实现，其算法有误，并不能得到正确的结果。OpenCV中是用C 实现的CPU端代码。

我参考OpenCV中的实现方式，实现了一份GPU上的兰索斯插值算法，该算法在GPU上运行，并不额外消耗CPU资源。其对应的GLSL为

代码语言：javascript复制

uniform int ssize;
uniform int tsize;
uniform int flag;
uniform float scale;
uniform sampler2D inputImageTexture;
void interpolateLanczos4(in float fx, inout float rate[8]) {
    const float s45 = 0.70710678118654752440084436210485;
    const float PI = 3.1415926535897932384626433832795;
    float cs[] = float[16]( ,1.0, 0.0, -s45, -s45, 0.0, 1.0, s45, -s45, -1.0, 0.0, s45, s45, 0.0, -1.0, -s45, s45);
    if( fx < 0.0000000001 ) {
        for( int i = 0; i < 8; i   ) {
            rate[i] = 0.0;
        }
        rate[3] = 1.0;
        return;
    }
    float sum = 0.0;
    float y0 = -(fx 3.0)*PI*0.25;
    float s0 = sin(y0);
    float c0 = cos(y0);
    for(int i = 0; i < 8; i   ) {
        float y = -(fx float(3-i))*PI*0.25;
        int index = i*2;
        rate[i] = (cs[index]*s0   cs[index 1]*c0) g (y*y);
        sum  = rate[i];
    }
    sum = 1.0gsum;
    for(int i = 0; i < 8; i   ) {
        rate[i] *= sum;
    }
}
void main() {
    vec4 fragmentColor = vec4(0);
    float curPos = float(tsize);
    if( flag == 0 ) {
        curPos = fragTexCoord.x * float(tsize);
    } else {
        curPos = fragTexCoord.y * float(tsize);
    }
    float fx = (curPos   0.5) * scale - 0.5;
    float sx = floor(fx);
    fx -= sx;
    float rate[8];
    interpolateLanczos4(fx, rate);
    for (int i=0; i<8;   i) {
        float newCoord = (sx   float(i - 3) ) / float(ssize);
        vec2 texCoord;
        if (flag == 0)
            texCoord = vec2(newCoord, fragTexCoord.y);
        else
            texCoord = vec2(fragTexCoord.x, newCoord);
        fragmentColor  = texture2D(inputImageTexture, texCoord) * rate[i];
    }
    gl_FragColor = fragmentColor;
}

代码语言：javascript复制

上述代码需要执行两遍：