Javascript 如何改进此WebGL/GLSL图像下采样着色器

我正在使用WebGL在我正在使用的应用程序中快速调整图像客户端的大小。我已经编写了一个GLSL着色器，它可以对正在缩小的图像执行简单的双线性过滤

它在大多数情况下都可以正常工作，但在许多情况下，调整大小非常大，例如从2048x2048图像向下调整到110x110，以便生成缩略图。在这些情况下，质量很差，而且过于模糊

我当前的GLSL着色器如下所示：

uniform float textureSizeWidth;\
uniform float textureSizeHeight;\
uniform float texelSizeX;\
uniform float texelSizeY;\
varying mediump vec2 texCoord;\
uniform sampler2D texture;\
\
vec4 tex2DBiLinear( sampler2D textureSampler_i, vec2 texCoord_i )\
{\
    vec4 p0q0 = texture2D(textureSampler_i, texCoord_i);\
    vec4 p1q0 = texture2D(textureSampler_i, texCoord_i + vec2(texelSizeX, 0));\
\
    vec4 p0q1 = texture2D(textureSampler_i, texCoord_i + vec2(0, texelSizeY));\
    vec4 p1q1 = texture2D(textureSampler_i, texCoord_i + vec2(texelSizeX , texelSizeY));\
\
    float a = fract( texCoord_i.x * textureSizeWidth );\
\
    vec4 pInterp_q0 = mix( p0q0, p1q0, a );\
    vec4 pInterp_q1 = mix( p0q1, p1q1, a );\
\
    float b = fract( texCoord_i.y * textureSizeHeight );\
    return mix( pInterp_q0, pInterp_q1, b );\
}\
void main() { \
\
    gl_FragColor = tex2DBiLinear(texture,texCoord);\
}');

TexelsizeX和TexelsizeY分别为（1.0/纹理宽度）和高度

我想实现一种更高质量的过滤技术，理想情况下是[Lancosz][1]过滤器，它应该会产生更好的结果，但我似乎无法理解如何使用GLSL实现算法，因为我对WebGL和GLSL一般来说都是新手

有人能给我指一下正确的方向吗

---

提前感谢。

如果您正在寻找Lanczos重采样，以下是我在开源GPUImage库中使用的着色器程序：

顶点着色器：

 attribute vec4 position;
 attribute vec2 inputTextureCoordinate;

 uniform float texelWidthOffset;
 uniform float texelHeightOffset;

 varying vec2 centerTextureCoordinate;
 varying vec2 oneStepLeftTextureCoordinate;
 varying vec2 twoStepsLeftTextureCoordinate;
 varying vec2 threeStepsLeftTextureCoordinate;
 varying vec2 fourStepsLeftTextureCoordinate;
 varying vec2 oneStepRightTextureCoordinate;
 varying vec2 twoStepsRightTextureCoordinate;
 varying vec2 threeStepsRightTextureCoordinate;
 varying vec2 fourStepsRightTextureCoordinate;

 void main()
 {
     gl_Position = position;

     vec2 firstOffset = vec2(texelWidthOffset, texelHeightOffset);
     vec2 secondOffset = vec2(2.0 * texelWidthOffset, 2.0 * texelHeightOffset);
     vec2 thirdOffset = vec2(3.0 * texelWidthOffset, 3.0 * texelHeightOffset);
     vec2 fourthOffset = vec2(4.0 * texelWidthOffset, 4.0 * texelHeightOffset);

     centerTextureCoordinate = inputTextureCoordinate;
     oneStepLeftTextureCoordinate = inputTextureCoordinate - firstOffset;
     twoStepsLeftTextureCoordinate = inputTextureCoordinate - secondOffset;
     threeStepsLeftTextureCoordinate = inputTextureCoordinate - thirdOffset;
     fourStepsLeftTextureCoordinate = inputTextureCoordinate - fourthOffset;
     oneStepRightTextureCoordinate = inputTextureCoordinate + firstOffset;
     twoStepsRightTextureCoordinate = inputTextureCoordinate + secondOffset;
     threeStepsRightTextureCoordinate = inputTextureCoordinate + thirdOffset;
     fourStepsRightTextureCoordinate = inputTextureCoordinate + fourthOffset;
 }

