SORU
29 NİSAN 2011, Cuma


Örnek OpenGL görüntü işleme görevleri gerçekleştirmek 2.0 gölgeleme ES bulabilirim?

Aşağıdaki görüntü işleme görevleri gerçekleştirmek 2.0 gölgeleme OpenGL ES bulabilirim?

  • Dönüşüm ( RGB/Adobe RGB/HSL/Lab) alınmış
  • Görüntü dönen
  • Bir kroki dönüştürmek
  • Resim dönüştürme

CEVAP
22 ŞUBAT 2012, ÇARŞAMBA


Ben sadece seni tarif üç gerçekleştiren GPUImage framework açık kaynak (dönen, sketch filtresi, ve yağı bir resim dönüştürme) için filtreler eklendi. Henüz alınmış süzgeç gibi dönüşümler yok iken, bir matris renk dönüşümü uygulamak için yeteneği var.

Eylem Bu filtreler örnek olarak, burada sepya tonu bir renk dönüştürme:

Sepia tone image

girdap bir bozulma:

Swirl distortion image

eskiz filtresi:

Sketch filter

ve son olarak, yağlı boya resim dönüştürme:

Oil painting conversion

Bu filtreler tüm canlı video kareleri üzerinde yapıldı unutmayın, ve tüm ama son filtre iOS cihaz kamerası görüntüleri üzerinde gerçek zamanlı olarak çalıştırılabilir. Son filtre açısından yoğun güzel, hatta bir gölgelendirici olarak bir iPad 2 üzerinde işlemek için ~1 ya da öylesine saniye sürer.

Sepya tonu filtresini aşağıdaki renk matris parça shader dayanır:

 varying highp vec2 textureCoordinate;

 uniform sampler2D inputImageTexture;

 uniform lowp mat4 colorMatrix;
 uniform lowp float intensity;

 void main()
 {
     lowp vec4 textureColor = texture2D(inputImageTexture, textureCoordinate);
     lowp vec4 outputColor = textureColor * colorMatrix;

     gl_FragColor = (intensity * outputColor)   ((1.0 - intensity) * textureColor);
 }

bir matris ile

self.colorMatrix = (GPUMatrix4x4){
        {0.3588, 0.7044, 0.1368, 0},
        {0.2990, 0.5870, 0.1140, 0},
        {0.2392, 0.4696, 0.0912 ,0},
        {0,0,0,0},
    };

Girdap parça gölgelendirici this Geeks 3D example dayanmaktadır ve aşağıdaki kodu vardır:

 varying highp vec2 textureCoordinate;

 uniform sampler2D inputImageTexture;

 uniform highp vec2 center;
 uniform highp float radius;
 uniform highp float angle;

 void main()
 {
     highp vec2 textureCoordinateToUse = textureCoordinate;
     highp float dist = distance(center, textureCoordinate);
     textureCoordinateToUse -= center;
     if (dist < radius)
     {
         highp float percent = (radius - dist) / radius;
         highp float theta = percent * percent * angle * 8.0;
         highp float s = sin(theta);
         highp float c = cos(theta);
         textureCoordinateToUse = vec2(dot(textureCoordinateToUse, vec2(c, -s)), dot(textureCoordinateToUse, vec2(s, c)));
     }
     textureCoordinateToUse  = center;

     gl_FragColor = texture2D(inputImageTexture, textureCoordinateToUse );

 }

