图形管道概述

不同的渲染系统,有不同的偏向和优化技巧,但多数渲染系统有极大共性。一般的图形管道中的数据概况如下:

  • 建立场景:设定对整个场景有效的一些选项
    • 建立摄像机位置(设置观察场景的方式)
      • 视点:渲染的出发点
      • 视图:渲染的输出
      • 光照、雾化选项
      • z-缓冲
  • 可见性检测
    • 场景中哪些物体可见。
    • 对实时渲染来说极其重要(性能)
  • 设置物体级渲染状态
    • 每个(潜在)可见物体的渲染设置可能不同。
    • 最常见:纹理映射。
  • 几何体的生成与提交
    • 向API提交几何体
    • 大多数几何体:三角形,如索引三角网格、三角带、独立的三角形。
    • 少数几何体:LOD,渐进式生成几何体
  • 变换与光照
    • 坐标变换:模型空间向摄像机空间的顶点坐标变换
    • 顶点光照计算
  • 背面剔除与裁剪
    • 背面剔除:去除背对摄像机的三角形。
    • 裁剪:去除三角形在视锥外的部分(产生多边形)
  • 投影到屏幕空间
    • 在3D裁剪空间中经裁剪产生的多边形,被投影到输出窗口的2D屏幕空间里。
  • 光栅化
    • 计算出绘制三角形所需要的那些像素。
    • 为像素着色提供插值参数(光照、纹理映射坐标)。
  • 像素着色
    • 计算三角形色彩,把颜色写至屏幕
    • 可能需要alpha混合、z-缓冲。 ```cpp

setupTheCamera(); //建立摄像机位置 clearZBuffer(); //清除z-buffer setGlobalLightingAndFog(); //设置环境光源和雾化 potentiallyVisibleObjectList = highLevelVisibilityDetermination(scene); //得到可见物体列表

for (all objects in potentiallyVisibleObjectList){ // 渲染它们

  1. if (!object.isBoundingVolumeVisible()) continue; // 使用包围体方法执行低级别VSD检测
  2. triMesh = object.getGeometry(); // 提取几何体(三角网格等)或者渐进式生成几何体
  3. for (each triangle in the geometry){ // 裁剪和渲染面
  4. clipSpaceTriangle = transformAndLighting(triangle); // 变换顶点到裁剪空间(摄像机空间),执行顶点级别光照
  5. if (clipSpaceTriangle.isBackFacing()) continue; // 背面剔除:三角形为背向的?
  6. clippedTriangle = clipToViewVolume(clipSpaceTriangle); // 裁剪:对视锥裁剪三角形
  7. if (clippedTriangle.isEmpty()) continue;
  8. clippedTriangle.projectToScreenspace(); // 投影&光栅化:三角形投影至屏幕空间,并且光栅化
  9. for (each pixel in the triangle){ // 插值颜色,z-缓冲值和纹理映射坐标
  10. if (!zbufferTest() || !alphaTest()) continue //执行 zbuffering和 alpha检测
  11. color = shadePixel(); //像素着色
  12. writePixel(color, interpolatedZ); // 写内容到帧缓冲和z-缓冲
  13. }
  14. }

}

  1. <a name="sxMQn"></a>
  2. # 一、设定视图参数
  3. 渲染场景之前,首先必须做的是:
  4. - **建立摄像机**
  5. - 从哪个位置观察渲染:视点位置、方向、缩放。
  6. - **建立(输出)窗口**
  7. - 把渲染结果送到哪里。
  8. - 屏幕上的目标矩形区域,输出窗口不一定是充满整个屏幕,可能只是屏幕的一块。
  9. <a name="eoQiR"></a>
  10. ## (一)指定输出窗口
  11. [点击查看【processon】](https://www.processon.com/view/link/5fd730c363768906e6dcc382)<br />不一定要把图像渲染到整个屏幕,比如分屏多人游戏,每个玩家占据屏幕的一部分。<br />输出窗口指输出设备中图像将要渲染到的那部分。<br />渲染的最终输出也不一定是窗口,也可能保存到TGA文件、AVI的一帧。帧缓冲(frame buffer)指保存正在渲染图像的内存。
  12. <a name="fQxua"></a>
  13. ## (二)像素纵横比
  14. 即像素的宽高比,一般是1,也就是“方形像素”,计算公式:
  15. ![](https://cdn.nlark.com/yuque/__latex/b2fe038fd3557c1e7248edf7fd1cd0c9.svg#card=math&code=%5Cbegin%7Barray%7D%7Bl%7D%0A%5CLARGE%20%7B%5Cfrac%20%7B%20%5Ctext%20%7BpixPhys%7D%20_%20%7B%20x%20%7D%20%7D%20%7B%20%5Ctext%20%7BpixPhys%7D%20_%20%7B%20y%20%7D%20%7D%20%3D%20%5Cfrac%20%7B%20%5Ctext%20%7BdevPhys%7D%20_%20%7B%20x%20%7D%20%7D%20%7B%20%5Ctext%20%7BdevPhys%7D%20_%20%7B%20y%20%7D%20%7D%20%5Ccdot%20%5Cfrac%20%7B%20devRes_%20%7B%20y%20%7D%20%7D%20%7B%20devRes%20_%20%7B%20x%20%7D%20%7D%7D%5C%5C%0ApixPhys%EF%BC%9A%E5%83%8F%E7%B4%A0%E7%89%A9%E7%90%86%E5%B0%BA%E5%AF%B8%20%5C%5C%0AdevPhys%EF%BC%9A%E6%98%BE%E7%A4%BA%E8%AE%BE%E5%A4%87%E7%9A%84%E7%89%A9%E7%90%86%E5%B0%BA%E5%AF%B8%20%5C%5C%0AdevRes%EF%BC%9A%E6%98%BE%E7%A4%BA%E8%AE%BE%E5%A4%87%E7%9A%84%E5%83%8F%E7%B4%A0%E5%B0%BA%E5%AF%B8%0A%5Cend%7Barray%7D&height=141&width=345)
  16. <a name="x0IWz"></a>
  17. ## (三)视锥
  18. 视锥是摄像机可见的空间体积,看上去像截掉顶部的金字塔(平截头体,frustum)<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/461452/1608102879201-3763ccc8-dffe-4b3a-8763-b6b3cf70faa4.png#align=left&display=inline&height=395&margin=%5Bobject%20Object%5D&name=image.png&originHeight=529&originWidth=678&size=272157&status=done&style=none&width=506)
  19. - **视锥**:6个裁剪面构成
  20. - 上、下、左、右裁剪面
  21. - 近裁剪面:near clip plane,防止物体离摄像机过近
  22. - 远裁剪面:far clip plane,太远的物体,基本不可见,完全可以裁剪掉。
  23. <a name="gm2fl"></a>
  24. ## (四)视场与缩放
  25. - **视场**
  26. - 视锥所截的角,
  27. - 需两个角:水平视场角、垂直视场角。
  28. - **缩放**
  29. - 物体实际大小与在90°视场中显示大小的比。2.0表示物体在屏幕上比在90°场时大两倍。
  30. - 需要两个值:水平和垂直,不然图像会被拉伸。
  31. ![image.png](https://cdn.nlark.com/yuque/0/2020/png/461452/1608103724997-3bd82fb2-3fee-47e6-b5fe-d98cb64ba936.png#align=left&display=inline&height=405&margin=%5Bobject%20Object%5D&name=image.png&originHeight=668&originWidth=1218&size=149036&status=done&style=none&width=739)<br />缩放、视场角之间的转换公式:
  32. ![](https://cdn.nlark.com/yuque/__latex/20f136ac9e9e59a67ccd3d06fe996f2c.svg#card=math&code=%5Cbegin%7Barray%7D%20%7B%20l%20%7D%20%0A%20%7B%20%E7%BC%A9%E6%94%BE%EF%BC%9A%5CLarge%20zoom%20%3D%20%5Cfrac%20%7B%201%20%7D%20%7B%20%5Ctan%20%28%20%5Ctext%20%7B%20fov%20%7D%20%2F%202%20%29%20%7D%20%7D%20%5C%5C%20%0A%0A%20%7B%20%E8%A7%86%E5%9C%BA%E8%A7%92%EF%BC%9A%5CLarge%20fov%20%20%3D%202%20arctan%28%5Cfrac%7B1%7D%7Bzoom%7D%29%20%7D%20%5Cend%7Barray%7D&height=76&width=287)<br />水平/垂直缩放需要和输出窗口的尺寸对应,否则图像将被拉伸。<br />![](https://cdn.nlark.com/yuque/__latex/3c051ef3ca2ed1b4c0c46aca66101c35.svg#card=math&code=%5Cbegin%7Barray%7D%7Bl%7D%0A%5CLarge%20%7B%5Cbegin%7Baligned%7D%0A%5Cfrac%7Bzoom_%7Bx%7D%7D%7Bzoom_%7By%7D%7D%20%26%3D%5Cfrac%7Bw%20i%20n%20P%20h%20y%20s_%7Bx%7D%7D%7BwinPhys_%7By%7D%7D%20%5C%5C%0A%26%3D%5Cfrac%7BwinRes_%7Bx%7D%7D%7BwinRes_%7By%7D%7D%20%5Ccdot%20%5Cfrac%7Bpix%20Phys_%7Bx%7D%7D%7Bp%20i%20x%20P%20h%20y%20s_%7By%7D%7D%20%5C%5C%0A%26%3D%5Cfrac%7Bw%20i%20n%20%5Coperatorname%7BRe%7D%20s_%7Bx%7D%7D%7Bw%20i%20n%20%5Coperatorname%7BRe%7D%20s_%7By%7D%7D%20%5Ccdot%20%5Cfrac%7Bd%20e%20v%20P%20h%20y%20s_%7Bx%7D%7D%7Bd%20e%20v%20P%20h%20y%20s_%7By%7D%7D%20%5Ccdot%20%5Cfrac%7Bd%20e%20v%20Re%20s_%7By%7D%7D%7BdevRes_%7Bx%7D%7D%0A%5Cend%7Baligned%7D%7D%20%5C%5C%0A%5CLarge%20zoom%EF%BC%9A%E6%91%84%E5%83%8F%E6%9C%BA%E7%9A%84zoom%E5%80%BC%20%5C%5C%0A%5CLarge%20winPhys%EF%BC%9A%E7%AA%97%E5%8F%A3%E7%89%A9%E7%90%86%E5%B0%BA%E5%AF%B8%20%5C%5C%0A%5CLarge%20winRes%EF%BC%9A%E7%AA%97%E5%8F%A3%E7%9A%84%E5%83%8F%E7%B4%A0%E5%B0%BA%E5%AF%B8%20%5C%5C%0A%5CLarge%20pixPhys%EF%BC%9A%E5%83%8F%E7%B4%A0%E7%9A%84%E7%89%A9%E7%90%86%E5%B0%BA%E5%AF%B8%20%5C%5C%0A%5CLarge%20devPhys%EF%BC%9A%E6%98%BE%E7%A4%BA%E8%AE%BE%E5%A4%87%E7%9A%84%E7%89%A9%E7%90%86%E5%B0%BA%E5%AF%B8%20%5C%5C%0A%5CLarge%20devRes%EF%BC%9A%E6%98%BE%E7%A4%BA%E8%AE%BE%E5%A4%87%E7%9A%84%E5%83%8F%E7%B4%A0%E5%B0%BA%E5%AF%B8%0A%5Cend%7Barray%7D&height=414&width=474)<br />如果输出为正常比例,一般引擎只需要输入一个视场角(zoom值)来设定摄像机,引擎会自动计算另一个视场角(zoom值)。
  33. <a name="DKWAn"></a>
  34. # 二、坐标空间
  35. <a name="x5rpZ"></a>
  36. ## (一)物体空间
  37. 物体最开始在物体空间(和物体相连的坐标空间)中描述,包含:顶点信息、表面法向量。<br />也称模型空间、局部空间。
  38. <a name="1rrdi"></a>
  39. ## (二)世界空间
  40. - 模型空间转换到世界空间,称为模型变换。
  41. <a name="Pdqz3"></a>
  42. ## (三)摄像机空间
  43. 也称眼睛空间。
  44. - 是这样的3D坐标空间:
  45. - 原点
  46. - 在投影中心
  47. - 一个轴
  48. - 平行于拍摄方向垂直于投影平面。
  49. - 一个轴
  50. - 上下裁剪面相交得到。
  51. - 一个轴
  52. - 左右裁剪面相交得到。
  53. ![image.png](https://cdn.nlark.com/yuque/0/2020/png/461452/1608105325249-2bf4b9cb-70ae-43fa-ab85-0536b8aaff83.png#align=left&display=inline&height=568&margin=%5Bobject%20Object%5D&name=image.png&originHeight=632&originWidth=562&size=165737&status=done&style=none&width=505)
  54. - 左手坐标系
  55. - +z方向:摄像机朝向
  56. - +y:上方向
  57. - +x:右方向
  58. - 右手坐标系
  59. - +z:朝向摄像机
  60. <a name="tJGBV"></a>
  61. ## (四)裁剪空间
  62. 又名:标准视体空间(the canonicalview volume space)。<br />**裁剪矩阵**:从摄像机空间变换到裁剪空间的矩阵。
  63. 在这之前,顶点还是“纯粹”的3D向量,即三个坐标值(或者有第四个分量![](https://cdn.nlark.com/yuque/__latex/e6f0a12c4f3bdaa7a742d98a01da1f2d.svg#card=math&code=w%3D1&height=16&width=42))。裁剪矩阵将有用信息加入![](https://cdn.nlark.com/yuque/__latex/f1290186a5d0b1ceab27f4e77c0c5d68.svg#card=math&code=w&height=12&width=12)中,主要有两个目的:
  64. - **为透视投影准备向量**
  65. - 由除以![](https://cdn.nlark.com/yuque/__latex/f1290186a5d0b1ceab27f4e77c0c5d68.svg#card=math&code=w&height=12&width=12)来实现,见透视投影知识。
  66. - **裁剪**
  67. - 标准化![](https://cdn.nlark.com/yuque/__latex/a7f3ab68db33637217f888d1869a139a.svg#card=math&code=x%E3%80%81y%E3%80%81z&height=24&width=57),将它们与![](https://cdn.nlark.com/yuque/__latex/f1290186a5d0b1ceab27f4e77c0c5d68.svg#card=math&code=w&height=12&width=12)比较来判断是否在裁剪区域内。
  68. <a name="sngmr"></a>
  69. # 三、光照与雾化
  70. 标准光照模型:处理一个物体时,不考虑其他物体的影响。
  71. <a name="iBLmi"></a>
  72. ## 1、光照_色彩数学
  73. 计算机色彩常用RGB模型,R:red,G:green,B:blue,值一般在![](https://cdn.nlark.com/yuque/__latex/196574ec033b91b4ab8b214fe48171e1.svg#card=math&code=%5B0%2C1%5D%E5%8C%BA%E9%97%B4%E5%86%85&height=24&width=80)。<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/461452/1608452104529-66f8ac34-9bce-48b5-bb4d-96137290d1e2.png#align=left&display=inline&height=404&margin=%5Bobject%20Object%5D&name=image.png&originHeight=614&originWidth=638&size=102927&status=done&style=none&width=420)<br />用黑体的小写罗马字母符号表示,如![](https://cdn.nlark.com/yuque/__latex/bef4443d07b588847f994aac4a9d2ce0.svg#card=math&code=%5CLarge%20%5Cmathbf%20c&height=16&width=12)<br />![](https://cdn.nlark.com/yuque/__latex/08676686e511366a75729f6865b94bad.svg#card=math&code=%5Clarge%20%E8%89%B2%E5%BD%A9%E5%8F%AF%E4%BB%A5%2B%E3%80%81-%E3%80%81%5Ctimes%20%E5%8F%98%E9%87%8F%EF%BC%8C%E5%92%8C%E5%90%91%E9%87%8F%E8%BF%90%E7%AE%97%E4%B8%80%E6%A0%B7%E3%80%82&height=30&width=394)<br />![](https://cdn.nlark.com/yuque/__latex/a42cbd8f8853b62955faaf91c3ca414f.svg#card=math&code=%5Clarge%20%E8%89%B2%E5%BD%A9%20%5Cotimes%20%E8%89%B2%E5%BD%A9%EF%BC%8C%E2%80%9C%E4%BD%8D%E4%B9%98%E2%80%9D%E8%BF%90%E7%AE%97%EF%BC%8C%E4%B8%A4%E7%A7%8D%E9%A2%9C%E8%89%B2%E5%8F%A0%E5%8A%A0%E3%80%82&height=30&width=365)
  74. <a name="3UkD4"></a>
  75. ## 2、光照_光源
  76. 为进行渲染,必须向图形API描述场景中的光。
  77. - **点光源**
  78. - 向四面八方发射光线的点,也叫**全向光、球状光**
  79. - **平行光**
  80. - 从无限远处射来的点光源的光线
  81. - **聚光灯**
  82. - 从特定光源向特定方向射出的光。
  83. - **环境光**
  84. - 不属于任何光源而照亮整个场景的光。
  85. - 不考虑环境光,影子将是完全黑的。
  86. <a name="nZcDa"></a>
  87. ### 点光源
  88. 向四面八方发射光线的点,也叫**全向光、球状光**<br />有方向和色彩,色彩(色调与亮度)。<br />辐射衰减半径(Falloff radius),控制照亮的范围。<br />常见有:灯泡、点灯、火把。<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/461452/1608452698385-ac3da38b-d971-4936-bd2c-f53234203926.png#align=left&display=inline&height=270&margin=%5Bobject%20Object%5D&name=image.png&originHeight=540&originWidth=547&size=224500&status=done&style=none&width=273.5)
  89. <a name="TEyYb"></a>
  90. ### 平行光
  91. 从无限远处射来的点光源的光线。<br />场景中所有光线皆为平行。<br />没有位置概念,无衰减。<br />最典型的就是太阳光。
  92. <a name="KHUqB"></a>
  93. ### 聚光灯
  94. 从特定光源向特定方向射出的光。<br />有位置、方向,辐射距离,照亮区域为圆锥形、金字塔形。<br />如信号灯、车头灯。<br />**圆形聚光灯**<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/461452/1608453088410-23cc906a-86ca-47c6-8432-2e12980bc0b1.png#align=left&display=inline&height=366&margin=%5Bobject%20Object%5D&name=image.png&originHeight=605&originWidth=1070&size=376706&status=done&style=none&width=648)<br />**方形聚光灯**<br />金字塔形状,不是圆锥形状,常用于投影图像,如电影放映。
  95. <a name="GmXh6"></a>
  96. ## 3、光照_标准光照方程
  97. ![](https://cdn.nlark.com/yuque/__latex/baaed219fa0ec2bb053cf293c57eec94.svg#card=math&code=%5CLarge%20C%20_%20%7B%20l%20i%20t%20%7D%20%3D%20C%20_%20%7B%20s%20p%20e%20c%20%7D%20%2B%20C%20_%20%7B%20d%20i%20f%20f%20%7D%20%2B%20C%20_%20%7B%20a%20m%20b%20%7D%20&height=28&width=284)
  98. ![](https://cdn.nlark.com/yuque/__latex/6072c524393995d6b8382fb4dcc87b42.svg#card=math&code=%5CLarge%20C_%7Blit%7D&height=25&width=37):打开光照情况下计算的颜色值。<br />![](https://cdn.nlark.com/yuque/__latex/447e8a56b4e948a97fecd35b4b5a1fbf.svg#card=math&code=%5CLarge%20C_%7Bspec%7D&height=28&width=51):镜面反射分量<br />![](https://cdn.nlark.com/yuque/__latex/705b08c0d5647f1b19f01b051b9dd900.svg#card=math&code=%5CLarge%20C_%7Bdiff%7D&height=28&width=53):散射分量(漫反射分量)<br />![](https://cdn.nlark.com/yuque/__latex/79cccd411a43a14b24ac50abb7c11970.svg#card=math&code=%5CLarge%20C_%7Bamb%7D&height=25&width=51):环境光分量
  99. 物体外观主要取决于以下四点因素
  100. - 物体表面的性质,即材质属性。
  101. - 表面的方位与朝向,朝向常用单位法向量表示。
  102. - 照射来的各光源性质。
  103. - 观察者位置。
  104. 方程中的每个部分分别考虑了上述因子的不同组合。
  105. <a name="iuBq9"></a>
  106. ### 镜面反射分量
  107. 由光源直接经物体表面反射入眼睛的光线。<br />镜面反射使物体看上去有光泽。粗糙表面因反射率不高,所以缺乏此类效果。镜面反射的强度取决于:**物体**,**光源**和**观察者。**
  108. <a name="p9rf4"></a>
  109. #### Phong模型
  110. **![image.png](https://cdn.nlark.com/yuque/0/2020/png/461452/1608455154954-0f5f5b1d-4e4b-41bd-8b1b-93c1fee0c6cf.png#align=left&display=inline&height=344&margin=%5Bobject%20Object%5D&name=image.png&originHeight=499&originWidth=654&size=106773&status=done&style=none&width=451)**<br />![](https://cdn.nlark.com/yuque/__latex/078e33644b530432ff335115df4919f1.svg#card=math&code=%5Cbegin%7Barray%7D%7Bl%7D%0An%20%E4%B8%BA%E8%A1%A8%E9%9D%A2%E6%B3%95%E5%90%91%E9%87%8F%20%20%5C%5C%0Av%20%E6%8C%87%E5%90%91%E8%A7%82%E5%AF%9F%E8%80%85%20%20%20%5C%5C%0Al%20%E6%8C%87%E5%90%91%E5%85%89%E6%BA%90%E3%80%82%E5%AF%B9%E6%96%B9%E5%90%91%E5%85%89%E6%BA%90%EF%BC%8Cl%E4%B8%BA%E5%AE%9A%E5%80%BC%20%5C%5C%0Ar%E4%B8%BA%E2%80%9C%E9%95%9C%E8%B1%A1%E2%80%9D%E5%90%91%E9%87%8F%EF%BC%8C%E5%8D%B3l%E5%AF%B9%20n%20%E9%95%9C%E8%B1%A1%E4%B9%8B%E7%BB%93%E6%9E%9C%20%20%5C%5C%20%0A%5Ctheta%E4%B8%BAr%20%E5%92%8Cv%20%E7%9A%84%E5%A4%B9%E8%A7%92%EF%BC%8C%E7%94%B1r%5Ccdot%20v%E7%BB%99%E5%87%BA%E3%80%82%E6%8F%8F%E8%BF%B0%E9%95%9C%E8%B1%A1%E7%9A%84%E6%96%B9%E5%90%91%E6%80%A7%20%20%5C%5C%0A%5Cend%7Barray%7D&height=139&width=339)<br />**![image.png](https://cdn.nlark.com/yuque/0/2020/png/461452/1608456765394-6f9259d3-c049-4d52-9333-1489cc7fac8a.png#align=left&display=inline&height=340&margin=%5Bobject%20Object%5D&name=image.png&originHeight=539&originWidth=782&size=128447&status=done&style=none&width=493)**<br />**![](https://cdn.nlark.com/yuque/__latex/de3f222f96a8406a3ba3cbeca9c5671c.svg#card=math&code=%5Cbegin%7Barray%7D%7Bl%7D%0A%5CLarge%20C_%7Bspec%7D%20%26%5CLarge%20%3D%20%28%5Ccos%20%5Ctheta%20%29%5E%7Bm_%7Bgls%7D%7Ds_%7Bspec%7D%5Cotimes%20m_%7Bspec%7D%20%5C%5C%0A%26%5CLarge%20%3D%28v%5Ccdot%20r%29%5E%7Bm_%7Bgls%7D%7Ds_%7Bspec%7D%5Cotimes%20m_%7Bspec%7D%20%5C%5C%0A%5Cend%7Barray%7D&height=61&width=333)**<br />![](https://cdn.nlark.com/yuque/__latex/a12351c5035c367eea7c4ecf08711884.svg#card=math&code=%5CLarge%20m_%7Bgls%7D&height=20&width=45)<br />为材料的光泽度,也称作Phong指数。它控制“亮斑”的范围(大小)<br />小的值带来大而平滑的光斑<br />大的值带来小而亮的光斑。<br />完全的反射面,如玻璃,有非常大的![](https://cdn.nlark.com/yuque/__latex/a12351c5035c367eea7c4ecf08711884.svg#card=math&code=%5CLarge%20m_%7Bgls%7D&height=20&width=45),只有反射光进入眼睛;<br />不完全的光反射面,如苹果的表面,有较大的亮斑。<br />![](https://cdn.nlark.com/yuque/__latex/da46d623d2e56ff705cf775acee26469.svg#card=math&code=%5CLarge%20m_%7Bspec%7D&height=20&width=55)<br />材料的反射颜色,对整个材料是一个不变的灰度值。控制“光斑”的强度。<br />强反射面,值越大,粗糙一些,值越小。<br />可以用“光泽图”控制物体的反射,犹如纹理控制物体颜色。<br />![](https://cdn.nlark.com/yuque/__latex/324fe47dd43d436e40bc6d5f3e396785.svg#card=math&code=%5CLarge%20s_%7Bspec%7D&height=20&width=45)<br />光源的镜面反射颜色,控制光本身的色彩与强度。常等于光的漫反射颜色![](https://cdn.nlark.com/yuque/__latex/2f14ea235091b589d08372f24cf60aa5.svg#card=math&code=%5CLarge%20s_%7Bdiff%7D&height=21&width=47)<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/461452/1608457782880-888d2694-d20c-41dc-a0d9-db7f2c9197a8.png#align=left&display=inline&height=434&margin=%5Bobject%20Object%5D&name=image.png&originHeight=777&originWidth=1009&size=394125&status=done&style=none&width=563)<br />观察者离物体的距离远大于物体的尺寸时,可以仅计算v一次,然后对于整个物体是常量。
  111. <a name="CqkGn"></a>
  112. #### Blinn模型
  113. ![image.png](https://cdn.nlark.com/yuque/0/2020/png/461452/1608458045043-5ccc8f7f-5a53-4785-88c8-c4f593185069.png#align=left&display=inline&height=309&margin=%5Bobject%20Object%5D&name=image.png&originHeight=518&originWidth=725&size=112672&status=done&style=none&width=432)<br />![](https://cdn.nlark.com/yuque/__latex/73cf62b280ded1c72ccd77113b0c93df.svg#card=math&code=%5CLarge%20h%E4%B8%BAv%E3%80%81l%E7%9A%84%E4%B8%AD%E9%97%B4%E5%90%91%E9%87%8F%EF%BC%8C%E7%94%B1%E6%A0%87%E5%87%86%E5%8C%96v%E3%80%81l%E7%9A%84%E5%B9%B3%E5%9D%87%E5%80%BC%E6%B1%82%E5%BE%97%EF%BC%9A&height=35&width=503)<br />![](https://cdn.nlark.com/yuque/__latex/25f6fd9181f63e1666b236f1b5f914d5.svg#card=math&code=%5CLarge%20h%20%3D%20%5Cfrac%20%7B%20v%20%2B%20l%20%7D%20%7B%20%5C%7C%20v%20%2B%20l%20%5C%7C%20%7D&height=60&width=127)
  114. ![](https://cdn.nlark.com/yuque/__latex/9f1abecf3ac1a9497309fe0eb4d8b201.svg#card=math&code=%5CLarge%20%5Cbegin%7Barray%7D%7Bl%7D%0AC_%7Bspec%7D%20%26%3D%28%5Ccos%20%5Ctheta%29%5E%7Bm_%7Bgls%7D%7Ds_%7Bspec%7D%5Cotimes%20m_%7Bspec%7D%20%5C%5C%0A%26%3D%28n%5Ccdot%20h%29%5E%7Bm_%7Bgls%7D%7Ds_%7Bspec%7D%5Cotimes%20m_%7Bspec%7D%0A%5Cend%7Barray%7D%0A&height=62&width=333)
  115. ![](https://cdn.nlark.com/yuque/__latex/a12351c5035c367eea7c4ecf08711884.svg#card=math&code=%5CLarge%20m_%7Bgls%7D&height=20&width=45)<br />为材料的光泽度,也称作Phong指数。它控制“亮斑”的范围(大小)<br />小的值带来大而平滑的光斑<br />大的值带来小而亮的光斑。<br />完全的反射面,如玻璃,有非常大的![](https://cdn.nlark.com/yuque/__latex/a12351c5035c367eea7c4ecf08711884.svg#card=math&code=%5CLarge%20m_%7Bgls%7D&height=20&width=45),只有反射光进入眼睛;<br />不完全的光反射面,如苹果的表面,有较大的亮斑。<br />![](https://cdn.nlark.com/yuque/__latex/da46d623d2e56ff705cf775acee26469.svg#card=math&code=%5CLarge%20m_%7Bspec%7D&height=20&width=55)<br />材料的反射颜色,对整个材料是一个不变的灰度值。控制“光斑”的强度。<br />强反射面,值越大,粗糙一些,值越小。<br />可以用“光泽图”控制物体的反射,犹如纹理控制物体颜色。<br />![](https://cdn.nlark.com/yuque/__latex/324fe47dd43d436e40bc6d5f3e396785.svg#card=math&code=%5CLarge%20s_%7Bspec%7D&height=20&width=45)<br />光源的镜面反射颜色,控制光本身的色彩与强度。常等于光的漫反射颜色![](https://cdn.nlark.com/yuque/__latex/2f14ea235091b589d08372f24cf60aa5.svg#card=math&code=%5CLarge%20s_%7Bdiff%7D&height=21&width=47)
  116. 此方程便于硬件实现,特别是当光源与观察者均远离物体时,此时![](https://cdn.nlark.com/yuque/__latex/38e0e8c7355fa00d35d4daad79b40d08.svg#card=math&code=%5CLarge%20h&height=20&width=13)被视为常数仅需计算1次。<br />有时cosθ小于零,此时简单地令镜面反射为0即可。
  117. <a name="tg3sY"></a>
  118. ### 漫反射分量
  119. ![image.png](https://cdn.nlark.com/yuque/0/2020/png/461452/1608458655347-036a25a5-1fc3-49a9-9ba8-bd936c9a2861.png#align=left&display=inline&height=370&margin=%5Bobject%20Object%5D&name=image.png&originHeight=638&originWidth=760&size=171366&status=done&style=none&width=441)<br />漫反射光服从![](https://cdn.nlark.com/yuque/__latex/b1d7b2a247f85cea950e5c152e6e3972.svg#card=math&code=%5CLarge%20Lambert&height=20&width=91)法则,反射光强正比于法向量与光线夹角的余弦。
  120. ![](https://cdn.nlark.com/yuque/__latex/3c1eab76a291a894e4ab1f00f87115c2.svg#card=math&code=%5CLarge%20c_%7Bdiff%7D%3D%28n%5Ccdot%20l%29s_%7Bdiff%7D%5Cotimes%20m_%7Bdiff%7D&height=30&width=271)
  121. ![](https://cdn.nlark.com/yuque/__latex/34f028dc930e4a5f779f0cf6b229916c.svg#card=math&code=%5CLarge%20n&height=14&width=14)为表面法向量<br />![](https://cdn.nlark.com/yuque/__latex/a62dafd8d53b93f9d689337f6494a9fc.svg#card=math&code=%5CLarge%20l&height=20&width=7)为指向光源的单位向量<br />![](https://cdn.nlark.com/yuque/__latex/8bd41168a967ed72184411ec8361d874.svg#card=math&code=%5CLarge%20m_%7Bdiff%7D&height=21&width=57)为材料的散射色,即多数人认同的物体颜色。材质多来自纹理图.。<br />![](https://cdn.nlark.com/yuque/__latex/2f14ea235091b589d08372f24cf60aa5.svg#card=math&code=%5CLarge%20s_%7Bdiff%7D&height=21&width=47)为光源散射色,一般和光源镜面色![](https://cdn.nlark.com/yuque/__latex/324fe47dd43d436e40bc6d5f3e396785.svg#card=math&code=%5CLarge%20s_%7Bspec%7D&height=20&width=45)一致。<br />与镜面反射类似,这里也要防止点积出现负值,免得物体从背后透光。
  122. <a name="T6gnv"></a>
  123. ### 环境光分量
  124. 镜面反射和漫反射都是刻画光源经物体反射后直接进入眼中的光线,但现实世界中,光线也经常在经历多于一次的反射后进入眼睛。好比您在黑暗的厨房打开冰箱,整个房间都会变得亮些,尽管箱门(您的身体)挡住了大部分直线光。<br />描述这类光,我们可用环境光。<br />环境光取决于材质和全局环境光,没有涉及任何光源。
  125. 环境光计算公式如下:<br />![](https://cdn.nlark.com/yuque/__latex/ff0b61a8d43e526de9ca77f273e75b7c.svg#card=math&code=%5CLarge%20c_%7Bamb%7D%3Dg_%7Bamb%7D%5Cotimes%20m_%7Bamb%7D&height=24&width=206)
  126. ![](https://cdn.nlark.com/yuque/__latex/12b9422463d9d233b5001f7241b3563f.svg#card=math&code=%20%5CLarge%20m_%7Bamb%7D&height=18&width=55):材质的环境光分量,它总是等于漫反射分量—— 由纹理图定义。<br />![](https://cdn.nlark.com/yuque/__latex/ad2a440baf6d2ab9914b7d239391f071.svg#card=math&code=%5CLarge%20g_%7Bamb%7D&height=20&width=45)为整个场景的环境光值。
  127. <a name="uNQwX"></a>
  128. ## 4、光照_光的衰减
  129. 光随距离衰减,远离光源会暗一些。现实世界里,光强度反比于物体和光源距离的平方。
  130. ![](https://cdn.nlark.com/yuque/__latex/c5c38b7a44caacb0bedf5bb0832aab0e.svg#card=math&code=%5CLarge%20%5Cfrac%20%7B%20i%20_%20%7B%201%20%7D%20%7D%20%7B%20i%20_%20%7B%202%20%7D%20%7D%20%3D%20%5Cfrac%20%7B%20d%20_%20%7B%202%20%7D%20%5E%20%7B%202%20%7D%20%7D%20%7B%20d%20_%20%7B%201%20%7D%20%5E%20%7B%202%20%7D%20%7D%EF%BC%8Ci%E4%B8%BA%E5%85%89%E5%BC%BA%EF%BC%8Cd%E4%B8%BA%E8%B7%9D%E7%A6%BB%E3%80%82&height=70&width=317)
  131. 实际操作中并不方便,我们常用下面这个模型代替:
  132. ![](https://cdn.nlark.com/yuque/__latex/26a964efe3e920767ac9195f0aa84209.svg#card=math&code=%5CLarge%20%E8%A1%B0%E5%87%8F%E7%B3%BB%E6%95%B0i%28d%29%3D%5Cleft%5C%7B%5Cbegin%7Bmatrix%7D%0A%20%201%2C%20%20%26%20%20d%5Cle%20d_%7Bmin%7D%20%5C%5C%0A%20%20%5Cfrac%20%7B%20d%20_%20%7B%20%5Cmax%20%7D%20-%20d%20%7D%20%7B%20d%20_%20%7B%20%5Cmax%20%7D%20-%20d%20_%20%7B%20%5Cmin%20%7D%20%7D%2C%20%20%26%20%20d_%7Bmin%7D%5Cle%20d%5Cle%20d_%7Bmax%7D%5C%5C%0A%20%200%2C%26%20%20d%20%5Cge%20d_%7Bmax%7D%0A%5Cend%7Bmatrix%7D%5Cright.&height=103&width=477)
  133. 光射出后:<br />在![](https://cdn.nlark.com/yuque/__latex/ab886ae01299a414458f6ba35dccb8fb.svg#card=math&code=%5Clarge%20d_%7Bmin%7D&height=20&width=38)内,光强不会衰减,<br />在![](https://cdn.nlark.com/yuque/__latex/ad2114c97fada6b7885a5780f1b3d39e.svg#card=math&code=%5Clarge%20%5Bd_%7Bmin%7D%2Cd_%7Bmax%7D%5D&height=24&width=99)间,光强衰减至0,<br />在![](https://cdn.nlark.com/yuque/__latex/5ed7e6d15e831aaf43a0d89ea113eeaa.svg#card=math&code=%5Clarge%20d_%7Bmax%7D&height=20&width=41)外,光强一律为0。
  134. 适用于点光源,聚光灯。环境光,平行光没有衰减。
  135. <a name="IQ3LF"></a>
  136. ## 5、光照_光照方程
  137. <a name="qOjEX"></a>
  138. ### 单光源标准光照方程
  139. ![](https://cdn.nlark.com/yuque/__latex/0daa9d4843e3a00978b6ad9a9a6b8e38.svg#card=math&code=%5CLarge%20%5Cbegin%7Barray%7D%7Bl%7D%0A%0Ac%20_%20%7B%20l%20i%20t%20%7D%20%26%3D%20c%20_%20%7B%20s%20p%20e%20c%20%7D%20%2B%20c%20_%20%7B%20d%20i%20f%20f%20%7D%20%2B%20c%20_%20%7B%20a%20m%20b%20%7D%20%5C%5C%0A%26%3Di%28max%28n%5Ccdot%20h%2C0%29%5E%7Bm_%7Bgls%7D%7Ds_%7Bspec%7D%5Cotimes%20m_%7Bspec%7D%20%2Bmax%28n%5Ccdot%20l%2C0%29s_%7Bdiff%7D%5Cotimes%20m_%7Bdiff%7D%29%20%5C%5C%0A%0A%26%2Bg_%7Bamb%7D%5Cotimes%20m_%7Bamb%7D%0A%0A%5Cend%7Barray%7D&height=96&width=701)
  140. ![](https://cdn.nlark.com/yuque/__latex/6072c524393995d6b8382fb4dcc87b42.svg#card=math&code=%5CLarge%20C_%7Blit%7D&height=25&width=37):打开光照情况下计算的颜色值。<br />![](https://cdn.nlark.com/yuque/__latex/447e8a56b4e948a97fecd35b4b5a1fbf.svg#card=math&code=%5CLarge%20C_%7Bspec%7D&height=28&width=51):镜面反射分量<br />![](https://cdn.nlark.com/yuque/__latex/705b08c0d5647f1b19f01b051b9dd900.svg#card=math&code=%5CLarge%20C_%7Bdiff%7D&height=28&width=53):散射分量(漫反射分量)<br />![](https://cdn.nlark.com/yuque/__latex/79cccd411a43a14b24ac50abb7c11970.svg#card=math&code=%5CLarge%20C_%7Bamb%7D&height=25&width=51):环境光分量<br />![](https://cdn.nlark.com/yuque/__latex/a12351c5035c367eea7c4ecf08711884.svg#card=math&code=%5CLarge%20m_%7Bgls%7D&height=20&width=45)<br />为材料的光泽度,也称作Phong指数。它控制“亮斑”的范围(大小)<br />小的值带来大而平滑的光斑<br />大的值带来小而亮的光斑。<br />完全的反射面,如玻璃,有非常大的![](https://cdn.nlark.com/yuque/__latex/a12351c5035c367eea7c4ecf08711884.svg#card=math&code=%5CLarge%20m_%7Bgls%7D&height=20&width=45),只有反射光进入眼睛;<br />不完全的光反射面,如苹果的表面,有较大的亮斑。<br />![](https://cdn.nlark.com/yuque/__latex/da46d623d2e56ff705cf775acee26469.svg#card=math&code=%5CLarge%20m_%7Bspec%7D&height=20&width=55)<br />材料的反射颜色,对整个材料是一个不变的灰度值。控制“光斑”的强度。<br />强反射面,值越大,粗糙一些,值越小。<br />可以用“光泽图”控制物体的反射,犹如纹理控制物体颜色。<br />![](https://cdn.nlark.com/yuque/__latex/324fe47dd43d436e40bc6d5f3e396785.svg#card=math&code=%5CLarge%20s_%7Bspec%7D&height=20&width=45)<br />光源的镜面反射颜色,控制光本身的色彩与强度。常等于光的漫反射颜色![](https://cdn.nlark.com/yuque/__latex/2f14ea235091b589d08372f24cf60aa5.svg#card=math&code=%5CLarge%20s_%7Bdiff%7D&height=21&width=47)<br />![](https://cdn.nlark.com/yuque/__latex/34f028dc930e4a5f779f0cf6b229916c.svg#card=math&code=%5CLarge%20n&height=14&width=14):表面法向量<br />![](https://cdn.nlark.com/yuque/__latex/a62dafd8d53b93f9d689337f6494a9fc.svg#card=math&code=%5CLarge%20l&height=20&width=7):指向光源的单位向量<br />![](https://cdn.nlark.com/yuque/__latex/8bd41168a967ed72184411ec8361d874.svg#card=math&code=%5CLarge%20m_%7Bdiff%7D&height=21&width=57):材料的散射色,即多数人认同的物体颜色。材质多来自纹理图.。<br />![](https://cdn.nlark.com/yuque/__latex/2f14ea235091b589d08372f24cf60aa5.svg#card=math&code=%5CLarge%20s_%7Bdiff%7D&height=21&width=47):光源散射色,一般和光源镜面色![](https://cdn.nlark.com/yuque/__latex/324fe47dd43d436e40bc6d5f3e396785.svg#card=math&code=%5CLarge%20s_%7Bspec%7D&height=20&width=45)一致。与镜面反射类似,这里也要防止点积出现负值,免得物体从背后透光。<br />![](https://cdn.nlark.com/yuque/__latex/12b9422463d9d233b5001f7241b3563f.svg#card=math&code=%20%5CLarge%20m_%7Bamb%7D&height=18&width=55):材质的环境光分量,它总是等于漫反射分量—— 由纹理图定义。<br />![](https://cdn.nlark.com/yuque/__latex/ad2a440baf6d2ab9914b7d239391f071.svg#card=math&code=%5CLarge%20g_%7Bamb%7D&height=20&width=45):整个场景的环境光值。<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/461452/1608460953301-2b3d2284-13ef-44bf-8bc9-c554f5821925.png#align=left&display=inline&height=266&margin=%5Bobject%20Object%5D&name=image.png&originHeight=449&originWidth=1224&size=211290&status=done&style=none&width=724)<br />耳朵与鼻子一样亮,其实它本应该在头部的影子中。这是采用局部光照的结果,要计算阴影,必须考虑其他高级技术,影子涉及全局光照。<br />前两幅图中,因为没有环境光,头背向光源的部分为全黑。若想照亮物体的“背向”部分,必须使用环境光;或者在场景中设置更多的光源,使得所有面都能被直接照亮。<br />当只有环境光时,只能看出轮廓。光照是使物体呈现“ 3D” 外观的重要武器,为了避免这种“卡通”效果,我们可以使用足够多的光源使场景中的所有表面都能被直接照亮。
  141. <a name="zDgAA"></a>
  142. ### 多光源标准光照方程
  143. ![](https://cdn.nlark.com/yuque/__latex/c3e5b0a7265760c0fd99b3338819ff21.svg#card=math&code=%5CLarge%20%5Cbegin%7Barray%7D%7Bl%7D%0A%0Ac%20_%20%7B%20l%20i%20t%20%7D%20%26%3D%20%5Csum_%7Bj%3D1%7D%5E%7Bn%7D%28c%20_%20%7B%20j_%7Bs%20p%20e%20c%7D%20%7D%20%2B%20c%20_%20%7B%20j_%7Bd%20i%20f%20f%7D%20%7D%29%20%2B%20c%20_%20%7B%20a%20m%20b%20%7D%20%5C%5C%20%5C%5C%0A%0A%26%3D%5Csum_%7Bj%3D1%7D%5E%7Bn%7D%20i_j%28max%28n%5Ccdot%20h_j%2C0%29%5E%7Bm_%7Bgls%7D%7Ds_%7Bj_%7Bspec%7D%7D%5Cotimes%20m_%7Bspec%7D%20%2Bmax%28n%5Ccdot%20l_j%2C0%29s_%7Bj_%7Bdiff%7D%7D%5Cotimes%20m_%7Bdiff%7D%29%20%5C%5C%0A%0A%26%2Bg_%7Bamb%7D%5Cotimes%20m_%7Bamb%7D%0A%0A%0A%5Cend%7Barray%7D%0A&height=132&width=796)
  144. 环境光只有一个,所以不做求和。
  145. ![](https://cdn.nlark.com/yuque/__latex/6072c524393995d6b8382fb4dcc87b42.svg#card=math&code=%5CLarge%20C_%7Blit%7D&height=25&width=37):打开光照情况下计算的颜色值。<br />![](https://cdn.nlark.com/yuque/__latex/447e8a56b4e948a97fecd35b4b5a1fbf.svg#card=math&code=%5CLarge%20C_%7Bspec%7D&height=28&width=51):镜面反射分量<br />![](https://cdn.nlark.com/yuque/__latex/705b08c0d5647f1b19f01b051b9dd900.svg#card=math&code=%5CLarge%20C_%7Bdiff%7D&height=28&width=53):散射分量(漫反射分量)<br />![](https://cdn.nlark.com/yuque/__latex/79cccd411a43a14b24ac50abb7c11970.svg#card=math&code=%5CLarge%20C_%7Bamb%7D&height=25&width=51):环境光分量<br />![](https://cdn.nlark.com/yuque/__latex/a12351c5035c367eea7c4ecf08711884.svg#card=math&code=%5CLarge%20m_%7Bgls%7D&height=20&width=45)<br />为材料的光泽度,也称作Phong指数。它控制“亮斑”的范围(大小)<br />小的值带来大而平滑的光斑<br />大的值带来小而亮的光斑。<br />完全的反射面,如玻璃,有非常大的![](https://cdn.nlark.com/yuque/__latex/a12351c5035c367eea7c4ecf08711884.svg#card=math&code=%5CLarge%20m_%7Bgls%7D&height=20&width=45),只有反射光进入眼睛;<br />不完全的光反射面,如苹果的表面,有较大的亮斑。<br />![](https://cdn.nlark.com/yuque/__latex/da46d623d2e56ff705cf775acee26469.svg#card=math&code=%5CLarge%20m_%7Bspec%7D&height=20&width=55)<br />材料的反射颜色,对整个材料是一个不变的灰度值。控制“光斑”的强度。<br />强反射面,值越大,粗糙一些,值越小。<br />可以用“光泽图”控制物体的反射,犹如纹理控制物体颜色。<br />![](https://cdn.nlark.com/yuque/__latex/324fe47dd43d436e40bc6d5f3e396785.svg#card=math&code=%5CLarge%20s_%7Bspec%7D&height=20&width=45)<br />光源的镜面反射颜色,控制光本身的色彩与强度。常等于光的漫反射颜色![](https://cdn.nlark.com/yuque/__latex/2f14ea235091b589d08372f24cf60aa5.svg#card=math&code=%5CLarge%20s_%7Bdiff%7D&height=21&width=47)<br />![](https://cdn.nlark.com/yuque/__latex/34f028dc930e4a5f779f0cf6b229916c.svg#card=math&code=%5CLarge%20n&height=14&width=14):表面法向量<br />![](https://cdn.nlark.com/yuque/__latex/a62dafd8d53b93f9d689337f6494a9fc.svg#card=math&code=%5CLarge%20l&height=20&width=7):指向光源的单位向量<br />![](https://cdn.nlark.com/yuque/__latex/8bd41168a967ed72184411ec8361d874.svg#card=math&code=%5CLarge%20m_%7Bdiff%7D&height=21&width=57):材料的散射色,即多数人认同的物体颜色。材质多来自纹理图.。<br />![](https://cdn.nlark.com/yuque/__latex/2f14ea235091b589d08372f24cf60aa5.svg#card=math&code=%5CLarge%20s_%7Bdiff%7D&height=21&width=47):光源散射色,一般和光源镜面色![](https://cdn.nlark.com/yuque/__latex/324fe47dd43d436e40bc6d5f3e396785.svg#card=math&code=%5CLarge%20s_%7Bspec%7D&height=20&width=45)一致。与镜面反射类似,这里也要防止点积出现负值,免得物体从背后透光。<br />![](https://cdn.nlark.com/yuque/__latex/12b9422463d9d233b5001f7241b3563f.svg#card=math&code=%20%5CLarge%20m_%7Bamb%7D&height=18&width=55):材质的环境光分量,它总是等于漫反射分量——由纹理图定义。<br />![](https://cdn.nlark.com/yuque/__latex/ad2a440baf6d2ab9914b7d239391f071.svg#card=math&code=%5CLarge%20g_%7Bamb%7D&height=20&width=45):整个场景的环境光值。
  146. <a name="khD9a"></a>
  147. ## 6、顶点级光照计算方程
  148. 在当前图硬件渲染中,一般采用Gourand着色,即逐顶点计算光照。
  149. 上面多光源标准光照方程进行修改,材质的环境光分量可以由纹理图定义,所以可以假设:
  150. ![](https://cdn.nlark.com/yuque/__latex/472bb6195fecbaade3b5298e465a89c3.svg#card=math&code=%5CLarge%20m_%7Bamb%7D%3Dm_%7Bdiff%7D&height=21&width=144)
  151. 可得逐顶点光照计算方程:<br />![](https://cdn.nlark.com/yuque/__latex/229b8c7c832f7c8d31ba3a377645276e.svg#card=math&code=%5CLarge%20%5Cbegin%7Barray%7D%7Bl%7D%0A%0Ac%20_%20%7B%20l%20i%20t%20%7D%20%26%3D%20%5Csum_%7Bj%3D1%7D%5E%7Bn%7D%28c%20_%20%7B%20j_%7Bs%20p%20e%20c%7D%20%7D%20%2B%20c%20_%20%7B%20j_%7Bd%20i%20f%20f%7D%20%7D%29%20%2B%20c%20_%20%7B%20a%20m%20b%20%7D%20%5C%5C%20%5C%5C%0A%0A%26%3D%5Csum_%7Bj%3D1%7D%5E%7Bn%7D%20i_j%28max%28n%5Ccdot%20h_j%2C0%29%5E%7Bm_%7Bgls%7D%7Ds_%7Bj_%7Bspec%7D%7D%5Cotimes%20m_%7Bspec%7D%20%2Bmax%28n%5Ccdot%20l_j%2C0%29s_%7Bj_%7Bdiff%7D%7D%5Cotimes%20m_%7Bdiff%7D%29%20%5C%5C%0A%0A%26%2Bg_%7Bamb%7D%5Cotimes%20m_%7Bamb%7D%20%5C%5C%20%5C%5C%0A%0A%26%3D%5Csum_%7Bj%3D1%7D%5E%7Bn%7D%20i_j%28max%28n%5Ccdot%20h_j%2C0%29%5E%7Bm_%7Bgls%7D%7Ds_%7Bj_%7Bspec%7D%7D%29%5Cotimes%20m_%7Bspec%7D%20%2B%5Csum_%7Bj%3D1%7D%5E%7Bn%7D%20i_j%28max%28n%5Ccdot%20l_j%2C0%29s_%7Bj_%7Bdiff%7D%7D%29%5Cotimes%20m_%7Bdiff%7D%20%5C%5C%0A%26%2Bg_%7Bamb%7D%5Cotimes%20m_%7Bamb%7D%20%20%5C%5C%20%5C%5C%0A%0A%26%3D%5Csum_%7Bj%3D1%7D%5E%7Bn%7D%20i_j%28max%28n%5Ccdot%20h_j%2C0%29%5E%7Bm_%7Bgls%7D%7Ds_%7Bj_%7Bspec%7D%7D%29%5Cotimes%20m_%7Bspec%7D%2B%5Csum_%7Bj%3D1%7D%5E%7Bn%7D%20i_j%28max%28n%5Ccdot%20l_j%2C0%29s_%7Bj_%7Bdiff%7D%7D%29%5Cotimes%20m_%7Bdiff%7D%20%5C%5C%0A%26%2Bg_%7Bamb%7D%5Cotimes%20%5Ccolor%7Bred%7D%7Bm_%7Bdiff%7D%7D%20%20%5C%5C%20%5C%5C%0A%0A%26%3D%5Csum_%7Bj%3D1%7D%5E%7Bn%7D%20i_j%28max%28n%5Ccdot%20h_j%2C0%29%5E%7Bm_%7Bgls%7D%7Ds_%7Bj_%7Bspec%7D%7D%29%5Cotimes%20m_%7Bspec%7D%20%5C%5C%0A%26%2B%5Csum_%7Bj%3D1%7D%5E%7Bn%7D%20i_j%28max%28n%5Ccdot%20l_j%2C0%29s_%7Bj_%7Bdiff%7D%7D%2Bg_%7Bamb%7D%29%5Cotimes%20m_%7Bdiff%7D%20%5C%5C%20%5C%5C%0A%0A%0A%0A%5Cend%7Barray%7D%0A&height=470&width=894)<br />![](https://cdn.nlark.com/yuque/__latex/09296b956694517de23cf9bc72b0dc6b.svg#card=math&code=%5Cbegin%7Barray%7D%7Bl%7D%0A%E4%BB%A4%EF%BC%9A%20%5C%5C%0A%5CLarge%20v_%7Bdiff%7D%3D%5Csum_%7Bj%3D1%7D%5E%7Bn%7D%20i_j%28max%28n%5Ccdot%20l_j%2C0%29s_%7Bj_%7Bdiff%7D%7D%2Bg_%7Bamb%7D%29%EF%BC%8C%20%5C%5C%20%5C%5C%0A%5CLarge%20v_%7Bspec%7D%3D%5Csum_%7Bj%3D1%7D%5E%7Bn%7D%20i_j%28max%28n%5Ccdot%20h_j%2C0%29%5E%7Bm_%7Bgls%7D%7Ds_%7Bj_%7Bspec%7D%7D%29%20%5C%5C%20%5C%5C%0A%E5%88%99%E5%85%AC%E5%BC%8F%E7%AE%80%E5%8C%96%E4%B8%BA%EF%BC%9A%20%E4%BD%BF%E7%94%A8%E6%8F%92%E5%80%BC%E5%85%89%E7%85%A7%E8%AE%A1%E7%AE%97%E5%83%8F%E7%B4%A0%E7%9A%84%E7%9D%80%E8%89%B2%5C%5C%0A%5CLarge%20c_%7Blit%7D%3Dv_%7Bdiff%7D%5Cotimes%20m_%7Bdiff%7D%2Bv_%7Bspec%7D%5Cotimes%20m_%7Bspec%7D%20%5C%5C%20%0A%5CLarge%20v_%7Bdiff%7D%EF%BC%9A%E9%A1%B6%E7%82%B9%E7%BA%A7%E6%BC%AB%E5%8F%8D%E5%B0%84%E5%80%BC%5C%5C%0A%5CLarge%20v_%7Bspec%7D%EF%BC%9A%E9%A1%B6%E7%82%B9%E7%BA%A7%E9%95%9C%E9%9D%A2%E5%8F%8D%E5%B0%84%E5%80%BC%20%5C%5C%0A%5CLarge%20m_%7Bspec%7D%EF%BC%9A%E4%B8%BA%E5%B8%B8%E9%87%8F%EF%BC%8C%E4%B9%9F%E5%8F%AF%E4%BB%A5%E7%94%B1%E5%85%89%E6%B3%BD%E5%9B%BE%E5%AE%9A%E4%B9%89%E3%80%82%0A%5Cend%7Barray%7D&height=317&width=469)
  152. 计算光照的坐标系不做限制,只要是在同一个坐标系中即可。
  153. 可以在世界空间中执行,将顶点、法向量变换到世界空间进行光照计算,然后将顶点变换到裁剪空间。
  154. 可以考虑将光照放在模型空间中计算,因为光总比顶点数少,将光变换到模型空间中,总比顶点变换的计算量少。
  155. 还可以在摄像机空间中计算,如果不通过顶点着色直接控制![](https://cdn.nlark.com/yuque/__latex/d21c27773d2d7871c219b20ddb04ddf0.svg#card=math&code=%5Clarge%20T%20%5C%26%20L&height=18&width=43)通道,API会默认做这个选择。
  156. <a name="G1QcG"></a>
  157. ## 7、雾化
  158. 现实中,光线被空气中无数粒子反射与折射。如果单位体积内粒子的浓度足够,则它们是可见的,例如烟、灰尘、雾等。计算机图形学中,上述现象都是通过雾化技术加以模拟的。<br />想像我们正在注视远处的物体,眼睛与物体间的光线受到大晴粒子的扰动。一些原来直线传播无法进入眼睛的光线,被那些粒子反射而进入眼睛,这就是我们“看到”空气中粒子的原因。最后的视觉效果上,物体的颜色向雾的颜色偏移,粒子越多,偏移越大。<br />雾浓度:![](https://cdn.nlark.com/yuque/__latex/ad16c86ad79864b091772d5d15937c3a.svg#card=math&code=%5Clarge%20%5B0%2C1%5D&height=24&width=40),0无雾化,1完全雾化,这是只有雾的颜色。最终颜色由雾颜色和物体颜色线性插值。
  159. 雾浓度计算公式如下:<br />![](https://cdn.nlark.com/yuque/__latex/de2c266c21e7d5973f78c4e5df849cfb.svg#card=math&code=%5CLarge%20f%20%28%20d%20%29%20%3D%20%5Cleft%5C%7B%20%5Cbegin%7Barray%7D%20%7B%20l%20l%20%7D%20%7B%200%20%2C%20%7D%20%26%20%7B%20d%20%5Cleq%20d%20_%20%7B%20%5Cmin%20%7D%EF%BC%8C%E6%97%A0%E9%9B%BE%E5%8C%96%20%7D%20%5C%5C%20%7B%20%5Cfrac%20%7B%20d%20-%20d%20_%20%7B%20%5Cmin%20%7D%20%7D%20%7B%20d%20_%20%7B%20%5Cmax%20%7D%20-%20d%20_%20%7B%20%5Cmin%20%7D%20%7D%20%2C%20%7D%20%26%20%7B%20d%20_%20%7B%20%5Cmin%20%7D%20%3C%20d%20%3C%20d%20_%20%7B%20%5Cmax%20%7D%20%7D%20%5C%5C%20%7B%201%20%2C%20%7D%20%26%20%7B%20d%20%5Cgeq%20d%20_%20%7B%20%5Cmax%20%7D%EF%BC%8C%E5%AE%8C%E5%85%A8%E9%9B%BE%E5%8C%96%7D%20%5Cend%7Barray%7D%20%5Cright.&height=118&width=424)<br />![](https://cdn.nlark.com/yuque/__latex/f1a6b5c3a54418ad041389e1a549506c.svg#card=math&code=d%E4%B8%BA%E7%9C%BC%E7%9D%9B%E5%88%B0%E7%89%A9%E4%BD%93%E7%9A%84%E8%B7%9D%E7%A6%BB%E3%80%82d_%7Bmin%7D%E6%9C%80%E5%B0%8F%E9%9B%BE%E5%8C%96%E8%B7%9D%E7%A6%BB%EF%BC%8Cd_%7Bmax%E6%9C%80%E5%A4%A7%E9%9B%BE%E5%8C%96%E8%B7%9D%E7%A6%BB&height=24&width=436)
  160. **注意**:
  161. - 上述公式假设雾是均匀的,实践中一般都不是,一般下方的雾更浓。
  162. - 距离的定义是可变,当然,可以用欧式距离,得到球状雾效果,但需要做开方运算。有一种简化是以摄像机空间深度Z为距离,从而得到线性雾。它的优点是速度快,但有一个恼人的副作用,某一点的雾浓度可能因摄像机朝向的不同而改变,现实世界中这是不可能的。
  163. 得到雾浓度,就可以通过与物体颜色线性插值,计算最终颜色:
  164. ![](https://cdn.nlark.com/yuque/__latex/180fac9847414d57a9544975d28599ca.svg#card=math&code=%5CLarge%20c_%7Bfogged%7D%3Dc_%7Blit%7D%2Bf%28g_%7Bfog%7D-c_%7Blit%7D%29&height=31&width=288)
  165. - ![](https://cdn.nlark.com/yuque/__latex/a8e5abf4ef05bcacbc5aae8d9cccd732.svg#card=math&code=%5CLarge%20c_%7Blit%7D&height=18&width=29)为计算光照后的物体表面颜色
  166. - ![](https://cdn.nlark.com/yuque/__latex/f5f62dc40b9927003649831f452b8f71.svg#card=math&code=%5CLarge%20f&height=26&width=13)为上面公式计算出的雾浓度
  167. - ![](https://cdn.nlark.com/yuque/__latex/0b4140be4134a11bb8bf76596a60cd0c.svg#card=math&code=%5CLarge%20g_%7Bfogged%7D&height=23&width=65)为全局雾颜色
  168. - ![](https://cdn.nlark.com/yuque/__latex/f611d18ea457c7ffac65bb2f6b3d12dc.svg#card=math&code=%5CLarge%20c_%7Bfogged%7D&height=21&width=64)为最终结果
  169. 必须向API提供以下说明:
  170. - 开启雾化
  171. - 雾的颜色![](https://cdn.nlark.com/yuque/__latex/f611d18ea457c7ffac65bb2f6b3d12dc.svg#card=math&code=%5CLarge%20c_%7Bfogged%7D&height=21&width=64)
  172. - 雾化距离,![](https://cdn.nlark.com/yuque/__latex/df012bb086de5a51dc426cfd7df699a4.svg#card=math&code=%5CLarge%20d_%7Bmin%7D%E3%80%81d_%7Bmax%7D&height=35&width=117)
  173. <a name="w17dW"></a>
  174. ## 8、flat着色与Gourand着色
  175. - **Phong着色**
  176. - 若渲染速度并不重要,我们可以逐像素地计算光照和雾化。
  177. - 和镜面反射的Phong模型不是一回事。
  178. - 计算量巨大,非常慢。
  179. - **flat着色**
  180. - 逐多边形着色
  181. - 对整个三角形只计算一次光照值。计算位置是“三角形中心”
  182. - **Gourand着色**
  183. - 逐顶点着色,插值着色
  184. - 在顶点级计算光照和雾,然后这些值被线性插值用于整个多边形面。
  185. - 最常用的方法
  186. ![image.png](https://cdn.nlark.com/yuque/0/2020/png/461452/1608463815987-bc16adab-88fb-420d-9c42-072c262fe162.png#align=left&display=inline&height=227&margin=%5Bobject%20Object%5D&name=image.png&originHeight=408&originWidth=1288&size=274709&status=done&style=none&width=718)<br />显然Gourand效果更好。
  187. <a name="f9Xfl"></a>
  188. # 四、缓存
  189. 渲染涉及大量的缓存,这里指的是存有像素数据的矩形内存块。最重要的缓存是:
  190. - **帧缓存**,frame buffer
  191. - **深度缓存**,z-buffer
  192. <a name="MGYMo"></a>
  193. ## 帧缓存
  194. 存储渲染后的图像,一般在显存中,显卡不断读取该内存,将二进制数据转化为CRT接收的合适信号。<br />**
  195. - **双缓存技术**
  196. - **显示缓存**
  197. - 存储当前显示的图像
  198. - **离线缓存**
  199. - 存储正在渲染的图像
  200. - **目的**
  201. - 是为了防止图像在未完全渲染好之前就被显示。
  202. - **切换技术**
  203. - 页切换:离线缓存的图像渲染完成,即对调这个两个缓存的身份。
  204. - 拷贝复制:将离线缓存复制到显示缓存。
  205. 以下是页切换技术工作原理:<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/461452/1608190149687-165bc14f-c1df-449b-a353-dbe49d1b6eff.png#align=left&display=inline&height=207&margin=%5Bobject%20Object%5D&name=image.png&originHeight=413&originWidth=605&size=169198&status=done&style=none&width=302.5)
  206. <a name="tyiRg"></a>
  207. ## 深度缓存
  208. 存储每个像素的深度信息,该信息有很多不同变体,但基本都是反映物体到摄像机的距离。实际应用中,一般保存裁剪空间中的z坐标,因此叫z-buffer。<br />作用是用于计算物体间的遮挡关系,

// —————— 起始阶段 for (all pixel in zBuffer){ pixel = 1.0 ; \ 裁剪坐标中,1.0表示无穷远点。第一批像素才能通过深度测试 }

// —————— 循环渲染阶段 for{all pixelFrame in frameBuffer}{

  1. GLInt newZ = calcZ(pixelFrame); // 计算像素的插值深度

GLInt oldZ = getZ(pixelFrame, zBuffer); // 获取该像素对应的深度缓存中的深度值

if(oldZ > newZ){ // 新的深度比现有值离摄像机更近,替换现有值 updateZ(newZ, pixelFrame, zBuffer); }

}

  1. <a name="1PcLW"></a>
  2. # 五、纹理映射
  3. 物体外观不限于形状,还有表面的颜色图案(纹理),实现方法就是纹理映射(texture mapping)。
  4. **纹理图**:铺在物体表面的位图。<br />**纹理像素**:纹理图上的一个像素,简称纹素,texel。
  5. 纹理映射是在纹素级别控制颜色,优于在顶点/三角形级别控制物体颜色。<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/461452/1608193293663-35a69165-7ba9-40e5-8af4-b89947d92d57.png#align=left&display=inline&height=370&margin=%5Bobject%20Object%5D&name=image.png&originHeight=474&originWidth=852&size=266767&status=done&style=none&width=665)
  6. - 如何将纹理图包裹在物体上?
  7. - 技术
  8. - 平面映射:将纹理投射到三角网格。
  9. - 球形映射
  10. - 柱形映射
  11. - 立方体映射
  12. - 实际应用
  13. - 3D Studio Max完成建模工作。
  14. 纹理映射坐标<br />位图上的2D笛卡尔坐标。<br />![](https://cdn.nlark.com/yuque/__latex/5e2318b30b84f12bb171866e19689b77.svg#card=math&code=%28u%2Cv%29%2C0%20%5Cle%20u%2Cv%20%5Cle%201&height=20&width=132),防止与渲染坐标![](https://cdn.nlark.com/yuque/__latex/848432cc85101be32865f4b349091d12.svg#card=math&code=x%E3%80%81y&height=24&width=33)混淆。<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/461452/1608193805104-a65efb27-82d2-4105-a82d-21362d51eebf.png#align=left&display=inline&height=421&margin=%5Bobject%20Object%5D&name=image.png&originHeight=507&originWidth=491&size=144260&status=done&style=none&width=408)<br />上图纹理包裹了头部的一半(鼻子到后脑中线),另一半就是镜像。<br />图中的纹理坐标的原点在左上角,类似于硬件访问的方式,原点也可以在左下角。
  15. 纹理不需要“连续”包裹几何体,因为每个三角形都独立映射,纹理的任意部分可以映射到物体任意部分。<br />如果不使用“连续”映射,且映射坐标存在顶点级,纹理交界处对应的顶点坐标是双份的 。
  16. 每个顶点都有纹理坐标![](https://cdn.nlark.com/yuque/__latex/9093cc72d2d40694b9361424cb0a6803.svg#card=math&code=%28u%2Cv%29&height=20&width=38),纹理被“钉”在三角网上,要渲染三角形内的某个像素,先插值计算该点的![](https://cdn.nlark.com/yuque/__latex/9093cc72d2d40694b9361424cb0a6803.svg#card=math&code=%28u%2Cv%29&height=20&width=38)坐标,然后读取对应的纹理像素值。
  17. <a name="XjNz9"></a>
  18. # 六、几何体的生成与提交
  19. 一旦知道哪些物体可见(至少潜在可见),即可将其生成并提交到图形处理器。该阶段完成以下任务:
  20. - 细节层次(LOD)选择
  21. - 渐进式生成几何体
  22. - 向图形API提交数据
  23. <a name="VNrxU"></a>
  24. ## LOD选择、渐进生成
  25. 一般我们希望以最大可能的三角形数量描绘物体以求得最佳的视觉效果,但不幸的是,较多的三角形一般意味着低帧率。我们必须在可接受的外表和帧率间做出折衷选择。LOD在一定程度上可两全其美,基本思路是离摄像机远的物体只使用较少的多边形,此时并不降低视觉效果。
  26. - 如何得到三角形数量较少的三角网?
  27. - 美工制作(人工)
  28. - 然后根据物体离摄像机的远近(或屏幕分辨率大小)选用合适的LOD,问题是就在它由远及近改变的那一刻,这种方法会有一种“跳动效果”。当然,我们希望把这种视觉上的不连续降低到最低限度—— 好的三角网也许会有更大帮助。
  29. - 一种克服“跳动”的方法是引入连续LOD。这种系统中,不同级别LOD包含的三角形数目几乎是连续的:我们可以产生任意多三角形的网格。渐进式网格技术就是一种这样的“网格消减''技术。但需要注意生成连续LOD的开支可能会很显著。而使用离散LOD,网格是现成可用的,渲染时可立即投送;我们所要做的就是决定用哪个网格。所以,也许即使实际的网格是用网格消减技术生成的,离散LOD还是在实践中经常使用。
  30. - 计算机建模
  31. - 有时候几何体并非由美工创建,而是由计算机生成,这称为程序建模。分形地形图是程序建模的好例子,植物也可以自动创建。有时LOD也用在此类建模算法中。
  32. <a name="jmbCl"></a>
  33. ## 向API投送几何体
  34. 不论几何数据从哪儿来,最后还是要送往渲染API处理,那应该用哪种格式?
  35. 多数API希望三角网格输入(三个三角形、索引三角网格、三角带、三角扇)。
  36. API本质上是需要顶点数据,三角形是顶点的合适连接方式,不需要超过三角形级别的数据。
  37. 根据API的不同,顶点的数据一般有:
  38. - **位置**
  39. - 2D屏幕坐标+深度信息
  40. - 3D坐标(3D向量)
  41. - 需要用模型、视图变换向屏幕映射。
  42. - 若干“骨头”组成
  43. - 骨骼动画中的高级技术**skining**
  44. - **光照和雾化**
  45. - 光照
  46. - 顶点本身带有色彩值,插值计算三角形内个点的颜色(RGB+alpha)。
  47. - 可手动指定值,API计算值(需要顶点法向量)。
  48. - 雾化
  49. - 指定个点的雾化程度,可以手动指定或API计算。
  50. - **纹理映射坐标**
  51. - 每个顶点必须要有。
  52. - 单一纹理:![](https://cdn.nlark.com/yuque/__latex/9093cc72d2d40694b9361424cb0a6803.svg#card=math&code=%28u%2Cv%29&height=20&width=38)2D坐标。
  53. - 多重纹理:每个纹理对应一个坐标。
  54. - 阶段式生成纹理(向表面投射一道光线)。
  55. - “阶段性”拷贝纹理坐标。
  56. 综上,顶点数据并没有一个固定格式。
  57. ```cpp
  58. // 最常见的3D坐标:表面法向量 + 纹理映射坐标。
  59. // 未变换,没有光照的顶点。
  60. struct RenderVertex{
  61. Vector3 p; // 坐标
  62. Vector3 n: // 法向量,API计算光照值时需要。
  63. float u, v; // 纹理映射坐标
  64. }
  65. // 用来显示2D物体/HUD(head up display)
  66. // 屏幕坐标 + 预定义光照
  67. // 变换后,有光照顶点
  68. struct RendervertexTL{ // T:transfrom变换
  69. // L:lighting光照
  70. Vector3 p; // 屏幕坐标和深度
  71. float w; // 1/z
  72. unsigned argb; // 漫反射
  73. unsigned spec; // 镜面反射
  74. float u,v; // 纹理坐标
  75. }
  76. // 3D坐标,自带预定义光照,常见于特效(爆炸、火焰、发光物)
  77. // 未变换,有光照的顶点
  78. struct RenderVertexL{
  79. Vector3 p; // 坐标
  80. unsigned argb; // 漫反射
  81. unsigned spec; // 镜面反射
  82. float u, v; // 纹理映射坐标
  83. }

