how to create GPUImage grid effect

Question

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?

Answer 1

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