【猫猫的Unity Shader之旅】之简述3D图形学

时间:2022-05-26 16:31:45

  上次我们说到一个完整的Shader的比较完整的框架,如果大家之前没有接触过3D相关的技术的话看起来可能会比较吃力,其实这也在猫猫的意料之中的。3D技术入门是比较困难的,但是入门之后就会越学越觉得容易。猫猫目前也还不算是真正的入门,只能算初窥门径吧,不过没有关系,猫猫决定简单讲一下Shader背后的东西,让我们一起努力吧。

为什么会有3D效果

  毫无疑问,我们能在屏幕上看到的图像都是2D的。不仅是屏幕,会想一下我们接触过的美术作品,无论是大师的作品还是学生的素描作业,我们会指着一些说:“这是3D的!”实际上,这些作品只是用了一些技巧,让这些图像看上去像是3D的。时刻记住,那些显示在平面上的图像,一定是2D的。

  现实世界的物体,距离越远看起来越小,这是3D世界的一个最基本的特点,我们称这种现象透视。一个只拥有透视效果的3D图形大概是这样的:

  【猫猫的Unity Shader之旅】之简述3D图形学

  好吧,至少轮廓上像是个3D图形了……

  只有透视效果显然不能满足我们对3D效果的追求。那么为什么这个立方体还不够立体呢,根本原因还是没有足够的细节:立方体对着我们的三个面…这都是什么呀…完全看不清呀…不用担心,我们只需要小小施加下魔法,叮咚~

  【猫猫的Unity Shader之旅】之简述3D图形学

  不错,我们只是加了一个普通的平行光,瞬间感觉细节分明了有木有。所以另外一个改善3D效果的方法就是光照。这时候猫猫也忍不住要感叹一下:起初,是Unity创造了天地。地是空虚混沌,渊面黑暗,Unity运行在桌面上。Unity说,要有光,就有了平行光,Unity看光是好的,就把光暗分开了……叮咚,这个世界就这样清晰了~

  到这里其实已经有不错的效果了,然而我们仍然不知道这个方方正正的东西是什么。是纸盒,是积木,还是什么,我们需要它表面的更多信息。Unity说:“叮咚~”

  【猫猫的Unity Shader之旅】之简述3D图形学

  好吧,原来是块石头……现在我们有了这个立方体表面更多的细节,它看上去也更有立体的感觉了。纹理使3D物体表面信息更加丰富,对3D效果的表现非常有用。

  到现在为止,我们用了一些技巧,让我们的立方体已经比较有立体感了,当然,既然它能显示在平平的屏幕上,本质上肯定还是2D的。虽然我们已经尝到了技巧的甜头,也应该认识到,可以让显示效果更3D的技巧还有很多,比如阴影,雾,透明效果等等。随着3D图形学的不断发展,更多改善3D显示效果的技巧也在不断的发现中~

