Show half portion of image side by side - OpenGL

Question

I have created two textures for two images. Now I want to show this textures in opengl in an order that left part of image2, full image1, right part of image2. I have done like below. Image1 shows at the center of opengl screen. But left and right part of screen is not correct (which should show left part of image2 and right part of image2 respectively)

Vertex shader:

attribute vec3 a_position;
varying vec2 vTexCoord;
void main() {
    vTexCoord = (a_position.xy + 1) / 2;
    gl_Position = vec4(a_position,1);
}

Fragment shader:

precision highp float;
uniform sampler2D sTexture;//texture for image 1
uniform sampler2D sTexture1;//texture for image 2
varying vec2 vTexCoord;

void main () {
    if ( vTexCoord.x<=0.25 )
        gl_FragColor = texture2D (sTexture1, vec2(vTexCoord.x/2.0, vTexCoord.y));
    else if ( vTexCoord.x>0.25 && vTexCoord.x<0.75 )
        gl_FragColor = texture2D (sTexture, vec2(vTexCoord.x*2.0, vTexCoord.y));
    else if(vTexCoord.x>=0.75 )
        gl_FragColor = texture2D (sTexture1,  vec2(vTexCoord.x*2.0-1.0, vTexCoord.y));
}

Compiling shaders:

void CreateShaders() {
    /***********Vert Shader********************/
    vertShader = GL.CreateShader(ShaderType.VertexShader);
    GL.ShaderSource(vertShader, vertexShaderSource);
    GL.CompileShader(vertShader);

    /***********Frag Shader ****************/
    fragShader = GL.CreateShader(ShaderType.FragmentShader);
    GL.ShaderSource(fragShader, fragmentShaderSource);
    GL.CompileShader(fragShader);
}

Answer 1

I want to show this textures in opengl in an order that left part of image2, full image1, right part of image2

If the texture coordinate is less than 0.25 then you want to show the rang [0, 0.5] of image2. You have to map the x component of the texture coordinate from [0.0, 0.25] to [0, 0.5]:

vec2( vTexCoord.x*2.0, vTexCoord.y );

If the texture coordinate is grater then you want to show the rang [0.5, 1] of image2. You have to map the x component of the texture coordinate from [0.75, 1.0] to [0.5, 1.0]:

vec2( (vTexCoord.x-0.75)*2.0 + 0.5, vTexCoord.y );

or

vec2( vTexCoord.x*2.0 - 1.0, vTexCoord.y );

If the texture coordinate is grater than 0.25 and less than 0.75 then you want to show the full range of image1. You have to map the x component of the texture coordinate from [0.25, 0.75] to [0.0, 1.0]:

vec2( vTexCoord.x*2.0 - 0.5, vTexCoord.y );

The shader code my look like this

precision highp float;
uniform sampler2D sTexture;//texture for image 1
uniform sampler2D sTexture1;//texture for image 2
varying vec2 vTexCoord;

void main ()
{
    float u = vTexCoord.x*2.0;
    float a = 0.0; 
    if( vTexCoord.x > 0.75 )
    {
       u -= 1.0;
    }
    else if ( vTexCoord.x >= 0.25 )
    { 
       u -= 0.5;
       a  = 1.0;
    }

    vec4 color1 = texture2D(sTexture1, vec2(u, texCoord.y));
    vec4 color2 = texture2D(sTexture,  vec2(u, texCoord.y));

    gl_FragColor = mix(color2, color1, a);
}

---

Extension to the answer:

if I want to show only a portion of right image,for example (0.6,0.8).

You want to map [0.75, 1.0] to [0.6, 0.8]:

1. [0.75, 1.0] to [0, 1]: u' = (u-0.75)/0.25

2. [0, 1] to [0.6, 0.8]: u'' = u'*0.2+0.6

This leads to:

u = (vTexCoord.x-0.75)*0.2/0.25 + 0.6;

when mapping [0.75, 1.0] to [0.6, 0.8] i wish to display the remain portion of [0.75, 1.0] with black/white color. when using (vTexCoord.x-0.75)*0.2/0.25 + 0.6 image with portion [.6,.8] is filled in [0.75, 1.0]

You have to convert the RGB color to grayscal. I recommend to use the a formula for Relative luminance:

float grayscale = dot(color1, vec3(0.2126, 0.7152, 0.0722));
color1.rgb      = vec3(grayscale);