并排显示图像的一半 - OpenGL

Question

我为两个图像创建了两个纹理。现在我想在 opengl 中按图像 2 的左侧部分、完整图像 1、图像 2 的右侧部分的顺序显示此纹理。我做了如下。 Image1 显示在 opengl 屏幕的中央。但是屏幕的左右部分不正确（应该分别显示 image2 的左侧部分和 image2 的右侧部分）

顶点着色器：

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

片段着色器：

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

编译着色器：

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

如果纹理坐标小于0.25那么你想显示范围[0, 0.5] image2。您必须将纹理坐标的 x 分量从 [0.0, 0.25] 映射到 [0, 0.5]:

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

如果纹理坐标更细那么你想显示 image2 的范围 [0.5, 1]。您必须将纹理坐标的 x 分量从 [0.75, 1.0] 映射到 [0.5, 1.0]:

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

或

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

如果纹理坐标大于 0.25 且小于 0.75，那么您希望显示 image1 的整个范围。您必须将纹理坐标的 x 分量从 [0.25, 0.75] 映射到 [0.0, 1.0]:

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

我的着色器代码是这样的

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

答案的扩展：

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

您想将 [0.75, 1.0] 映射到 [0.6, 0.8]:

[0.75, 1.0] 到 [0, 1]: u' = (u-0.75)/0.25
[0, 1] 到 [0.6, 0.8]: u'' = u'*0.2+0.6

这导致：

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]

您必须将 RGB 颜色转换为灰度。我建议使用 Relative luminance:

的公式

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

并排显示图像的一半 - OpenGL

Show half portion of image side by side - OpenGL

c#

opengl

glsl

opentk