从 openGL 控件的顶部和底部切割特定区域时投影不起作用
Projection is not working when cutting particular area from top and bottom of openGL control
在 link 的帮助下,我可以在纹理上应用投影。
现在我想 cut/remove glcontrol 顶部和底部的面积相等,然后需要在剩余区域上应用相同的投影。我试过如下。但如图所示,投影中缺少顶部和底部曲线。
我怎样才能把它带回剩余区域?
precision highp float;
uniform sampler2D sTexture;
varying vec2 vTexCoord;
void main()
{
float img_h_px = 432.0; // height of the image in pixel
float area_h_px = 39.0; // area height in pixel
float w = area_h_px/img_h_px;
if (vTexCoord.y < w || vTexCoord.y > (1.0-w)){
gl_FragColor= vec4(1.0,0.0,1.0,1.0);
}
else
{
vec2 pos = vTexCoord.xy * 2.0 - 1.0;
float b = 0.5;
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 );
}
}
底部和顶部区域的大小(底部和顶部区域的总和),相对于控件的大小是2.0*area_h_px/img_h_px
= 2.0*w
。
控件大小与"visible"面积的比例(h_ratio
)为:
float w = area_h_px/img_h_px;
float h_ratio = 1.0 - 2.0*w;
您必须通过 "visible" 区域和控件大小的比率来缩放纹理查找的 y 坐标,这是 h_ratio
(1.0/h_ratio
) 的倒数:
float v = (pos.y * v_scale / h_ratio) * 0.5 + 0.5;
最终着色器:
precision highp float;
uniform sampler2D sTexture;
varying vec2 vTexCoord;
void main()
{
float img_h_px = 432.0; // height of the image in pixel
float area_h_px = 39.0; // area height in pixel
float w = area_h_px/img_h_px;
float h_ratio = 1.0 - 2.0*w;
vec2 pos = vTexCoord.xy * 2.0 - 1.0;
float b = 0.5;
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 / h_ratio) * 0.5 + 0.5;
vec3 texColor = texture2D(sTexture, vec2(u, v)).rgb;
vec4 color = vec4(texColor.rgb, 1.0);
if (vTexCoord.y < w || vTexCoord.y > (1.0-w))
color = vec4(1.0, 0.0, 1.0, 1.0);
else if (v < 0.0 || v > 1.0)
discard;
gl_FragColor = color;
}
如果要将整个区域染成紫色,则必须设置 color
,而不是 discard
ing 片段:
if (v < 0.0 || v > 1.0)
color = vec4(1.0, 0.0, 1.0, 1.0);
在
precision highp float;
uniform sampler2D sTexture;
varying vec2 vTexCoord;
void main()
{
float img_h_px = 432.0; // height of the image in pixel
float area_h_px = 39.0; // area height in pixel
float w = area_h_px/img_h_px;
if (vTexCoord.y < w || vTexCoord.y > (1.0-w)){
gl_FragColor= vec4(1.0,0.0,1.0,1.0);
}
else
{
vec2 pos = vTexCoord.xy * 2.0 - 1.0;
float b = 0.5;
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 );
}
}
底部和顶部区域的大小(底部和顶部区域的总和),相对于控件的大小是2.0*area_h_px/img_h_px
= 2.0*w
。
控件大小与"visible"面积的比例(h_ratio
)为:
float w = area_h_px/img_h_px;
float h_ratio = 1.0 - 2.0*w;
您必须通过 "visible" 区域和控件大小的比率来缩放纹理查找的 y 坐标,这是 h_ratio
(1.0/h_ratio
) 的倒数:
float v = (pos.y * v_scale / h_ratio) * 0.5 + 0.5;
最终着色器:
precision highp float;
uniform sampler2D sTexture;
varying vec2 vTexCoord;
void main()
{
float img_h_px = 432.0; // height of the image in pixel
float area_h_px = 39.0; // area height in pixel
float w = area_h_px/img_h_px;
float h_ratio = 1.0 - 2.0*w;
vec2 pos = vTexCoord.xy * 2.0 - 1.0;
float b = 0.5;
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 / h_ratio) * 0.5 + 0.5;
vec3 texColor = texture2D(sTexture, vec2(u, v)).rgb;
vec4 color = vec4(texColor.rgb, 1.0);
if (vTexCoord.y < w || vTexCoord.y > (1.0-w))
color = vec4(1.0, 0.0, 1.0, 1.0);
else if (v < 0.0 || v > 1.0)
discard;
gl_FragColor = color;
}
如果要将整个区域染成紫色,则必须设置 color
,而不是 discard
ing 片段:
if (v < 0.0 || v > 1.0)
color = vec4(1.0, 0.0, 1.0, 1.0);