Question

我为两个图像创建了两个纹理。现在，我想在opengl中以image2的左侧部分，完整的image1和image2的右侧部分的顺序显示此纹理。我已经做了如下。 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

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

如果纹理坐标小于0.25，则要显示 image2 的范围[0，0.5]。您必须将纹理坐标的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);
}

答案的扩展名：

如果我只想显示右图像的一部分，例如（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;

当将[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]

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

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

并排显示图像的一半-OpenGL

1 个答案: