并排显示图像的一半-OpenGL [英] Show half portion of image side by side - OpenGL

问题描述

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

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)

顶点着色器:

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

推荐答案

我想在opengl中以 image2 的左侧部分，完整的 image1 ， image2 右侧的顺序显示纹理>

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

如果纹理坐标小于0.25，则要显示 image2 的范围[0，0.5].您必须将纹理坐标的x分量从[0.0，0.25]映射到[0，0.5]:

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

如果纹理坐标是刨丝器，那么您想显示 image2 的范围[0.5，1].您必须将纹理坐标的x分量从[0.75，1.0]映射到[0.5，1.0]:

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

或

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

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

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

着色器代码如下所示

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:

如果我只想显示右图像的一部分，例如(0.6,0.8).

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

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

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

[0，1]至[0.6，0.8]:u'' = u'*0.2+0.6

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

这导致:

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

当将[0.75，1.0]映射到[0.6，0.8]时，我希望用黑白显示[0.75，1.0]的其余部分.使用(vTexCoord.x-0.75)* 0.2/0.25 + 0.6图像时，将[.6，.8]部分填充为[0.75，1.0]

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颜色转换为灰度.我建议对相对亮度使用一个公式:

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

这篇关于并排显示图像的一半-OpenGL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！