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

Can you please reformat this code so that it's actually readable? — Bartek Banachewicz
What do you mean by "But left and right part of screen is not correct"? You need to provide a full detail on what is going on. "not correct" can be anything from being black, being green, seeing garbage, seeing the wrong texture with correct coordinates, seeing correct texture with wrong coordinates (not the correct part of it)... — Matic Oblak
Also define what is your expected result. Are you expecting to see all 3 images as a whole stacked one next to another or do you want to simply overlay the middle part of image1 with image2? — Matic Oblak

Rabbid76 Rabbid76 · Accepted Answer · 2018-11-22T12:35:08

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]:

[0.75, 1.0] to [0, 1]: u' = (u-0.75)/0.25
[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);

Show half portion of image side by side - OpenGL

1 Answers