计算机图形学基础：颜色模型、图像基本知识、Phong光照模型

主要内容：

• 图形学中的一些重要概念
  色彩视觉
  图像和像素
  三角网格模型
  光照模型与明暗处理
• 视点变换和视点方向

色彩视觉

• 什么是色彩？
  色彩是对不同波长的光的能量的感知：
  不同波长的电磁波（electromagnetic waves）对应不同的色彩；
  对于人眼能感知的光（可见光），其波长范围为380nm到760nm之间。
  

• 光的光谱分布
  ”光“是由不同波长的电磁波按照某种能量分布混合叠加而成。例如，”白光“是由所有可见波长的电磁波以相等的强度混合得到。而紫光的合成示意如下：
  谱分布：光在各个可见波长的分量的强度分布函数称为光的谱分布。
  与光类似，色彩也可以使用谱分布函数来进行描述。然而，使用谱分布函数来表示色彩，不仅复杂，而且这样的表示方法并不是一个一一对应关系。实际上，不同的谱分布函数可能对应为同一种色彩，也就是异谱同色现象。

• RGB色彩空间
  在所有用于表示色彩的各种色彩空间中，RGB（红绿蓝）色彩空间在计算机图形学中的使用最为广泛：

  • 色彩使用三通道RGB向量（r,g,b)来表示；
  • 在RGB色彩空间中，有部分的常用操作可以通过对RGB三通道分别处理而进行；
  • 通常可以将 r, g, b 分别规整化为[0,1]内的浮点数；当使用8 bit 进行存储时，r,g,b 通常取值为[0,255]内的整数。
  • 色彩被表示为三个基本色彩：红色®，绿色(G)，蓝色(B)的线性组合:
    - C = rR + gG + bB
    - 为什么选择红绿蓝作为基本色彩？以人类视觉的三刺激理论为基础；人眼的视网膜中有三种锥状视觉细胞，分别对红、绿、蓝三种光最敏感。
  • 然而，一部分色彩无法表示成R,G,B光波的正线性组合，这是RGB色彩空间的一个缺点。
  • 下图为所有可见光波的 RGB 分量图：
    
  • 其它常用的色彩空间还包括
    • CMY
    • HSV
    • CIE XYZ

• CMY色彩空间

  • 不同于RGB的另外一组基本色彩。

    • Cyan(青)，Magenta(品红)，Yellow(黄)：分别是R,G,B的补色(complements)。
      

  • CMY被称为“减色系统”：

    • RGB 为“加色系统”：(0,0,0)为黑，(1,1,1)为白；
    • CMY：(0,0,0)为白，(1,1,1)为黑。

  • CMY系统主要在印刷出版行业使用

• HSV色彩空间

  • 在真实的RGB彩色图像中，可以包含多达256256256=16777216种可能的色彩。
  • 使用RGB色彩空间来描述和定位如此大量的不同色彩非常困难。HSV系统则提供了一个直观的方法来对色彩进行准确的选择。
  • HSV 色彩空间应用于：图像处理、分形图像、光线跟踪…
  • HSV：圆锥形的色彩空间
    • Hue(色调) 也叫色相，它描述了色彩的本征属性，即我们常说的一个色彩是红、橙、黄、绿、青、蓝、紫，等等。
    • Saturation(饱和度)也叫纯度：饱和度越低，色彩越白。
    • Value of brightness(亮度)：亮度越低，色彩越黑。
      HSV 比 RGB 更加用户友好

• CIE XYZ 色彩空间

  • CIE XYZ 色彩空间
    • 由国际发光照明委员会于1931年提出。
  • CIE XYZ 色彩空间可以表示所有可感知的色彩（而RGB空间却不能）。
    • 色彩基 XYZ 是色彩基 RGB 的线性变换。
    • 更多地应用于色彩科学的研究。
    • 与人类的感知系统密切相关。
  • 可将CIE XYZ 色彩空间可视化为如下色彩图，其中：x=X/(X+Y+Z)；y = Y/(X+Y+Z).
    

