Jak mogę poprawić ten WebGL / GLSL image downsampling shader
Używam WebGL do bardzo szybkiej zmiany rozmiaru obrazów w aplikacji, nad którą pracuję. Napisałem shader GLSL, który wykonuje proste filtrowanie dwuliniowe na obrazach, które zmniejszam.
Działa dobrze w większości przypadków, ale jest wiele okazji, w których zmiana rozmiaru jest ogromna, np. z obrazu 2048x2048 do 110x110 w celu wygenerowania miniatury. W takich przypadkach jakość jest słaba i zbyt rozmyta.
Mój obecny shader GLSL jest jak 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 i TexelsizeY są po prostu (1.0 / szerokość tekstury) i wysokość odpowiednio...
Chciałbym zaimplementować technikę filtrowania o wyższej jakości, najlepiej filtr[Lancosz] [1], który powinien dawać o wiele lepsze wyniki, ale wydaje mi się, że nie mogę zrozumieć, jak zaimplementować algorytm z GLSL, ponieważ jestem zupełnie nowy w WebGL i GLSL w ogóle.
Czy ktoś mógłby wskazać mi właściwy kierunek? Z góry dzięki.1 answers
Jeśli szukasz resamplingu Lanczos, poniżej znajduje się program shader, którego używam w mojej bibliotece GPUImage open source:
Vertex shader:
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;
}
Fragment shader:
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;
}
Jest to stosowane w dwóch przebiegach, z pierwszym wykonaniem poziomego próbkowania w dół, a drugi pionowego próbkowania w dół. Uniformy texelWidthOffset
i texelHeightOffset
są ustawiane na przemian na 0,0 oraz ułamek szerokości lub wysokości pojedynczego piksela na obrazie.
I hard-calculate the texel przesunięcia w Vertex shader, ponieważ pozwala to uniknąć zależnych odczytów tekstur na urządzeniach mobilnych, które tym kieruję, co prowadzi do znacznie lepszej wydajności. To trochę gadatliwe.
Wyniki tego Lanczos resamplingu:
Normal bilinear downsampling:
Nearest-neighbor downsampling:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-16 21:26:18