Shader code to show selected part of image - OpenTk

Question

I want to show selected area from second half of an image (This is the range from 0.5 to 1.0) in my glcontrol. For that I have used two variables rightsliderStartval(any value between 0.5 and 1.0) and rightsliderEndval(any value between 1.0 and 0.5). I want exactly the selected area between this rightsliderStartval and rightsliderEndval. When trying like below selected area is getting but it get stretched.

  decimal RateOfResolution = (decimal)videoSource.VideoResolution.FrameSize.Width / (decimal)videoSource.VideoResolution.FrameSize.Height;          
  int openGLwidth = (this._Screenwidth / 3) - 40;  
  int openGLheight = Convert.ToInt32(screenWidthbyThree / RateOfResolution); 
  glControl.Width = openGLwidth;
  glControl.Height = openGLheight;
  GL.Viewport(new Rectangle(0, 0, glControl.Width, glControl.Height));


 public void CreateShaders()
 {
/***********Vert Shader********************/
vertShader = GL.CreateShader(ShaderType.VertexShader);
GL.ShaderSource(vertShader, @"attribute vec3 a_position;
    varying vec2 vTexCoordIn; 

    void main() {
        vTexCoordIn=( a_position.xy+1)/2 ;
        gl_Position = vec4(a_position,1);
    }");
GL.CompileShader(vertShader);

/***********Frag Shader ****************/
fragShader = GL.CreateShader(ShaderType.FragmentShader);
GL.ShaderSource(fragShader, @"precision highp float;

    uniform sampler2D sTexture;
    varying vec2 vTexCoordIn;
    void main ()
    {
        vec2 vTexCoord=vec2(vTexCoordIn.x,vTexCoordIn.y);
        float rightsliderStartval=0.6;//0.5 to 1.0
        float rightsliderEndval=0.8;//1.0 to 0.5
        float rightsliderDelta=rightsliderEndval-rightsliderStartval;

     if (vTexCoordIn.x < 0.5)
     discard;
    float u = mix(rightsliderStartval, rightsliderEndval, (vTexCoordIn.x-0.5) * 2.0);

   vec4 color = texture2D(sTexture, vec2(u, vTexCoordIn.y));
   gl_FragColor = color;


    }");
GL.CompileShader(fragShader);
   }

In Screenshot, White line represent center of image. I Want to show area between yellow and orange line.

Rabbid76 · Accepted Answer · 2019-07-01T11:03:59.480

1

If you want to skip a some parts of the texture, then you can use the discard keyword. This command causes the fragment's output values to be discarded and the fragments are not drawn at all.

If you've a rectangular area and you want to draw only in the 2nd half of the rectangular area, then you've to discard the fragments in the 1st half:

if (vTexCoordIn.x < 0.5)
    discard;

If you want to draw the range from rightsliderStartval to rightsliderEndval in the 2nd half of the rectangular area, then you have to map the rang [0.5, 1.0] incoming texture coordinate vTexCoordIn.x to [rightsliderStartval, rightsliderEndval]:

float w = (vTexCoordIn.x-0.5) * 2.0;                      // [0.5, 1.0] -> [0.0, 1.0]
float u = mix(rightsliderStartval, rightsliderEndval, w); // [0.0, 1.0] -> [0.7, 0.9]

This leads to the fragment shader:

precision highp float;

uniform sampler2D sTexture;
varying vec2 vTexCoordIn;

void main ()
{
    float rightsliderStartval = 0.7;
    float rightsliderEndval   = 0.9;

    if (vTexCoordIn.x < 0.5)
        discard;

    float u = mix(rightsliderStartval, rightsliderEndval, (vTexCoordIn.x-0.5) * 2.0);

    vec4 color = texture2D(sTexture, vec2(u, vTexCoordIn.y));
    gl_FragColor = color;
}

If you don't want that the image is stretched then you've 2 possibilities.

Either discard the region from 0.0 to 0.7 and 0.9 to 1.0:

precision highp float;

uniform sampler2D sTexture;
varying vec2 vTexCoordIn;

void main ()
{
    float rightsliderStartval = 0.7;
    float rightsliderEndval   = 0.9;

    if (vTexCoordIn.x < 0.7 || vTexCoordIn.x > 0.9)
        discard;

    vec4 color = texture2D(sTexture, vTexCoordIn.xy));
    gl_FragColor = color;
}

Or scale the image in the y direction, too:

precision highp float;

uniform sampler2D sTexture;
varying vec2 vTexCoordIn;

void main ()
{
    float rightsliderStartval = 0.7;
    float rightsliderEndval   = 0.9;

    if (vTexCoordIn.x < 0.5)
        discard;

    float u = mix(rightsliderStartval, rightsliderEndval, (vTexCoordIn.x-0.5) * 2.0);

    float v_scale = (rightsliderEndval - rightsliderStartval) / 0.5;
    float v = vTexCoordIn.y * v_scale + (1.0 - v_scale) / 2.0;;

    vec4 color = texture2D(sTexture, vec2(u, v));
    gl_FragColor = color;
}

edited Jul 01 '19 at 11:03

answered Jun 28 '19 at 05:23

Rabbid76

202,892
27
131
174

It is working but area between selected range seems to be stretched. and tried by putting above code in a if loop. if (vTexCoordIn.x <= 1.0 && vTexCoordIn.x > 1.0-(rightsliderDelta*2.0)){} now works better but still have a stretch and zoom effect. pls help – user2431727 Jun 28 '19 at 11:47
@user2431727 Ypu've to be more specific. Do you just want to discard the area at the left and the right? What is the aspect ration of the area in compared to the aspect ration of the image? – Rabbid76 Jun 28 '19 at 11:54
pls check my edited ques. attached what i'm getting when trying with your code. I want the area between yellow and orange line – user2431727 Jun 28 '19 at 12:10
pls check my edited ques. attached what i'm getting when trying with current code(. I want the full area between yellow and orange line – user2431727 Jun 30 '19 at 05:42
@user2431727 I've absolutely no idea what you want to do. I've the feeling every time when I try to answer your question you come around with something completely new. What do you want to show? The second half? This is the range form 0.5 to 1.0. The range from 0.7 to 0.9? Then it will get stretched, but you don't want to get it stretched. Do you want to scale it in both directions (x and y)? What is the size of the rectangle area which is drawn and what should be drawn in this area? It is not possible to answer this question. – Rabbid76 Jun 30 '19 at 08:28
@user2431727 Again i tried to guess what you want to do. See the 3rd part of the answer. – Rabbid76 Jun 30 '19 at 08:38
Extremely sorry to know that the way I asked was unclear. please check my edited question now. . – user2431727 Jul 01 '19 at 04:04
@user2431727 *"When trying like below selected area is getting but it get stretched."* - Yes of course it is streched. You want that the image area from 0.7 to 0.9 fills the right half, but it should not be stretched. How should that work? That is not possible. Should the image be scaled in the y direction too? Or should the range from 0.5 to 0.7 and 0.9 to 1.0 be discarded? – Rabbid76 Jul 01 '19 at 10:55
Or should the range from 0.5 to 0.7 and 0.9 to 1.0 be discarded? - yes . Can I overcome this stretch by resiziing glcontrol ? – user2431727 Jul 01 '19 at 11:03
@user2431727 Yes, you've to scale the the width of the glcontrol: `new_width = int(width * (0.9-0.7)/0.5)` – Rabbid76 Jul 01 '19 at 11:07
Can you please help? https://stackoverflow.com/questions/57033603/apply-projection-on-other-than-discarded-area – user2431727 Jul 15 '19 at 05:21

Shader code to show selected part of image - OpenTk

1 Answers1