图像和像素

• 图像
  • 图像可以看成是一个二维离散函数：$f(x,y)$
  • 函数$f$的定义域是由矩阵排列着的许多格子组成，这些格子被称为 像素(pixel)
  • 函数$f$的取值则为各个像素的色彩：对于色彩图像，可以是RGB或者RGBA；对于灰度图像，$f$为单值函数。
    

三角网格模型

• 图形学的基本目标是什么？
  • 从虚拟的三维场景及相机的位置信息中，生成出一幅二维图像。
  • 而三维场景又以怎样的数据结构来表示？
    • 简单的球体，长方体可直接用其参数描述
    • 对于复杂模型，则需要使用参数曲线和曲面或者更一般的网格模型来进行描述
    • 网格模型之中又以三角网格最为常用。
• 三角网格的定义
  三角网格是由一系列欧式空间中的三维顶点以及连接这些顶点的若干三角面片组成，具体包括：
  • 顶点集合 $V=(v_1,v_2,...,v_n)$
  • 面片集合 $F=(f_1,f_2,...,f_m)$
    • 其中$F$中的每个面片$f_i$都是由$V$中的顶点构成的空间三角形：
      $f_1=(v_{a1},v_{b1},v_{c1}),f_2=(v_{a2},v_{b2},v_{c2}),...$
  • 几个例子
    • 模型“牛”上显示了三角网格的结构。
    • 模型“龙”和“人头”则是利用三角网格进行绘制的结果。
      
• 法向量
  三角面片的法向量(normal)：
  • 三角面片的法向量是垂直于该三角面片所在平面的非零向量；
  • 对于每个三角面片单独而言，其法向量都有两种可能的朝向；
  • 方向量的朝向决定了一个三角面片的正面与反面；
  • 对于连续可定向的三角网格整体而言，相邻的三角面片需要具备一致的法向量朝向。
  • 三角网格顶点的法向量可以通过其周围的所有三角面片的法向量通过加权叠加计算：
    • 假设$v$是$k$个三角面片$f_1$，$f_2$，$f_k$所共有的顶点；
    • 按算数平均计算：
      $N_v=(N_{f1}+...+N_{fk})/k$
    • 按面积加权平均计算：
      $N_v=(S_{f1}{N}_{f1}+...+S_{fk}{N}_{fk})/(S_{f1}+...+S_{fk})$
    • 按角度加权平均计算：
      $N_v=(An{g}_{f1}{N}_{f1}+...+An{g}_{fk}{N}_{fk})/(An{g}_{f1}+...+An{g}_{fk})$
• 三角网格的简单绘制
  • 三角网格模型的每个顶点需要指定一个色彩属性
  • 基于色彩的绘制
    • 模型表面的每点的色彩通过其所在三角面片的顶点色彩插值得到
  • 基于光照的绘制
    • 需要指定一个虚拟的光照环境
    • 如何计算光照对色彩的影响是最大的问题
• 三角网格的简单绘制效果
  • 线框效果
    
  • 颜色效果
  • 光照效果

光照模型

• 光照模型（lighting model 或 illumination model）用于计算光的强度：
  • 局部光照明（Local Lighting）
    • 关注物体直接受到光源影响所产生的光照效果
  • 全局光照明（Global Lighting）
    • 关注阴影效果；
    • 关注所有不是直接与光源位置相关的光照效果，例如反射和折射效果，等等…
