OpenGL ES 2.0 - how to draw only part of texture with shaders?

Question

I convert png to textures on java side and draw them on custom positions on the screen in 2D surface. In my case is point 0,0 top-left corner of screen. Bottom-right corner is for example 1024x768. Now I want implement something like ImageView with scrolling effect. This means during scroll will be some textures visible only partially. For example top textures (top items) will miss top part and bottom textures (bottom items) will miss bottom part.

I use standard vertex and fragment shaders:

precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D s_texture;

void main() 
{
    gl_FragColor = texture2D( s_texture, v_texCoord );
} 
//------------
uniform mat4 uMVPMatrix;
attribute vec4 vPosition;
attribute vec2 a_texCoord;
varying vec2 v_texCoord;

void main() 
{
    gl_Position = uMVPMatrix * vPosition;
    v_texCoord = a_texCoord;
}

Let say my ImageView is slightly scrolled and I see only 70% of height of top items textures? First 30% should be invisible. How can I modify vertex or fragment shader?

I use opengl ES 2.0

Thank you

solidpixel solidpixel · Accepted Answer · 2016-12-01T18:41:43

Two ways to implement this:

(1) Have an oversized rectangle which represents the entire texture, and change the gl_Position emitted from the vertex shader to provide the scroll. Think of physically moving the rectangle up and down in 3D space, and you'll get the idea.

The region between -1 and +1 coordinates in clip-space (the output from the vertex shader) is visible. E.g. if you wanted the middle 50% of the texture to visible and fill the whole screen (chopping off the top and bottom 25%) then you would emit the texture quad with coordinates +2 to -2. The parts outside of the visible clip-space (+1 -> +2, and -2 -> -1) will simply be clipped off.

(2) Keep the rectangle the same size on screen, and change the texture coordinates v_texCoord, emitted by the vertex shader. In this case you want to reduce the values to provide the drop. Coordinates between 0.0 to 1.0 represent the whole texture, so if you want to cut off the top 30% you want to use (0.3 to 1.0) or (0.0 to 0.7) depending on your definition of "top".

OpenGL ES 2.0 - how to draw only part of texture with shaders?

1 Answers