shader画圆

前言

shaderToy上的效果很是华丽，但是我们一口吃不了大胖子，只能慢慢来，从简单从基本做起，那么率先出场的是圆！
以下是我们在本文要实现的效果图:

Unity实现

首先我们先在unity中新建一个ImageEffectShader.
然后我们直接修改frag函数如下:

fixed4 frag (v2f i) : SV_Target
{
    return step(length(i.uv),0.3);
}

虽然这张图不是我们想要的效果，但是这个方法可以让我们很轻松的实现画圆。
那么我们先来理解下这个方法，也就是 step(length(i.uv),0.3) 这一句的含义.

length(v)
返回一个向量的模,即sqrt(dot(v,v)).

step(a,x)
如果x小于a则返回0,否则返回1.

在上图中我们是直接返回i.uv(屏幕坐标)的模，然后再与0.3（圆的半径，你可以随意定自己想要的半径）进行比较，如果0.3小于此模，则为0（黑色），否则为1(白色)。

---

那么接下来我们开始修改一些参数来达到我们想要的效果，在修改之前我们先分析一下现在的效果有哪些不对的地方，这样我们才能有针对的去做修改。

1. 圆心的位置不对
2. 圆看起来不完整
3. 圆看起来不是我们想要的正圆
4. 圆的颜色和数量不对

那么接下来我们一个个来修改，第1点和第2点其实是一个问题，就是圆心位置，如果我们把圆放在屏幕中间位置，半径小一些就不会出现不完整了。
好