unityshader趣味效果（2）图形的旋转

本章内容是继上篇unity shader 趣味效果 (1) --图形图像的平移和缩放继续进行完善和补充。

一、坐标变换

旋转变换是根据旋转角度(angle)和旋转中心(center)来计算某个像素点旋转之后的坐标。例如一个像素点&＃xff08;x1,y1&＃xff09;&＃xff0c;旋转中心(center.x,center.y)&＃xff0c;旋转角度逆时针angle&＃xff0c;那么我们可以先计算出该像素点与x轴正方向所成的角度&＃xff0c;假如为angle1&＃xff0c;那么旋转之后的角度就是angle1&＃43;angle&＃xff0c;那么旋转之后的uv坐标就可以计算出来了&＃xff0c;先计算像素点和旋转中心的距离&＃xff0c;设为L&＃xff0c;那么旋转之后的像素坐标就是(x2,y2)&＃xff0c;其中x2&＃61;center.x&＃43;L*cos(angle1&＃43;angle);y2&＃61;center.y&＃43;L*sin(angle1&＃43;angle);

那么如何计算像素点与x轴正方向所成的角度&＃xff0c;这个要特别注意&＃xff0c;不能简单地用向量点乘公式来计算&＃xff0c;为什么呢&＃xff1f;

解释一下&＃xff1a;因为点乘公式所计算出的角度是在0-180之间的&＃xff0c;如果我们计算了一个角度30度&＃xff0c;那么这个像素点是在x轴上方的那个30度还是下方的那个30度呢&＃xff0c;所以我们必须计算出一个与x轴正方向夹角为0-360之间的数据&＃xff0c;也就是从x轴正方向开始&＃xff0c;逆时针计算&＃xff0c;这样的话就可以区分&＃43;30和-30了&＃xff0c;这里就要用到向量的叉乘公式里的右手定则来判断方向了。具体代码如下&＃xff1a;

float CalculateAngle(float2 v1,float2 v2){float magnitude1&＃61;sqrt(v1.x*v1.x&＃43;v1.y*v1.y);float magnitude2&＃61;sqrt(v2.x*v2.x&＃43;v2.y*v2.y);float cosValue&＃61;dot(v1,v2)/(magnitude1*magnitude2);float finalAngle&＃61;acos(cosValue);finalAngle&＃61;degrees(finalAngle);float3 dir&＃61;cross(float3(v1,0),float3(v2,0));if(dir.z>&＃61;0){return finalAngle;}else{return 360-finalAngle;}
}

二、图像旋转

如果我们能够计算出旋转后的uv坐标&＃xff0c;那么如何对图像进行旋转变换呢。这里用一个映射的思路给大家讲一下&＃xff0c;比如一个像素点(x1,y1)&＃xff0c;那么它一定可以找到自己旋转之前的那个像素坐标(x2,y2)&＃xff0c;所以如果我们计算出它旋转之前的uv坐标&＃xff0c;然后判断这个坐标是否在图像上&＃xff0c;那么这个问题就转化为上一篇博客所解决的问题了&＃xff0c;所以我们主要的任务就是要计算出(x1,y1)所对应的(x2,y2)是否在原像素点上&＃xff0c;如果在&＃xff0c;那么就对(x1,y1)这个像素点进行相应图像颜色的填充即可。

计算旋转之前的uv坐标&＃xff1a;

float2 CalculateRotateOriginUV(float2 uv,float2 center,float angle) {float uvToAxisXAngle &＃61; CalculateAngle(float2(1,0),uv - center);float angle1 &＃61; radians(angle &＃43; uvToAxisXAngle);float magnitude &＃61; distance(uv,center);float magnitudeX &＃61; magnitude * cos(angle1);float magnitudeY &＃61; magnitude * sin(angle1);return float2(center.x &＃43; magnitudeX,center.y &＃43; magnitudeY);
}

然后对(x2,y2)做出判断即可&＃xff0c;上一文章已经介绍过。

三、总结

前两篇文章讲述的都是关于图像的一些操作&＃xff0c;接下来将会对图像进行一些变换&＃xff0c;图像的变换自由度更高&＃xff0c;大家可以根据自己的想法做出很多有趣的效果。