如何投影OpenGL控件的顶部和底部区域(圆柱投影)?
How to project top and bottom area of OpenGL control (cylindrical projection)?
使用下面的代码我可以在 openGL 控件中显示图像。呈长方形。现在我想将这个矩形的顶部和底部区域投影到圆柱形 shape.I 意味着需要在 openGL 上执行矩形到圆柱形的投影。我怎样才能做到这一点?
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);
}
希望对着色器代码的 vTexCoord 进行一些更改会产生结果。
如果你想在 2d 平面上投影 2D 纹理,就像它是 3D 圆柱体一样,那么你必须在片段着色器中通过 arcus function (asin
or acos
) 转换纹理坐标。
[0, 1] 范围内的纹理坐标必须通过 asin
函数与 [-90°, 90°] 范围内的圆上的角度相关联。这个角度可以线性映射到 [0, 1] 范围内的新纹理坐标。
函数的输入是一个角度,return值是一个距离:
float u = asin( vTexCoord.x*2.0-1.0 ) / 3.141593 + 0.5;
顶点着色器:
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;
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;
}
查看原始代码的结果与使用 asin
映射的代码之间的差异:
在二维平面的投影中,圆柱体的顶部和底部是一个ellipse,可以表示为:
float b = 0.3;
float y = b * sqrt(1.0 - x*x)
纹理的投影必须在顶部和底部进行挤压以形成椭圆形:
float v_scale = (1.0 + b) / (1.0 + y);
float v = (pos.y * v_scale) * 0.5 + 0.5;
必须使用 discard
keyword in the fragment shader:
丢弃被剪裁的区域
if ( v < 0.0 || v > 1.0 )
discard;
看看没有椭圆失真的结果和使用椭圆失真的代码之间的区别:
结合了asin
纹理坐标映射和椭圆变形的片段着色器:
片段着色器:
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 );
}
合并结果:
使用下面的代码我可以在 openGL 控件中显示图像。呈长方形。现在我想将这个矩形的顶部和底部区域投影到圆柱形 shape.I 意味着需要在 openGL 上执行矩形到圆柱形的投影。我怎样才能做到这一点?
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);
}
希望对着色器代码的 vTexCoord 进行一些更改会产生结果。
如果你想在 2d 平面上投影 2D 纹理,就像它是 3D 圆柱体一样,那么你必须在片段着色器中通过 arcus function (asin
or acos
) 转换纹理坐标。
[0, 1] 范围内的纹理坐标必须通过 asin
函数与 [-90°, 90°] 范围内的圆上的角度相关联。这个角度可以线性映射到 [0, 1] 范围内的新纹理坐标。
函数的输入是一个角度,return值是一个距离:
float u = asin( vTexCoord.x*2.0-1.0 ) / 3.141593 + 0.5;
顶点着色器:
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;
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;
}
查看原始代码的结果与使用 asin
映射的代码之间的差异:
在二维平面的投影中,圆柱体的顶部和底部是一个ellipse,可以表示为:
float b = 0.3;
float y = b * sqrt(1.0 - x*x)
纹理的投影必须在顶部和底部进行挤压以形成椭圆形:
float v_scale = (1.0 + b) / (1.0 + y);
float v = (pos.y * v_scale) * 0.5 + 0.5;
必须使用 discard
keyword in the fragment shader:
if ( v < 0.0 || v > 1.0 )
discard;
看看没有椭圆失真的结果和使用椭圆失真的代码之间的区别:
结合了asin
纹理坐标映射和椭圆变形的片段着色器:
片段着色器:
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 );
}
合并结果: