如何投影OpenGL控件的顶部和底部区域(圆柱投影)? [英] How to project top and bottom area of OpenGL control (cylindrical projection)?

问题描述

使用下面的代码，我可以在 openGL 控件中显示图像.这是长方形的.现在我想将此矩形的顶部和底部区域投影为圆柱形.我的意思是需要在 openGL 上执行矩形到圆柱形的投影.我怎样才能做到这一点?

private void CreateShaders(){/*********垂直着色器********************/vertShader = GL.CreateShader(ShaderType.VertexShader);GL.ShaderSource(vertShader, @"attribute vec3 a_position;改变 vec2 vTexCoord；无效主(){vTexCoord = (a_position.xy + 1)/2;gl_Position = vec4(a_position, 1);}");GL.CompileShader(vertShader);/*********片段着色器****************/fragShader = GL.CreateShader(ShaderType.FragmentShader);GL.ShaderSource(fragShader, @"precision highp float;统一的 sampler2D sTexture；改变 vec2 vTexCoord；无效主(){//vec4 color = texture2D (sTexture, vTexCoord);vec2 x = vTexCoord - vec2(0.5);float r = length(x);//半径浮动 u = r*atan( vTexCoord.x/sqrt(r*r-(vTexCoord.x*vTexCoord.x )));浮动 v = (r*vTexCoord.y)/sqrt(r*r);vec4 颜色 = 纹理 2D(sTexture, vec2(u, v));gl_FragColor = 颜色；}");GL.CompileShader(fragShader);}

希望对着色器代码的 vTexCoord 进行一些更改会产生结果.

解决方案

如果要将 2D 纹理投影到 2D 平面上，就像 3D 圆柱体一样，则必须通过

函数的输入是角度，返回值是距离:

float u = asin( vTexCoord.x*2.0-1.0 )/3.141593 + 0.5;

顶点着色器:

attribute vec3 a_position;改变 vec2 vTexCoord；无效主(){vTexCoord = (a_position.xy + 1)/2;gl_Position = vec4(a_position, 1);}

片段着色器:

precision highp float;统一的 sampler2D sTexture；改变 vec2 vTexCoord；无效主(){浮动 u = asin( vTexCoord.x*2.0-1.0 )/3.141593 + 0.5;浮动 v = vTexCoord.y;vec4 颜色 = 纹理 2D(sTexture, vec2(u, v));gl_FragColor = 颜色；}

查看原始代码的结果与使用asin映射的代码的区别:

---

在到二维平面的投影中，圆柱的顶部和底部是一个

float b = 0.3;浮动 y = b * sqrt(1.0 - x*x)

纹理的投影必须在顶部和底部挤压以形成椭圆形:

float v_scale = (1.0 + b)/(1.0 + y);浮动 v = (pos.y * v_scale) * 0.5 + 0.5;

必须使用

---

结合了asin纹理坐标映射和椭圆失真的片段着色器:

片段着色器:

precision highp float;统一的 sampler2D sTexture；改变 vec2 vTexCoord；无效主(){vec2 pos = vTexCoord.xy * 2.0 - 1.0;浮动 b = 0.3;浮动 v_scale = (1.0 + b)/(1.0 + b * sqrt(1.0 - pos.x*pos.x));浮动 u = asin( pos.x )/3.1415 + 0.5;浮动 v = (pos.y * v_scale) * 0.5 + 0.5;如果( v <0.0 || v > 1.0 )丢弃;vec3 texColor = texture2D(u_texture, vec2(u, v) ).rgb;gl_FragColor = vec4( texColor.rgb, 1.0 );}

综合结果:

Using below code I can display an image in openGL control. Which is in rectangular shape. Now I want to project top and bottom area of this rectangular to a cylindrical shape.I mean need to perform a rectangular to cylidrical projection on openGL. How can I achieve this?

private void CreateShaders()
{
    /***********Vert Shader********************/
    vertShader = GL.CreateShader(ShaderType.VertexShader);
    GL.ShaderSource(vertShader, @"attribute vec3 a_position;
                                varying vec2 vTexCoord;
                                void main() {
                                vTexCoord = (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 vTexCoord;
                         void main ()
                         {
            //  vec4 color  = texture2D (sTexture, vTexCoord);
            vec2 x =vTexCoord - vec2(0.5);
            float r = length(x);//radious
            float u = r*atan( vTexCoord.x/sqrt(r*r-(vTexCoord.x*vTexCoord.x )));
            float v = (r*vTexCoord.y)/sqrt(r*r );
            vec4 color   = texture2D(sTexture, vec2(u, v));
            gl_FragColor = color;
                         }");
    GL.CompileShader(fragShader);
}

Hope making some changes on vTexCoord of shader code will do the result.

解决方案

If you want to project a 2D texture on a 2d plane as it would be a 3D cylinder, then you have to transform the texture coordinate by an arcus function (asin or acos) in the fragment shader.

The texture coordinate in the range [0, 1] have to be associated to an angle on a circle in the range [-90°, 90°] by the asin function. This angle can be linear mapped to the new texture coordinate in the range [0, 1].

The input to the function is an angle and the return value is a distance:

float u = asin( vTexCoord.x*2.0-1.0 ) / 3.141593 + 0.5;

Vertex shader:

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

Fragment shader:

precision highp float;
uniform sampler2D sTexture;
varying vec2 vTexCoord;

void main()
{
    float u = asin( vTexCoord.x*2.0-1.0 ) / 3.141593 + 0.5;
    float v = vTexCoord.y; 

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

See the difference between the result of the original code and the code which uses the asin mapping:

---

In the projection to a 2D plane, the top and bottom of the cylinder is an ellipse, which can be expressed by:

float b = 0.3;
float y = b * sqrt(1.0 - x*x)

The projection of the texture has to be squeezed at the top and the bottom to form an elliptical shape:

float v_scale = (1.0 + b) / (1.0 + y);
float v = (pos.y * v_scale) * 0.5 + 0.5;

The area which is clipped has to be discarded by using the discard keyword in the fragment shader:

if ( v < 0.0 || v > 1.0 )
    discard;

See the difference between the result without the elliptical distortion and the code which uses the elliptical distortion:

---

The fragment shader which combines the asin texture coordinate mapping and the elliptical distortion:

Fragment shader:

precision highp float;
uniform sampler2D sTexture;
varying vec2 vTexCoord;

void main()
{
    vec2  pos     = vTexCoord.xy * 2.0 - 1.0;
    float b       = 0.3;
    float v_scale = (1.0 + b) / (1.0 + b * sqrt(1.0 - pos.x*pos.x));

    float u = asin( pos.x ) / 3.1415 + 0.5;
    float v = (pos.y * v_scale) * 0.5 + 0.5;
    if ( v < 0.0 || v > 1.0 )
        discard;

    vec3 texColor = texture2D( u_texture, vec2(u, v) ).rgb;
    gl_FragColor  = vec4( texColor.rgb, 1.0 );
}

The combined result:

这篇关于如何投影OpenGL控件的顶部和底部区域(圆柱投影)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！