13

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] フィルターを実装したいと思います。これにより、はるかに優れた結果が得られるはずですが、WebGL に非常に慣れていないため、GLSL を使用してアルゴリズムを実装する方法を理解できないようです。 GLSL全般。

誰かが私を正しい方向に向けることができますか?

前もって感謝します。

4

1 に答える 1

22

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;
 }

これは 2 つのパスで適用されます。1 つ目は水平方向のダウンサンプリングを実行し、2 つ目は垂直方向のダウンサンプリングを実行します。texelWidthOffsetとuniforms は交互に 0.0 に設定され、画像内の単一ピクセルのtexelHeightOffset幅の割合または高さの割合が設定されます。

頂点シェーダーでテクセル オフセットを厳密に計算するのは、これでターゲットにしているモバイル デバイスで依存するテクスチャーの読み取りを回避し、そこでのパフォーマンスが大幅に向上するためです。ただし、少し冗長です。

このランチョス リサンプリングの結果:

ランチョス

通常のバイリニア ダウンサンプリング:

バイリニア

最近傍ダウンサンプリング:

最近隣

于 2013-01-16T21:26:18.343 に答える