CODEWITHSUNDEEP
iosopengl-esgpuimage
Jatin
Jatin

Reputation: 1708

how to create GPUImage grid effect

I am using GPUimage with xcode developing for iOS plaform.

Trying to take the live video stream and transforming it to 9 tiles a 3x3 grid for example.

I have scaled the video to 0.33 original size and then tried to apply a fragment shader to repeat the scaled video to the other tiles.

But the shader applies only to the scaled video not the whole view.

Here is my shader:

varying highp vec2 textureCoordinate;
uniform sampler2D inputImageTexture;

uniform mediump float range;

void main()
{
    mediump vec2 p = textureCoordinate;


    if (p.x > 0.66) {
        p.x = (p.x-0.66);
    }
    else if (p.x > 0.33) {
        p.x = (p.x-0.33);
    }

    if (p.y > 0.66) {
        p.y = (p.y-0.66);
    }
    else if (p.y > 0.33) {
        p.y = (p.y-0.33);
    }

    lowp vec4 outputColor = texture2D (inputImageTexture, p);
    gl_FragColor = outputColor;
}

any suggestions?

sample image

Upvotes: 2

Views: 600

Answers (2)

learning-ios
learning-ios

Reputation: 61

 // This is necessary for non-power-of-two textures
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

And a video input produces a non-power-of-two texture.

So the scrip used is:

   varying highp vec2 textureCoordinate;
   uniform sampler2D inputImageTexture;

   // num tiles  row x col
   uniform mediump float range;


   void main()
   {
      mediump vec2 p = mod( range * textureCoordinate - vec2( 1.0 ), 1.0 );

      lowp vec4 outputColor = texture2D (inputImageTexture, p);
      gl_FragColor = outputColor;
   }

range represents the number of rows and cols.

Upvotes: 2

Wagner Patriota
Wagner Patriota

Reputation: 5684

Yes, set your texture wrap mode to GL_REPEAT, so you don't need to care about the "clones"!

glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT );
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT );

And your shader should be:

varying highp vec2 textureCoordinate;
uniform sampler2D inputImageTexture;

uniform mediump float range;

void main()
{
    mediump vec2 p = 3.0 * textureCoordinate - vec2( 1.0 );
    lowp vec4 outputColor = texture2D (inputImageTexture, p);
    gl_FragColor = outputColor;
}

If, for some reason you don't wanna use the GL_REPEAT, just repeat the texture by yourself using the mod() function:

mediump vec2 p = mod( 3.0 * textureCoordinate - vec2( 1.0 ), 1.0 );

Upvotes: 0

Related Questions