Eskiz filtre Sobel kenar algılama kullanarak, kenarları gri tonlarında gösterildiği ile oluşturulur. Bu shader aşağıdaki gibidir:

 varying highp vec2 textureCoordinate;

 uniform sampler2D inputImageTexture;

 uniform mediump float intensity;
 uniform mediump float imageWidthFactor; 
 uniform mediump float imageHeightFactor; 

 const mediump vec3 W = vec3(0.2125, 0.7154, 0.0721);

 void main()
 {
    mediump vec3 textureColor = texture2D(inputImageTexture, textureCoordinate).rgb;

    mediump vec2 stp0 = vec2(1.0 / imageWidthFactor, 0.0);
    mediump vec2 st0p = vec2(0.0, 1.0 / imageHeightFactor);
    mediump vec2 stpp = vec2(1.0 / imageWidthFactor, 1.0 / imageHeightFactor);
    mediump vec2 stpm = vec2(1.0 / imageWidthFactor, -1.0 / imageHeightFactor);

    mediump float i00   = dot( textureColor, W);
    mediump float im1m1 = dot( texture2D(inputImageTexture, textureCoordinate - stpp).rgb, W);
    mediump float ip1p1 = dot( texture2D(inputImageTexture, textureCoordinate   stpp).rgb, W);
    mediump float im1p1 = dot( texture2D(inputImageTexture, textureCoordinate - stpm).rgb, W);
    mediump float ip1m1 = dot( texture2D(inputImageTexture, textureCoordinate   stpm).rgb, W);
    mediump float im10 = dot( texture2D(inputImageTexture, textureCoordinate - stp0).rgb, W);
    mediump float ip10 = dot( texture2D(inputImageTexture, textureCoordinate   stp0).rgb, W);
    mediump float i0m1 = dot( texture2D(inputImageTexture, textureCoordinate - st0p).rgb, W);
    mediump float i0p1 = dot( texture2D(inputImageTexture, textureCoordinate   st0p).rgb, W);
    mediump float h = -im1p1 - 2.0 * i0p1 - ip1p1   im1m1   2.0 * i0m1   ip1m1;
    mediump float v = -im1m1 - 2.0 * im10 - im1p1   ip1m1   2.0 * ip10   ip1p1;

    mediump float mag = 1.0 - length(vec2(h, v));
    mediump vec3 target = vec3(mag);

    gl_FragColor = vec4(mix(textureColor, target, intensity), 1.0);
 }

Son olarak, yağlı boya Kuwahara filtre kullanarak oluşturulur bak. Bu özel filtre makalesinde "Anisotropic Kuwahara" GPU Pro book içinde. GPU üzerinde Filtreleme açıklandığı gibi Jan Eric Kyprianidis ve yoldaşı araştırmacılar üstün işi, Bundan GeForce kodu aşağıdaki gibidir

 varying highp vec2 textureCoordinate;
 uniform sampler2D inputImageTexture;
 uniform int radius;

 precision highp float;

 const vec2 src_size = vec2 (768.0, 1024.0);

 void main (void) 
 {
    vec2 uv = textureCoordinate;
    float n = float((radius   1) * (radius   1));

    vec3 m[4];
    vec3 s[4];
    for (int k = 0; k < 4;   k) {
        m[k] = vec3(0.0);
        s[k] = vec3(0.0);
    }

    for (int j = -radius; j <= 0;   j)  {
        for (int i = -radius; i <= 0;   i)  {
            vec3 c = texture2D(inputImageTexture, uv   vec2(i,j) / src_size).rgb;
            m[0]  = c;
            s[0]  = c * c;
        }
    }

    for (int j = -radius; j <= 0;   j)  {
        for (int i = 0; i <= radius;   i)  {
            vec3 c = texture2D(inputImageTexture, uv   vec2(i,j) / src_size).rgb;
            m[1]  = c;
            s[1]  = c * c;
        }
    }

    for (int j = 0; j <= radius;   j)  {
        for (int i = 0; i <= radius;   i)  {
            vec3 c = texture2D(inputImageTexture, uv   vec2(i,j) / src_size).rgb;
            m[2]  = c;
            s[2]  = c * c;
        }
    }

    for (int j = 0; j <= radius;   j)  {
        for (int i = -radius; i <= 0;   i)  {
            vec3 c = texture2D(inputImageTexture, uv   vec2(i,j) / src_size).rgb;
            m[3]  = c;
            s[3]  = c * c;
        }
    }


    float min_sigma2 = 1e 2;
    for (int k = 0; k < 4;   k) {
        m[k] /= n;
        s[k] = abs(s[k] / n - m[k] * m[k]);

        float sigma2 = s[k].r   s[k].g   s[k].b;
        if (sigma2 < min_sigma2) {
            min_sigma2 = sigma2;
            gl_FragColor = vec4(m[k], 1.0);
        }
    }
 }

Yine, bu tüm dahili filtreleri içinde GPUImage, bırak bu çerçeve içine uygulama ve kullanmaya başlayın onlara resim, video ve filmler kalmadan dokunmatik herhangi bir OpenGL ES. Çerçeve için tüm kod olsa iyi olur, yoksa tweak nasıl görmek isterseniz BSD Lisansı altında kullanılabilir.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Joe DiFeo

    Joe DiFeo

    7 AĞUSTOS 2012
  • UsherVEVO

    UsherVEVO

    15 EKİM 2009
  • Video-Tutorials.Net

    Video-Tutori

    15 Mart 2011