如何改进此WebGL / GLSL图像下采样着色器 [英] How can I improve this WebGL / GLSL image downsampling shader
问题描述
我正在使用WebGL在我正在处理的应用程序中快速调整客户端图像。我编写了一个GLSL着色器，对我正在缩小尺寸的图像执行简单的双线性过滤。
I am using WebGL to resize images clientside very quickly within an app I am working on. I have written a GLSL shader that performs simple bilinear filtering on the images that I am downsizing.
它在大多数情况下工作正常，但有很多情况下调整大小是巨大的例如从2048x2048图像到110x110，以生成缩略图。在这些情况下，质量很差，而且太模糊了。
It works fine for the most part but there are many occasions where the resize is huge e.g. from a 2048x2048 image down to 110x110 in order to generate a thumbnail. In these instances the quality is poor and far too blurry.
我目前的GLSL着色器如下：
My current GLSL shader is as follows:
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 /纹理宽度）和高度......
TexelsizeX and TexelsizeY are simply (1.0 / texture width) and height respectively...
我想实现更高质量的过滤技术，理想情况下是一个[Lancosz] [1]过滤器，它应该会产生更好的结果，但我似乎无法理解如何实现使用GLSL的算法，因为我对WebGL和GLSL一般都是新手。
I would like to implement a higher quality filtering technique, ideally a [Lancosz][1] filter which should produce far better results but I cannot seem to get my head around how to implement the algorithm with GLSL as I am very new to WebGL and GLSL in general.
有人能指出我正确的方向吗？
Could anybody point me in the right direction?
提前致谢。
推荐答案
如果您正在寻找Lanczos重采样，以下是我使用的着色器程序在我的开源GPUImage库中：
If you're looking for Lanczos resampling, the following is the shader program I use in my open source GPUImage library:
顶点着色器：
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;
}
这是两次通过，第一次执行水平下采样，第二个垂直下采样。 texelWidthOffset 和 texelHeightOffset 制服交替设置为0.0，并且图像中单个像素的宽度分数或高度分数。
This is applied in two passes, with the first performing a horizontal downsampling and the second a vertical downsampling. The texelWidthOffset and texelHeightOffset uniforms are alternately set to 0.0 and the width fraction or height fraction of a single pixel in the image.
我很难计算顶点着色器中的纹素偏移量，因为这样可以避免我用这个目标定位的移动设备上的相关纹理读取，从而在那里获得明显更好的性能。但它有点冗长。
I hard-calculate the texel offsets in the vertex shader because this avoids dependent texture reads on the mobile devices I'm targeting with this, leading to significantly better performance there. It is a little verbose, though.
此Lanczos重新取样的结果：
Results from this Lanczos resampling:
普通双线性下采样：
最近邻下采样：
这篇关于如何改进此WebGL / GLSL图像下采样着色器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