七、变换和光照

变换

模型空间坐标变换到裁剪空间坐标,通过矩阵乘法进行变换。

3D基础_图形管道 - 图1

矩阵乘法结果可提前计算好,无需每次循环计算。

3D基础_图形管道 - 图2

3D基础_图形管道 - 图3

如果能够访问T&L硬件(顶点着色),则可直接施加精确的控制。

顶点光照

image.png
image.png
image.png
image.png

八、背面剔除与裁剪

背面剔除(culling)

去除背对摄像机的三角形(屏幕上看不到的物体的部分),节省性能,提高效率。
理论上有一半的背向三角形,实践中有少于一半的三角形被剔除。
探测背向三角形方法有两种:

方法一:法向量

image.png
3D基础_图形管道 - 图9

一般用于软件渲染,在三角级信息中存储计算好的法向量,问题在于加大了向图形硬件传输数据量(法向量数据),在现在的图形硬件上,一般不使用这种方法,而是判断三角形顶点顺序。

方法二:顶点顺序

image.png
在这里我们约定,从前面看,三角形顶点顺序为顺时针,于是可剔除逆时针顶点顺序的三角形。
我们可以通过API控制背面剔除规则来灵活应用,比如有些不要剔除物体背面,有些物体反转了,剔除规则也要反过来。