• 光照模型的历史
  • 1967年，Whlie 等人第一次在显示物体时加入了光照明效果，认为光的强度与物体到光源的距离成反比关系
  • 1970年，Bouknight 提出了第一个光反射模型：
    • Lambert 漫反射光 + 环境光
    • 发表于 Communication of ACM
  • 1971年，Gourand 提出了漫反射模型加插值的思想：
    • Lambert 漫反射光 + Barycentric 插值
    • 发表于 IEEE transaction on Computers
  • 1975年，Phong 提出了图形学中第一个有影响也是最有影响的光照模型：Phong模型
    • 漫发射（diffuse light）+ 环境光（ambient light）+ 高光（specular light）
    • 发表于 Communication of ACM
• 光的传播

  • 光的传播遵循反射定律：

    • 入射角等于反射角
    • 入射光线、反射光线、以及反射面的法向量位于同一平面内

  • 折射定律（也叫Snell定律）：

    • 入射角和反射角的正弦值之比是一个仅仅取决于介质的常数
    • 这个常数称为相对折射系数

  • 光的传播遵循能量守恒定律：

    $I_i=I_d+I_s+I_t+I_v$

    • $I_i$：入射光的能量
    • $I_d$：漫反射（diffuse reflection）光的能量
    • $I_s$：镜面反射（specular reflection）光的能量
    • $I_t$：折射（refraction）光的能量
    • $I_v$：被介质和物体所吸收的能量
• 光的度量方法
  • 立体角（Solid Angle）：
    • 衡量物体相对于某一视点$P$的视角大小
    • 立体角最大为$4\pi$
  • 光通量（Luminous Flux）：
    • 光通量定义为：单位时间内通过面元 $dS$的光能量，记为$dF$
  • 发光强度（Radiance）：
    • 发光强度定义为：单位立体角内的光通量，记为$I$
• Phong光照模型
  • Phong模型支持点光源和方向光源
  • Phong模型是局部光照模型，将局部光照明效果分解为三个部分：
    • 漫反射光效果
    • 镜面反射光效果
    • 环境光效果
  • 示意图
    $L$是入射光；$R$是反射光；$N$是物体表面的法向量；$V$是视点方向；$H$是$L$和$V$夹角的角平分线方向
  • 漫反射光效果
    • 漫反射光的传播是各向同性的：
    • 漫反射光的强度为：
      $I_d=I_i{K}_d\ast (L\cdot N)$
      • $K_d$ 是漫反射系数
      • $K_d$ 具有三个分量$k_{dr}$，$k_{dg}$，$k_{db}$分别代表$R$, $G$, $B$三个通道的漫反射系数
      • $K_d$ 与模型自身的色彩紧密相关
      • $L$ 是入射光方向的单位向量，$N$是法向单位向量
  • 镜面反射光效果
    • 对于光滑的平面，依据反射定律，反射光线往往集中在一个小的立体角内，这些反射光我们称之为镜面反射光；
    • 镜面反射光的强度为：
      $I_s=I_i{K}_s\ast (R\cdot V{)}^n$
    • $K_s$是镜面反射系数，与物体表面光滑程度相关；
    • $n$ 是反射指数；$n$ 越大，则高光区域越集中
  • 环境光效果
    • 环境光的强度为：
      $I_a=I_i{K}_a$
    • $K_a$ 是物体对环境光的反射系数
  • 视角方向的发光强度为漫反射光分量、镜面反射光分量，以及环境光分量的发光强度之和：
    $I=I_i{K}_a+I_i{K}_s\ast (R\cdot V{)}^n+I_i{K}_d\ast (L\cdot N)$
  • Phong模型示例
    

明暗处理（Shading）

• 考虑到物体表面的几何细节往往并不规则，为了减缓由模型离散化所导致的不光滑的色彩效果，通常的明暗处理除了使用光照模型外，还需要进行插值。
• Gourand 明暗处理 和 Phong 明暗处理
  • Gourand 明暗处理是对色彩进行差值
  • Phong 明暗处理则是对法相进行插值
• Gourand 明暗处理
  • 由 Gourand 于 1971 年提出
    • 又被称为 Gourand 插值
  • 计算方法：
    • 首先计算所有模型顶点的色彩值；
    • 对模型上的任何一点，按照其所在的三角面片上顶点的色彩值按重心插值（Barycentric Interpolation）的结果赋予其色彩值
