我正在使用WebGL在我正在开发的应用程序中快速调整客户端图像的大小.我写了一个GLSL着色器,对我正在缩编的图像执行简单的双线性过滤.
它大部分工作正常,但有很多场合,调整大小是巨大的.从2048×2048图像下降到110×110,以生成缩略图.在这些情况下,质量差,太模糊.
我目前的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,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;
}
这应用于两次通过,首先执行水平下采样,第二次执行垂直下采样. texelWidthOffset和texelHeightOffset均匀性交替设置为0.0,并且图像中单个像素的宽度分数或高度分数.
我很难计算顶点着色器中的纹理像素偏移量,因为这样可以避免在我针对的移动设备上依赖于纹理读取,从而在那里实现更好的性能.这是一个有点冗长的.
兰培斯重采样的结果：
正常双线性下采样：
最邻近的下采样：