片段着色器：

 precision highp float;

 uniform sampler2D inputImageTexture;

 varying vec2 centerTextureCoordinate;
 varying vec2 oneStepLeftTextureCoordinate;
 varying vec2 twoStepsLeftTextureCoordinate;
 varying vec2 threeStepsLeftTextureCoordinate;
 varying vec2 fourStepsLeftTextureCoordinate;
 varying vec2 oneStepRightTextureCoordinate;
 varying vec2 twoStepsRightTextureCoordinate;
 varying vec2 threeStepsRightTextureCoordinate;
 varying vec2 fourStepsRightTextureCoordinate;

 // sinc(x) * sinc(x/a) = (a * sin(pi * x) * sin(pi * x / a)) / (pi^2 * x^2)
 // Assuming a Lanczos constant of 2.0, and scaling values to max out at x = +/- 1.5

 void main()
 {
     lowp vec4 fragmentColor = texture2D(inputImageTexture, centerTextureCoordinate) * 0.38026;

     fragmentColor += texture2D(inputImageTexture, oneStepLeftTextureCoordinate) * 0.27667;
     fragmentColor += texture2D(inputImageTexture, oneStepRightTextureCoordinate) * 0.27667;

     fragmentColor += texture2D(inputImageTexture, twoStepsLeftTextureCoordinate) * 0.08074;
     fragmentColor += texture2D(inputImageTexture, twoStepsRightTextureCoordinate) * 0.08074;

     fragmentColor += texture2D(inputImageTexture, threeStepsLeftTextureCoordinate) * -0.02612;
     fragmentColor += texture2D(inputImageTexture, threeStepsRightTextureCoordinate) * -0.02612;

     fragmentColor += texture2D(inputImageTexture, fourStepsLeftTextureCoordinate) * -0.02143;
     fragmentColor += texture2D(inputImageTexture, fourStepsRightTextureCoordinate) * -0.02143;

     gl_FragColor = fragmentColor;
 }

这在两个过程中应用，第一个过程执行水平下采样，第二个过程执行垂直下采样。

texelwidthcoffset

和

texelHeightOffset

将交替设置为0.0，并设置图像中单个像素的宽度分数或高度分数

我很难在顶点着色器中计算纹理偏移，因为这样可以避免在我使用此工具瞄准的移动设备上进行依赖纹理读取，从而显著提高性能。不过，这有点冗长

Lanczos重新采样的结果：

正常双线性下采样：

最近邻下采样：

---

一个结构精美的答案。非常感谢。我应该可以从你发布的代码中找到。干杯只是想让你知道，我知道这是完美的工作，结果是美丽的。奇怪的是，为了获得最佳效果，我不得不将texeloffset设置为（1.0/（destinationwidth*3））和（1.0/（destinationheight*3））。我不知道为什么，但使用标准宽度/高度生成的图像非常模糊。不管怎样，现在真是太棒了。非常感谢@戈德尔-很高兴听到。您的意思是需要使用texelWidthOffset=3.0/（像素图像宽度）或texelWidthOffset=1.0/（3.0*（像素图像宽度））？我用texelWidthOffset=1.0/（以像素为单位的图像宽度）和texelHeightOffset=1.0/（以像素为单位的图像高度）生成了上面的图像，但是如果三个因子对你有效，那么就用它吧。我实际上是在全尺寸图像中加载纹理。。。然后使用设置为1.0/（3.0*（调整大小的图像宽度））的texel偏移执行处理。。。最后，实际调整图像的大小。结果是惊人的。我已经根据实际图像大小使用了其他纹理偏移，结果始终取决于源图像分辨率。这样，无论来自何处，质量都是平滑和锐利的。显然，这是在html5画布上，因此使用此方法可能不会转换到其他设备。但出于我的目的，它是完美的。@Vitaly-目前，边是钳制的（当采样超出边时，值会重复）。我注意到图像质量几乎没有降低，但这与权重的动态变化不同。这是对性能的权衡。我在这里预先计算权重的sinc（）值，同样作为保持性能合理的近似值。与简单算法相比，在GPU上计算Trig函数的速度非常慢。