顶点的两万五

  回想我们第一回说到的三位“君”的故事,无论最终的显示效果多么绚丽,模型君才是最基本的原材料呀,而模型君肚子里存的,大多数都是顶点的位置、法线、颜色、贴图坐标等信息。也就是说,最终的效果,是这些顶点信息,经过我们上面说的技巧的处理,才最终显示到屏幕上的。虽然我们看到绚丽的游戏画面仍然以每秒几十帧的速度渲染,其实对于顶点来说,着实还经历了一次两万五千里长征呢。

 坐标系转换

  对于一个3D的模型君来说,我们自然可以想到它的顶点是由三个数组成,(x,y,z),大概是这样,这与我们中学立体几何学过的内容是一致的,这样的坐标系叫做笛卡尔坐标系。在这一阶段,主要任务就是把(x,y,z)这样的三维坐标转换成(x,y)这样的二维屏幕坐标。这一过程有个更专业的称呼:变换

  变换过程是通过矩阵变换来实现的。矩阵变换的具体过程涉及到比较复杂线性代数的知识,而且我们初学阶段也不用完全弄懂,这里就不多说了,感兴趣的同学可以找相关的资料看一下。我们大概需要知道,每一个模型有一个矩阵信息,就是脚本中经常用的transform,里面包含模型的位置、旋转、缩放的信息,对于模型中的每一个顶点,也都有各自的矩阵信息。

  当模型在世界中移动、旋转、缩放时,我们看到的窗口中实际的渲染效果发生了变化。而Unity底层,就是通过顶点的的矩阵信息,和一个表示这种变化的矩阵进行变化后得到的结果,这一过程被称作模型变换。这就类似于平面上一个点(0,0),向x轴正方向移动1个单位,就变成了(1,0),我们可以用向量表示这样的2d变换。矩阵只是一个更高级的数学工具,本质上是类似的。

  当我们移动摄像机的时候,发现渲染的结果同样发生了变化。这种变化同样可以用矩阵变换来实现,被称作视图变换。模型变换和视图变换总是相对的,这一点很容易理解:当我们坐在向前行驶的汽车中时,会发现窗外的树木都是向后移动的。模型变换和视图变换也经常通过一次矩阵变换来完成,叫做模型视图变换

  经过了模型视图变换之后,我们就处理完了一个模型(或者可以直接说是模型上的顶点)经过移动、旋转、缩放以及视角的变换(摄像机的位移、旋转、缩放等)之后的结果,然而,现在顶点仍然是个三维的顶点-_-|||……

  表沮丧先,在把顶点转换为二维屏幕坐标之前,我们还有个重要的活要做,就是我们一开始说的近大远小的透视效果。这一过程自然也是用矩阵变换来实现,叫做透视变换。经过透视变换后,模型的所有顶点都被转换为基于摄像机的一种位置关系。此时通过坐标是否在[-1, 1]这个范围内就可以判断顶点是否可见。这个三个轴均在[-1, 1]的空间有个专业的名字叫做裁剪平面。这里有一点需要补充一下,其实投影过程并非都是近大远小的,投影分两种:正投影透视投影,平时看到的近大远小的效果是透视投影的结果,而正投影远近是一样大的,这种投影常用作2D绘图和CAD。

  此时我们已经得到了顶点在裁剪平面上的位置表示,然而,其实最后还有一步变换,叫做视口变换,用来处理那些3D图像不完全铺满窗口的情况。比如我们希望模型只显示在窗口的上半部分和只显示在下半部分,坐标肯定是不一样的。不过对于Unity,我们不需要考虑这种情况。

 光照

  如果说变换确定了顶点的位置,那么光照可以简单理解为确定了颜色(这里其实不能说是顶点颜色),当然这个颜色可不是最终的颜色。

  说到光照,我们不妨回忆一下中学学过的物理知识。首先让我们回忆一下颜色时怎么产生的,对了,物体是知识反射了不同颜色的光。3D图形学中也是这样,这就是为什么我们的Shader中,SurfaceOutput结构中表示颜色的分量叫做Albedo(反射率)而不是Color。光的反射,表面的法线,嗯,我们的模型君也有是法线信息的。波粒二象性,呃,算了,暂时用不到……

  光照阶段的处理主要还是在Shader中实现。目的也比较单纯,只要计算出颜色就可以了。我们可以充分发挥想象力,用不同的算法来实现。

以上只是冰山一角

  顶点的两万五千里长征,终于算走了一个阶段啦!上面说的转换和光照阶段,也被称作T&L阶段,是3D渲染过程中很重要的一环,然而,这也只是一个阶段而已。模型顶点到屏幕图像的整个运算过程还需要很多运算,整个过程也叫做管线,是非常重要的概念哟~至于剩下的阶段,暂时不准备说了。

  到这里我们可以再回忆一下上一回说到的Surface Shader的几个函数:vert、surface、lightingXXX和finalcolor。首先是vert,处理顶点的位置和颜色信息,这个就相当于我们说的变换阶段,我们没有做很复杂的矩阵变换是因为Surface Shader已经帮我们都做好了,如果我们以后要写可编程Shader的话,会发现需要用顶点乘一个叫做UNITY_MATRIX_MVP的矩阵,这个矩阵就是模型(M)视图(V)投影(P)矩阵的合体形式。然后我们再观察下surface函数,就会发现这个函数的任务就是填充Surface Output结构,而该结构是给LightingXXX函数用的,也就是说,suface函数并没有特别实际的事情。再看看LightingXXX这个函数,通过一些计算,我们最终输出了一个颜色值,这个就相当于我们说到的光照阶段。至于finalcolor,猫猫认为它只是一个用于修正最终颜色值得函数,与渲染过程的必要阶段没有太大关系。

  管线是一个很长的处理过程,然而Surface Shader帮我们做了很大一部分工作,虽然这样我们的控制权会减少一些,但是对于简单的应用和学习,真的是一大福利呢~

结束语

  任何一门技术只有对它背后的原理有一定了解才有可能熟练掌握,猫猫觉得对于Shader来说更是这样。但是只学底层的原理有时又会让人迷茫,所以大家学习的时候也应该注意一下,不要一味学习表面的东西,也不要陷入底层细节的泥潭不能自拔,钻了牛角尖,两个方向都学一下,不会有挫败感,也能有更好的理解。希望这篇文章能对大家有所帮助,咱们下回再见~