裁剪(cliping)

去除三角形不在视锥内的部分的过程,由硬件完成。

标准裁剪多边形算法:3D基础_图形管道 - 图11。大概过程就是,先将多边形分裂成小多边形,裁剪完,再组合起来。
对平面做多边形裁剪时,沿边遍历多边形,依次对每边进行裁剪。边的两个顶点要么在或不在平面内,所以总共有四种情况。每种情况产生0、1、2个输出点,如下图:
image.png
image.png

九、光栅化

在视锥内部的顶点投影到屏幕的坐标转化成屏幕上离散的像素的过程,算法非常复杂。好消息是,图形硬件会搞定这个过程。虽然我们不知道也不想知道硬件如何决定哪个像素属于哪个三角形,但是我们要了解输出的像素点会做什么事情:

  • 着色
    • 为像素计算颜色。先光照再雾化。颜色值有RGB和alpha值,后者用于混合(blending)。
  • 测试
    • 裁剪测试
      • 去除渲染窗口外的像素
    • 深度测试
    • alpha测试
      • 以alpha值为基准去除像素,比如“过于透明”的像素。
  • 写入
    • 通过测试,要写入帧缓存和更新深度缓存。
    • 深度缓存
      • 新深度值代替旧值。
    • 帧缓存
      • 没开启混合(blending),新值代替旧值
      • 开启混合,根据alpha值将新旧值混合。