云图三维 连接你·创造的世界 致力于打造国内第一家集查看、建模、装配和渲染于一体的“云端CAD”协作设计平台。
应读者的要求，希望我们成立一个专业的、面向成渝地区的前端开发人员的webgl、Threejs行业QQ交流群，便于大家讨论问题。群里有研究webgl、Threejs大佬哦，欢迎大家加入！——点击链接加入群聊【three.js/webgl重庆联盟群】：jq.qq.com/?_wv=1027&k…
作者介绍
小强，云图大前端研发工程师，负责云图三维 front 端的开发工作。
着色器
计算机图形学领域中，着色器是一种计算机程序，它常被用来制作各种特效。同时还可以用于调整图像的色相、饱和度、亮度、对比度、模糊、高光、失失边缘检测等效果。
着色器主要是针对GPU而开发运行在GPU上，与我们平时的基于CPU上的编程有所不同，是描述顶点或像素特征的简单程序。其中的顶点着色器主要描述顶点的属性（位置、纹理坐标、颜色等），而像素(片段)着色器描述像素的特征（颜色、z深度和alpha值）。
着色器的开发有专属的语言,统称着色器语言,有HLSL,GLSL,RSL等等
下图来源自shadertoy网站上,可以看出使用着色器能实现的非常炫酷的效果:
下面简单介绍下顶点着色器和片段着色器
顶点着色器: 想象一个正方体,是由一系列顶点构成的,顶点着色器被依次传入这些顶点中的一个顶点,然后计算处理它。如何处理每个顶点是可以我们自由定制的，但顶点着色器有一个处理的任务，就是给gl_Position （放置顶点坐标信息）的变量赋值，这个变量是一个4维数组（vec4),它将表示该顶点最终在屏幕上的位置
片元着色器: 片段着色器用于处理颜色和光源,纹理,与顶点着色器类似，片元着色器有一项必须处理的任务,设置或消除变量gl_FragColor（设置当前片点的颜色),这个变量是一个四维浮点变量（vec4 RGBA color),也就是片元点最终的颜色。
什么是片元：想象一个具有三个顶点的三角形，片元就是经过这三个顶点计算后，所有在三角形内部的点。因此，片元值由顶点的值内插生成。如果一个顶点的颜色是红色，相邻顶点的颜色是蓝色，那么我们可以观测到颜色从红色顶点附近渐变，由红色变成紫色，最终在蓝色顶点附近变成蓝色。
有了顶点着色器和片段着色器,大致就按照如图所示的流程运行,最终显示在屏幕上,到这里我们只是简单的介绍了下,具体的内容和实践还有非常多,这里不做展开。
UV展开
纹理贴图是计算机图形学里一种比较重要的技术，它是一种在物体表面绘制一幅或者多幅二维图形的技术，能使物体看上去更加真实。能够进行纹理贴图的基础是要获取模型上每一个顶点的UV坐标，而我们在最开始接触纹理贴图技术时通常会忽略这一步，直接给出一个相对简单的模型上的顶点的对应UV坐标。但是对于比较复杂的模型，通常需要通过计算机计算生成每一个顶点的UV坐标，生成UV坐标的技术就是UV展开。
根据高等数学上的定义，三维空间中的参数曲面一般可以表示为F(u, v) = 0, 所以三维参数曲面本质上是二维点运动时产生的轨迹。而对于网格模型，如果我们能将它与平面参数建立一一映射关系，它也就被参数化了，UV展开的目的就是建立这种关系。UV展开的直观解释是，将一个三维模型摊平到二维平面上，每个顶点在二维平面上的值就是顶点的uv参数。下图是一个UV展开的示例，左边的是3维模型，右边是模型脸部区域展开后的所有顶点的uv参数值形成的二维网格。
如下图所示，常见的三角网格中展开后，每个三维网格顶点都对应一个二维参数点：
得到网格上每个顶点的坐标后，对于三角网格，内部点的参数可以通过三角形的重心坐标公式得到（四面形网格也有类似的结果)）：
X(u, v) = a * Pi + b * Pj + c * Pk;
其中Pi,Pj,Pk分别是三个顶点的uv参数值，(a, b, c)是三个顶点的重心坐标系数。
获取顶点的UV参数的最常见方法是固定网格边界上点的UV参数，然后根据重心公式去推导出内部顶点的UV参数(这个过程中可能要添加其他的约束来使得求出的解是唯一解）。按照这种方法得到面具的UV图如下所示:
但是我们的模型或许并非是凸的或者接近凸的，使用固定边界方法求出的UV参数会有很大的扭曲。所以学者们提出了一系列基于保角映射的UV参数化方法，由于数学公式比较复杂，此处不展开说明，但是我们可以对比一下如下图所示牛的模型的展开结果，可以看到模型的扭曲得到了比较大得改善：
值得注意的一点是，并非所有的网格都可以直接做UV展开，比如说球面，直观上在不做处理的情况下，不能摊平到二维平面上。对于不能直接展开的模型，需要为它添加一条或者多条割缝，把它分割致一片又一片的可展开的模型，再展开到平面。如下图所示得圆环形管道，需要添加两条割线来处理：
除了用于纹理贴图之外，UV展开还可以用于模型的几何编辑比如网格重新划分和变形等操作。
写在最后
本文计算机图形学中的着色器和UV展开做了简单的介绍，更深入的了解希望各位读者自行查阅其他资料。