• Phong 明暗处理
  • 由 Bui Tuong Phong 于 1973年在他的博士论文中提出
    • 与 Phong 光照模型是不同的概念
  • 计算方法
    • 与 Gourand 明暗处理不同，Phong 明暗处理不是对色彩差值，而是对点的法向量进行插值，得到连续的法向量场，再利用该法向量场逐点使用光照模型进行色彩的计算
  • 结果示例
    

视点变换和视点方向

图形学关注于如何将由几何模型组成的三维场景绘制成高质量的彩色图像。
变换在图形学中至关重要：通过变换，可以简洁高效地设置和编辑三维场景，光照位置，以及视点方向。

• 为什么需要变换？
  • 假设我们已经有了一段可以绘制正方形[0,1]*[0,1]的代码
  • 如果现在我们需要绘制另外一个一条对角线是从（lox，loy）到（hix，hiy）的矩形，我们应该怎么做？
    • 一种方法是写一段新的代码：

      drawRect(lox, loy, hix, hiy) {
      	glBegin(GL_QUADS);
      	glVertex2f(lox, loy);
      	glVertex2f(hix, loy);
      	glVertex2f(hix, hiy);
      	glVertex2f(lox, hiy);
      	glEnd();
      }
      

      矩形简单可以这么做，可是对于复杂的例子（例如绘制一个茶壶），怎么办？
    • 利用变换的解法

      drawRect(lox, loy, hix, hiy) {
      	glTranslate(lox, loy);
      	glScale(hix-lox, hiy-loy);
      	drawUnitSquare(0, 0, 1, 1);
      }
      

      这样的基于变换的解决方案在图形学中随时都需要用到；使用变换可以使代码更加快速、灵活、模块化。
• 什么叫变换（Transformation）？
  • 变换是一个将空间中的点$x$映射成其它点$x^{\prime }$的函数
  • 广泛应用于：Morphing, Deformation, Viewing, Projection, Real-time shadows…
• 简单变换
  • 从左到右的变换分别是：
    不变（Identity），平移（Translation），旋转（Rotation），均衡缩放（Isotropic scaling）
  • 变换可以相互符合和嵌套：
    • 例如：先旋转，再缩放，最后再平移
  • 简单变换都是可逆的
• 常见的变换
  刚体变换（Rigid-body Transformation）
  相似变换（Similarity Transformation）
  线性变换（Linear Transformation）
  仿射变换（Affine Transformation）
  投影变换（Projective Transformation）
  • 刚体变换
    • 保持度量（长度、角度、大小）
    • 刚体变换包括：
      • 不变
      • 平移
      • 旋转
      • 以及它们的复合
  • 相似变换
    • 保持角度
    • 相似变换包括：
      • 不变
      • 平移
      • 旋转
      • 均衡缩放
      • 以及它们的复合
  • 线性变换
    • 线性变换满足如下方程
      $L(p+q)=L(p)+L(q)$ $aL(p)=L(ap)$
    • 线性变换包括：
      • 不变、旋转、缩放（不一定要均衡缩放）
      • 对称（Reflection），错切（Shear）
  • 仿射变换
    • 保持直线以及直线与直线的平行
      • 两条在放射变换之前平行的直线，在仿射变换之后依旧平行
    • 仿射变换包括：
      • 线性变换
      • 相似变换
      • 以及它们的复合
  • 投影变换
    • 保持直线
