unity shader 趣味效果（1）--图形图像的平移和放缩

该文章主要是介绍一下如何绘制函数的图像，以及对函数图像进行一些基本的平移，旋转和缩放等操作。

一、绘制函数图像

绘制函数图像其实就是把函数的顶点绘制出来，也就是把所有满足函数方程的像素点用不同于背景的颜色绘制出来。例如我们绘制y=x的图像，其实就是把像素点坐标中x和y相等的那些像素用不同的颜色渲染出来，颜色这里记作LineColor，当然这里的相等需要有个范围，也就是线条需要有一个宽度，这里记作LineWidth。

那么我们在片段着色器内就可以写下判断，

if (i.uv.y<y + lineWidth && i.uv.y>y - lineWidth) {
	return _LineColor;
}

 

注意：这里使用的是2*LineWidth，但是实际眼睛看到的宽度是在y=x的垂直方向上的宽度 ，也就是2*LineWidth*sqrt(2)，所以如果想让线的宽度为2*LineWidth，那么在判断条件里，y的上下阙值必须是LineWidth/abs(cos(angle))，这里的angle是该点的导函数也就是斜率，根据cos和tan的转换公式，如果斜率为slope，那么阙值就是LineWidth*sqrt(1+slope*slope)，这里一定要注意，如果阙值没有随着斜率进行修改的话，那么在曲线的绘制时，会出现线条粗细不均匀的情况。

另外，上下阙值的设置也会对视觉效果有不同的感受，如果下阙值设为0，那么此时函数所展现的就是图像与x轴围成的图形，不同的函数可能会呈现出一些比较有趣的效果，这些将在接下来有所介绍和补充。

 

二、函数图像的平移和缩放变换

函数的平移和缩放是中学所学习的内容，这里主要以三角函数的平移和缩放为例子来进行介绍，如y=sin(x)，x、y轴向缩放参数设为scaleX,scaleY，平移参数设为offsetX，offsetY，那么方程可以写为y=scaleY*sin(scaleX*(x+scaleX))+offsetY;这时候只需要根据这个函数计算出y值，然后对y进行一些判断即可，这里我对判断条件进行了简单的修改

if (i.uv.y<y + lineWidth && i.uv.y>0) {
	return _LineColor;
}

然后对图像进行了适当的平移和缩放操作，效果如下

 

三、图像随时间进行移动

上述三角函数图像如果能随着时间水平移动，就会出现一种很好的效果，这里也很简单，就是在平移参数上加上一个可以用时间来控制的参数，把水平移动的速度记作speedX，那么加上一个参数speedX*_Time.y即可，这里介绍一下_Time.y。unity为我们提供了几个内置的时间变量（float4类型），_Time就是其中之一，想要更多了解的可以去查阅一下。

当图像能够随时间移动形成一个动态的shader时，我们就可以根据自己的需要调出一些我们想要的效果。

 

四、总结

这一文章简单介绍了平移和缩放操作，旋转操作也不算复杂，下一章将会进行介绍。

关于shader的源码，都放在了github上，https://github.com/zhimo1997/ShaderDemo；后续的也会对该内容进行继续补充。