Skip to main content
 首页 » 资源教程 » Unity3D教程

Unity Shader 绘制点、直线、网格等基本图形

2016年12月27日 17:30:1213800蛮牛网

前言

今天我们学习一种简单的使用 Shader在屏幕上绘制几何图形的方法。其中包含了基本的点(或者说是圆形)、直线(任意方向)和网格(横纵交错)的绘制方法。

1、准备工作

建立一个Unity工程,在摄像机前方放置一个Plane,需要填充满摄像机视野,放得正不正都没有关系,填满就行。利用Plane映射到屏幕上的像素坐标作为绘制图形的输入参数。(当然,如果我们使用OnRenderImage()函数,进行RenderTexture的材质修改,也可以实现本文的效果,原理都是一致的,这里我们主要看思路哈)

 Unity Shader 绘制点、直线、网格等基本图形 Unity3D教程 第1张

然后创建一个新的Material,名称随意,默认也可。再创建一个新的任意种类的Shader,取名为Draw。将Draw.shader文件中默认生成的shader代码全部删掉。将下面代码复制到你的Draw.shader文件中。

Unity Shader 绘制点、直线、网格等基本图形 Unity3D教程 第2张

 

将使用该shader的材质赋予Plane,这就完成了基本的准备工作了。

2、Shader代码编写

2.1 绘制点或圆形

点可以认为是只有一个像素的圆形,所以我们统一认为是绘制圆形。为了在屏幕上绘制圆形,我们需要知道圆形的位置和半径。

在Properties中添加要绘制的点位置信息,半径暂时不设置为可调的,后文在使用时用了固定值

在SubShader的Pass中添加

绘制圆形的代码:

2.2 绘制直线

在Properties中添加要绘制的直线上两点位置及直线宽度

在SubShader的Pass中添加

绘制直线上两点:

根据两点绘制直线。问题转化为计算哪些点在直线的线宽范围内。首先利用直线的两点式方程,过(x1,x2)和(y1,y2)的直线上任意点(x,y)满足下式

转化为一般式为

根据点到直线的距离公式,某一点(x0,y0)到上述直线的距离为

所以绘制直线的代码如下:

2.3 绘制横纵网格

绘制网格直线代码:

2.4 绘制效果

屏幕分辨率设置成了800*600。当然这是可以按照自己的意愿随意设置的,你可以改为自己喜欢的分辨率。

2.5 完整的shader代码

Unity Shader 绘制点、直线、网格等基本图形 Unity3D教程 第3张


 

 

Unity Shader 绘制点、直线、网格等基本图形 Unity3D教程 第4张


 

小结

我们已经可以使用Shader绘制简单的几何图形,今后可以进入更加复杂的图形绘制学习阶段,学习一下更复杂奇幻的图形了。

评论列表暂无评论
发表评论