• 变换的表示
  考虑简单的二维仿射变换：
  
  可以将（1），（2）统一地写成矩阵形式：
  
  变换的表示涉及到了两个变量：$M$和$t$
  $$p^{\prime }=Mp+t$$
  然而，使用齐次坐标（Homogenous Coordinates）来表示 p 和 p’,则上述公式成为：
  $$p^{\prime }=Mp$$
  • 齐次坐标
    齐次坐标的本质是使用四维数组来表示三维空间中的点和向量
    由于引入了新的维度，我们使用 4*4 的作用矩阵，同时使用（x,y,z,w）来表示一个点或向量：
    在大部分情况下 $w=1$，可以忽略。
    当齐次坐标被仿射矩阵作用时，$w$不会改变；而如果被投影矩阵作用，$w$会改变
  • 齐次坐标的几何意义
    • 当$w$非零时，通过将所有四个坐标同时除以$w$以归一化。
      • 例如：（2x，2y，2z，2）等价于（x，y，z，1）。
    • 当$w$为零时，齐次坐标（x，y，z，0）可以理解为沿（x，y，z）方向的无穷远点。
  • 平移变换$(t_x,t_y,t_z)$
    可以看到，在齐次坐标的框架下，平移变换可以表示成为简单的矩阵乘法：
  • 缩放变换$s_x,s_y,s_z$
    以原点为缩放中心的缩放变换可以表示成为：
  • 旋转变换
    三维空间中物体的旋转具有三个独立的自由度
    围绕$z$轴的旋转可以表示为为：
    围绕单位向量$(k_x,k_7,k_z)$的旋转变换可以写成如下的Rodrigues公式：
  • 变换的复合（combination）
    一个缩放和平移进行复合的例子：
    复合等价于矩阵乘法：$p^{\prime }=T(Sp)=TSp$
  • 变换的复合不满足交换律
    这是因为矩阵的城府不满足交换律：$TS\ne ST$
  • 法向量变换
    曲面的（单位）法向量是与曲面正交的（单位）向量，它们是曲面最为重要的几何性质之一
    为什么法向量如此重要？
    • 法向量是进行光照处理的必要输入，所有的光照模型都涉及到物体的法向量
    • 只有知道了物体的法向量信息，才能绘制出具有三维立体感的图像
    • 在我们对物体进行变换时，法向量可以类似变换吗？
      我们发现，对于相似变换，法向量可以和物体使用同样的变换方程
      然而对于右图中带有错切的仿射变换，同样的方程则不适用
      可以看到变换后的向量不再是变换后物体的法向量
      另一个例子（缩放）：
      对下图的球作非均衡的缩放，使用与物体同样的变换方程用于变换法向量会出现错误结果：
    • 错切和缩放应有的法向变换
      如何才能保持正确？
      方法是变换切平面（tangent plane），再通过切平面计算法向量，而不是直接计算。
      切平面上的任一向量$v_{OS}$变换后成为$v_{WS}$：
      $$v_{WS}=M{v}_{OS}$$
      由$v_{OS}$和$n_{OS}$垂直：$n_{OS}^T{v}_{OS}=0$
      
• 视点和投影模式
  我们的眼睛能将三维场景感知为二维图像，大脑则会将二维图像再 重构回三维。在计算机图形学中，我们利用投影，模拟眼睛的功能和效果。
  投影的两个重要概念：
  • 视点变换：与相机位置及朝向相关
  • 投影模式：是将 3D 变换成为 2D 的变换模式，常用的包括正交投影和透视投影
    • 正交投影（Orthographic Projection）
      • 正交投影是视点在无穷远处的投影模式
      • 缺乏立体透视效果
      • 当xy平面是投影平面时，正交投影把（x，y，z）映射成为（x，y，0）
    • 透视投影（Perspective Projection）
      • 透视投影是视点在有限距离处的投影模式
      • 具有立体透视效果
      • 当视点位于远点，投影平面为$z=d$时，透视投影把$(x,y,z)$映射成为$((d/z)x,(d/z)y,d)$
      • 透视投影矩阵
        使用齐次坐标描述的透视投影变换可以写成矩阵形式：
        $T(x,y,z)=((d/z)x,(d/z)y,d)$