如何在着色器中旋转和平移矩形纹理 [英] how to rotate and translate rectangle texture in shader
本文介绍了如何在着色器中旋转和平移矩形纹理的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试处理碎片着色器中的纹理变换。 窗口分辨率为(640,360),旋转30度,比例为ve2(0.5,0.5)。
precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D s_texture;
mat3 makeTranslation(vec2 t) {
mat3 m = mat3(1.0, 0.0, 0.0, 0.0, 1.0, 0.0, t.x, t.y, 1.0);
return m;
}
mat3 makeRotation( float angleInRadians ){
float c = cos(angleInRadians);
float s = sin(angleInRadians);
mat3 m = mat3(c, -s, 0, s, c, 0, 0, 0, 1);
return m;
}
mat3 makeScale(vec2 s) {
mat3 m = mat3( s.x, 0, 0, 0, s.y, 0, 0, 0, 1);
return m;
}
void main(){
vec2 position = vec2(0.0,0.0);
vec2 scale = vec2(0.5,0.5);
float rotation = 30.0;
float r = rotation/180.0*3.14159;
vec2 size = vec2(640.0,480.0);
mat3 mt = makeTranslation( translation );
mat3 mr = makeRotation( r );
mat3 ms = makeScale( 1.0/scale );
//transform
vec3 newCoord = vec3(v_texCoord.xy,1.0);
newCoord = mt*newCoord;
newCoord = mr*ms*vec3(newCoord.x - 0.5, newCoord.y - 0.5,0.0) + vec3(0.5, 0.5, 0.0);
gl_FragColor = texture2D(s_texture, vec2(newCoord.x, newCoord.y) );
}
因此,我将矩形大小的比例应用于文本代码。y:
//transform
float fy = 0.5*(1.0 - size.y*1.0/size.x);
newCoord.y = (newCoord.y-0.5)*size.y/size.x+fy;
newCoord = mt*newCoord;
"
newCoord = mr*ms*vec3(newCoord.x - 0.5, newCoord.y - 0.5,0.0) + vec3(0.5, 0.5, 0.0);
newCoord.y = (newCoord.y+0.5)*size.x/size.y-fy;
那么,如何才能得到正确的结果? 谢谢。
推荐答案
获取正确的操作顺序非常重要。
当您收到纹理坐标时,它们在范围[0,1]内。但是,在旋转它们之前,您需要平移它们,使它们位于[-0.5,0.5]中,以便围绕纹理中心旋转。然后应用比例,最后应用翻译。
这篇关于如何在着色器中旋转和平移矩形纹理的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文