【Unity3D Shader】学习笔记-UV画图
前言
本篇介绍在片段着色器中进行画图操作，主要使用极坐标的方式。具体极坐标方程就需要花时间去学习了，可以通过其中一两个公式进行详细的研究，这样大部分的曲线图就可以绘制出来了。
一、心形线的方程：r = 1 - asinθ
#define _ScaleSize 0.2 fixed3 heart_1(fixed x, fixed y) { //计算θ角， y和x就是uv坐标（这里有做位移uv - (0.5,0.5)） float theta = atan2(y , x); //通过心形公式计算出每个点(x,y)应该在心形上的r的长度。（_ScaleSize用于进行缩放） float r = (1 - sin(theta))*_ScaleSize; //计算点(x,y)到极点的真实距离。注意这里依然是(0,0)点为极点。上面只是对整个图形进行了平移 float d1 = distance(fixed2(x, y), fixed2(0.0,0.0)); //这里相当于一个if判断 当r大于d1的时候返回1，否则返回0 这就是心形内部的全部点 float c = step(d1, r); // 采用简单绘制验证效果 return fixed3(c, c, c); } fixed4 frag (v2f i) : SV_Target { fixed2 uv = i.uv - 0.5; fixed3 col = heart_1(uv.x, uv.y); fixed4 finalCol = fixed4(col * _MainColor.rgb, 1.0); return finalCol; }
需要将UV坐标当成2维xy坐标，由于(0,0)点在左下角，因此需要进行移动到中心(0.5,0.5)位置。
二、另一个好看点的心形图
这里直接按照上图的公式进行了实现的代码函数。
fixed3 heart_2(fixed x, fixed y) { float o = atan2(y, x); float sin_o = sin(o); float cos_o = cos(o); float l = sin_o * sqrt(abs(cos_o))/(sin_o + 1.4); float r = (l - 2*sin_o + 2) * _ScaleSize; float d1 = length(fixed2(x, y)); float c = step(d1, r); return fixed3(c, c, c); }
三、伯努利双纽线
实现代码如下
fixed3 lemniscate(fixed x, fixed y) { float theta = atan2(y , x); float r = sqrt(4 * cos(2 * theta)) * _ScaleSize; float d1 = distance(fixed2(x, y), fixed2(0.0,0.0)); float c = step(d1, r); return fixed3(c, c, c); }
四、玫瑰线
可以通过修改r计算的参数来得到更多不同叶子数的玫瑰线。
fixed3 rosedosventor(fixed x, fixed y) { float theta = atan2(y , x); // 三叶的r计算 //float r = 4 * sin(3 * theta) * _ScaleSize; // 四叶的r计算-注意增加了绝对值 //float r = abs(4 * sin(2 * theta)) * _ScaleSize; // 四叶的r计算 -注意增加了绝对值 float r = abs(4 * cos(2 * theta)) * _ScaleSize; float d1 = distance(fixed2(x, y), fixed2(0.0,0.0)); float c = step(d1, r); return fixed3(c, c, c); }
更多画图可以根据不同的曲线公式进行编写，有兴趣的同学可以试试下面这个曲线要怎么画。
