unity shader 趣味效果（2）--图形的旋转

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

一、坐标变换

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

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

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

float CalculateAngle(float2 v1,float2 v2){
	float magnitude1=sqrt(v1.x*v1.x+v1.y*v1.y);
	float magnitude2=sqrt(v2.x*v2.x+v2.y*v2.y);
	float cosValue=dot(v1,v2)/(magnitude1*magnitude2);
	float finalAngle=acos(cosValue);
	finalAngle=degrees(finalAngle);

	float3 dir=cross(float3(v1,0),float3(v2,0));
	if(dir.z>=0){
		return finalAngle;
	}else{
		return 360-finalAngle;
	}
}

 

二、图像旋转

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

计算旋转之前的uv坐标：

float2 CalculateRotateOriginUV(float2 uv,float2 center,float angle) {
	float uvToAxisXAngle = CalculateAngle(float2(1,0),uv - center);
	float angle1 = radians(angle + uvToAxisXAngle);
	float magnitude = distance(uv,center);
	float magnitudeX = magnitude * cos(angle1);
	float magnitudeY = magnitude * sin(angle1);

	return float2(center.x + magnitudeX,center.y + magnitudeY);
}

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

 

三、总结

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