连更两篇，冲鸭！

业余翻译，若有不周到之处，还请多多指教！

实时渲染（第四版）Real-Time Rendering (Fourth Edition)

第15章非真实感渲染 Chapter 15 Non-Photorealistic Rendering

15.3 笔触表面样式化 Stroke Surface Stylization

尽管卡通渲染是一种尝试笔触模拟的流行风格，但是也有无数其他风格可以应用于曲面上。效果的范围从修改逼真的纹理[905、969、973]到使算法从程序到帧地生成几何装饰[853、1126]。在本节中，我们简要地研究与实时渲染相关的技术。

Lake等人 [966]讨论了使用漫射着色项来选择在表面上使用哪种纹理。随着漫射项变暗，将使用具有较暗印象的纹理。将纹理与屏幕空间坐标一起应用以呈现手绘外观。为了进一步增强草绘外观，还在屏幕空间中将纸张纹理应用于所有表面。参见图15.20。这种算法的主要问题是会造成淋浴门效果（shower door effect），在动画过程中，对象看起来像是通过图案玻璃观看的。对象感觉好像它们在纹理中游动。Breslav等人 [196] 通过确定哪种图像变换最匹配某些基础模型位置的运动来维持纹理的二维外观。这样可以保持与填充图案基于屏幕的性质的连接，同时提供与对象的更牢固的连接。

图15.20. 通过使用纹理调色板，纸张纹理和轮廓边缘渲染生成的图像。(Reprinted by permission of Adam Lake and Carl Marshall, Intel Corporation, copyright Intel Corporation 2002.)

一种解决方案是显而易见的：将纹理直接应用于表面。挑战在于，基于笔触的纹理需要保持相对均匀的笔触厚度和密度，才能令人信服。如果纹理被放大，则描边显得太粗；如果缩小，则描边要么模糊不清，要么细而嘈杂（取决于是否使用了mipmapping）。Praun等人 [1442]提出了一种实时的方法，用于生成笔触纹理化的mipmap，并将其以平滑的方式应用于表面。这样做可以随着对象距离的变化保持屏幕上的笔画密度。第一步是形成要使用的纹理，称为色调艺术贴图（tonal art maps，TAM）。这是通过将笔触绘制到mipmap级别中来完成的。参见图15.21。克莱因等人 [905]在他们的“艺术贴图”中使用了一个相关的想法来维持NPR纹理的笔触大小。放置这些纹理后，可通过在每个顶点所需的色调之间进行插值来渲染模型。该技术产生具有手绘感觉的图像 [1441]。参见图15.22。

图15.21. 色调艺术贴图（tonal art maps，TAM）。笔触被绘制到mipmap级别中。每个mipmap级别包含从纹理到其左侧和上方的所有笔触。这样，在mip级别和相邻纹理之间的插值是平滑的。（图片由普林斯顿大学Emil Praun提供。）

图15.22. 使用色调艺术贴图（tonal art maps，TAM）渲染的两个模型。这些样例显示了用于渲染每个样例的重叠纹理图案。（图片由普林斯顿大学Emil Praun提供。）

Webb等人 [1858]提出了对TAM的两种扩展，它们提供了更好的结果，一种使用体积纹理（允许使用颜色），另一种使用阈值方案来改善抗锯齿。Nuebel [1291]提供了执行木炭笔触渲染的相关方法。他使用的噪声纹理也是沿一个轴从暗到亮，并且获取其强度值并沿该轴去访问纹理。Lee等人 [1009]使用TAM和其他技术生成用铅笔绘制的令人印象深刻的图像。

关于笔触，除了已经讨论过的操作以外，还可以进行许多其他操作。为了产生草图效果，边缘可能会抖动[317、972、1009]或超出其原始位置，如第651页的图15.1的右上和中下部图像所示。

Girshick等人 [538]讨论了沿表面上的主曲线方向线绘制笔触。即，从表面上的任何给定点开始，存在指向最大曲率方向的第一主方向（first principal Direction）切向量。第二主方向（second principal direction）是垂直于该第一个向量的切线向量，并给出曲面最小弯曲的方向。这些方向线对于曲面的感知非常重要。它们的优点还在于对于静态模型仅需要生成一次，因为这样的笔触与光照和阴影无关。Hertzmann和Zorin [726]讨论了如何清理和平滑主要方向。在将纹理应用于任意曲面，驱动模拟动画以及其他应用程序中，已经使用这些方向和其他数据进行了大量的研究和开发。可参见Vaxman等人的报告 [1814] 作为入门。

嫁接（graftals）的概念[372、853、1126]是可以根据需要向表面添加几何形状或贴花纹理，以产生特定的效果。可以通过所需的详细程度，表面相对于眼睛的方向或其他因素来控制它们。这些也可以用来模拟笔或画笔的笔触。图15.23中显示了一个示例。几何嫁接是程序建模的一种形式[407]。

图15.23. 斯坦福兔子有两种不同的嫁接风格。（图片由犹他大学的布鲁斯·古奇和马特·卡普兰提供）

本章仅涉及NPR研究采取的一些方向。有关更多信息，请参见末尾的“更多阅读和资源”部分。在该领域中，通常很少或根本没有基础上正确的答案，我们可以将其用作基本事实。这既是有问题的，又是开放的。技术可以在速度和质量以及实现成本之间进行权衡。在交互式渲染速率的时间紧迫的情况下，大多数方案都会在某些条件下进行折衷和抛弃。确定什么在您的应用程序中有效或足够好，这是使该领域成为一个引人入胜的挑战。

我们的大部分精力都集中在一个特定的主题上，即轮廓边缘检测和渲染。最后，我们将把注意力转向线条和文字。这两个非真实感的图元经常被使用，并且面临一些自身的挑战，因此值得单独介绍。

15.4 线 Lines

简单的实线“硬”线的渲染通常被认为相对没什么意思。但是，它们对于诸如CAD这样的领域很重要，因为它可以查看基本的模型刻面并识别对象的形状。它们在突出显示所选对象和技术插图等区域时也很有用。另外，所涉及的相关技术适用于其他问题。

15.4.1三角形边缘渲染 Triangle Edge Rendering

在实心三角形的顶部正确渲染边缘比第一次出现要困难。如果线条与三角形的位置完全相同，我们如何确保线条始终显示在最前面？一种简单的解决方案是使所有线条具有固定的偏差[724]。也就是说，每条线都比实际应有的距离稍微靠近一点，因此它将在表面上方。如果固定偏差太大，则会出现应隐藏的边缘部分，从而破坏效果。如果偏差太小，接近边缘的三角形表面可能会隐藏部分或全部边缘。如第15.2.2节所述，API调用（例如OpenGL的glPolygonOffset）可用于根据线的坡度向后移动线下方的曲面。此方法相当有效，但并非完美。

Herrell等人的方案[724]避免完全偏见。它使用一系列步骤来标记和清除模板缓冲区，以便将边缘正确绘制在三角形的顶部。这种方法对于除最小的三角形集之外的任何三角形都是不切实际的，因为必须分别绘制每个三角形并清除每个三角形的模板缓冲区，这使过程非常耗时。

Bærentzen等人[86，1295]提出了一种很好地映射到GPU的方法。他们使用像素着色器，该着色器使用三角形的重心坐标来确定到最近边缘的距离。如果像素靠近边缘，则使用边缘颜色进行绘制。边缘厚度可以是任何所需的值，并且可以受距离影响或保持恒定。参见图15.24。主要缺点是绘制轮廓线的边缘的宽度是内部线的一半，因为每个三角形的绘制线的厚度是内部线的一半。实际上，这种不匹配通常并不明显。

图15.24. 像素着色器生成的线。左侧是抗锯齿的单像素宽度边缘；右边是带有光晕的可变厚度线。（图片由J. AndreasBærentzen提供。）

Celes和Abraham [242]扩展并简化了这个想法，他们也对以前的工作进行了详尽的总结。他们的想法是对每个三角形边缘使用一维纹理坐标集，对定义该边缘的两个顶点使用1.0坐标，对另一个顶点使用0.0坐标。他们利用纹理映射和mip链来提供恒定宽度的边缘。这种方法易于编码，并提供了一些有用的控件。例如，可以设置最大密度，以使密集的网格不会完全被边缘填充，从而变成纯色。

15.4.2 渲染模糊线 Rendering Obscured Lines

在不绘制任何平面的普通线框工程图中，模型的所有边缘都是可见的。为避免绘制被表面隐藏的线，请将所有填充的三角形仅绘制到z缓冲区中，然后正常绘制边缘[1192]。如果无法在绘制所有线条之前绘制所有曲面，则稍微昂贵一点的解决方案是绘制与背景匹配的纯色曲面。

线条也可以被绘制为部分模糊而不是完全隐藏。例如，隐藏线可能会显示为浅灰色，而不是彻底不绘制。这可以通过适当设置z缓冲区的状态来完成。像之前一样绘制，然后反转z缓冲区的方向，以便仅绘制超出当前像素的z深度的线。同时关闭z缓冲区修改，以使这些绘制的线不会更改任何深度值。再次以模糊的样式绘制线条。然后仅绘制将被隐藏的线。对于线条的风格化版本，可以使用完整的隐藏线删除过程[282]。

15.4.3 光晕 Haloing

当两条线交叉时，通常的约定是擦除更远的线的一部分，从而使排序变得明显。通过绘制每条线两次（带有光环[1192]）相对容易地实现。此方法通过以背景色绘制重叠来消除重叠。首先，将所有线条绘制到z缓冲区，将每条线条表示为代表光环的粗四边形。几何着色器可以帮助创建此类四边形。然后，正常地将每行彩色。Z缓冲区绘制遮蔽的区域将隐藏在其后面绘制的线条。必须使用偏差或其他方法来确保每个黑色细线都位于厚z缓冲区四边形的顶部。

在顶点相交的线可能会被竞争光环部分隐藏。缩短产生光晕的四边形可以有所帮助，但会导致其他失真。Bærentzen等人的线条渲染技术 [86，1295]也可以用于光环。参见图15.24。每个三角形都会产生光环，因此不会出现干扰问题。另一种方法是使用图像后处理（第15.2.3节）检测并绘制光环。

图15.25显示了此处讨论的某些不同的线条渲染方法的结果。

图15.25。四种线型渲染样式。从左到右：线框，隐藏线，模糊线和光环线。

15.5 文字渲染 Text Rendering

鉴于阅读文本对文明有多么重要，毫不奇怪的是，人们对如何很好地渲染文本给予了极大的关注。与许多其他对象不同，单个像素更改可能会产生重大差异，例如将“ l”变成“1”。本节总结了用于文本渲染的主要算法实现。

与颜色相比，眼睛对强度差异更敏感。至少从Apple II [527]起，就已经使用了这一事实来改善感知的空间分辨率。这种想法的一种应用是Microsoft的ClearType技术，该技术建立在液晶显示器（LCD）显示器的特性之一上。LCD显示器上的每个像素都由三个垂直的彩色矩形（红色，绿色和蓝色）组成-使用LCD监视器上的放大镜，亲自观察一下。忽略这些子像素矩形的颜色，此配置提供的水平分辨率是像素的三倍。使用不同的阴影填充不同的子像素，因此有时将这种技术称为子像素渲染。眼睛将这些颜色混合在一起，并且红色和蓝色条纹变得不可检测。参见图15.26。这项技术于1998年首次宣布，对大型，低DPI的LCD显示器有很大的帮助。Microsoft停止在Word 2013中使用ClearType，这显然是由于将文本与不同的背景颜色混合所引起的问题。Excel与其他Web浏览器一样使用该技术，以及Adobe的CoolType，Apple的Quartz 2D以及FreeType和SubLCD等库。Shemanarev [1618]在一篇古老而透彻的文章中谈到了这种方法的各种微妙之处和问题。

图15.26. 同一单词的放大的灰度抗锯齿和亚像素抗锯齿版本。当彩色像素显示在LCD屏幕上时，组成该像素的相应彩色垂直子像素矩形会亮起。这样做可以提供额外的水平空间分辨率。(Images generated by Steve Gibson’s “Free & Clear” program.)

此技术是一个清晰的例子，说明在清晰呈现文本上花费了多少精力。字体中的字符（称为字形）通常由一系列线段和二次方或三次方Béezier曲线描述。有关示例，请参见第726页的图17.9。所有字体渲染系统都会确定字形如何影响其重叠的像素。FreeType和Anti-Grain Geometry等库的工作方式是为每个字形生成一个小的纹理，然后根据需要重新使用它们。每种字体大小和强调程度（即，斜体或粗体）都有不同的纹理。

这些系统假定每个纹理都是像素对齐的，每个像素一个纹理像素，就像通常用于文档一样。将文本应用于三维曲面时，这些假设可能不再成立。使用带有一组字形的纹理是一种简单且流行的方法，但是存在一些潜在的缺点。该应用程序仍可以使文本对齐以面对观看者，但是缩放和旋转将打破每个像素只有一个纹理像素的假设。即使屏幕对齐，也不会考虑字体提示。提示是调整字形轮廓以与像素单元匹配的过程。例如，最好以texel宽的“ I”的垂直词干覆盖单个像素列，而不是半覆盖两个相邻列。参见图15.27。所有这些因素意味着栅格纹理可能显示模糊或混叠问题。Rougier [1515]全面介绍了纹理生成算法所涉及的问题，并展示了FreeType的提示如何在基于OpenGL的字形渲染系统中使用。

图15.27. Verdana字体呈现为无提示（顶部）和提示（底部）。（图片由Nicolas Rougier [1515]提供。）

路径查找器库[1834]是最近的一项工作，它使用GPU生成字形。它具有很短的设置时间和最少的内存使用量，并且优于竞争对手的基于CPU的引擎。它使用细分和计算着色器来生成和总结曲线对每个像素的影响，并在性能欠佳的GPU上回退到几何着色器和OpenCL。像FreeType一样，这些字形也被缓存和重用。其高质量的抗锯齿功能以及高密度显示器的使用使提示几乎过时了。

无需复杂的GPU支持，就可以将文本应用于不同大小和方向的任意表面，同时仍然提供合理的抗锯齿功能。Green [580]提出了一个这样的系统，首先由《军团要塞2》（Team Fortress 2）中的Valve使用。算法使用Frisken等人介绍的采样距离场数据结构[495]。每个纹理像素保持到字形最近边缘的有符号距离。距离字段尝试对纹理描述中每个字形的确切边界进行编码。然后，双线性插值法可以很好地估计每个样本处字母的alpha覆盖率。有关示例，请参见图15.28。尖角可以通过双线性插值法来进行平滑，但是可以通过在四个单独的通道中编码更多的距离值来保留[263]。该方法的局限性在于创建这些带符号的距离纹理非常耗时，因此需要对其进行预先计算和存储。但是，一些字体渲染库基于此技术[1440]，并且非常适合移动设备[3]。Reshetov和Luebke [1485]基于在放大过程中调整样本的纹理坐标，总结了这些工作并给出了自己的方案。

图15.28. 向量纹理。左侧的字母“g”以其距离字段表示形式显示[3]。右边是距离字段的“禁止擅自进入”（NO TRESPASSING）标志。通过将特定距离范围映射到轮廓颜色来添加文本周围的轮廓[580]。（左图由ARM Ltd.提供。右图由“《军团要塞2》”（Team Fortress 2）提供，由Valve Corp.提供。）

即使没有缩放和旋转问题，例如使用汉字的语言字体也可能需要成千上万个字形。高质量的大字符将需要较大的纹理。如果以一定角度查看字形，则可能需要对材质进行各向异性过滤。直接从其边缘和曲线描述中绘制字形可以避免需要任意大的纹理，并且避免了来自采样网格的失真。Loop-Blinn方法[1068，1069]使用像素着色器直接评估B´ezier曲线，更多细节将在17.1.2节中讨论。此技术需要细分步骤，在加载时完成该步骤消耗可能会很昂贵。Dobbie [360]通过为每个字符的边框绘制一个矩形并单次评估所有字形轮廓来避免此问题。Lengyel [1028]提出了一种鲁棒的求值程序，用于确定点是否在字形内，这对于避免失真至关重要，并且还讨论了计算的优化和效果，例如发光，阴影和多种颜色（例如 emoji表情符号）。

进一步阅读和资源 Further Reading and Resources

有关非照片级逼真的卡通插图的灵感，请阅读Scott McCloud的Understanding Comics [1157]。从研究人员的角度来看，请参阅Hertz mann的文章[728]，该文章使用NPR技术来帮助建立有关艺术和插图的科学理论。

尽管是在固定功能硬件时代写的，Advanced Graphics Programming Using OpenGL [1192]，但还是有大量关于技术插图和科学可视化技术的章节。尽管也有些过时，但Gooches [563]和Strothotte [1719]的书是NPR算法的良好起点。Isenberg等人[799]和赫兹曼[727] 提供了轮廓边缘和笔触绘制技术的调查。Rusinkiewicz等人在SIGGRAPH 2008课程中的演讲[1521]还详细研究了笔触的渲染，包括较新的著作，以及B´enard等人 [130]调查帧间的一致性算法。对于艺术图像处理效果，我们请有兴趣的读者阅读Kyprianidis等人的概述[949]。非真实动画和渲染国际研讨会（NPAR，International Symposium on Non-Photorealistic Animation and Rendering）的会议记录着重于该领域的研究。

Mitchell等人[1223]提供了一个案例研究，说明了工程师和艺术家如何协作为《军团要塞2》（Team Fortress 2）游戏赋予独特的图形风格。Shodhan和Willmott [1632]讨论了游戏《孢子》（Spore）中的后处理系统，并包括了用于油画的像素着色器，老电影以及其他效果。SIGGRAPH 2010课程“Stylized Rendering in Games”是另一个实用实例的有价值资源。尤其是Thibault和Cavanaugh [1761]展示了无主之地艺术风格的演变，并描述了沿途的技术挑战。埃文斯（Evans）的演讲[446]是对实现特定媒介样式的各种渲染和建模技术的有趣探索。

Pranckeviˇcius [1440]提供了对加速的文本呈现技术的调研，其中包含了相关资源链接。

《Real-Time Rendering 4th Edition》全文翻译 - 第15章非真实感渲染（下）15.3 ~ 15.5相关推荐

《Real-Time Rendering 4th Edition》全文翻译 - 第15章非真实感渲染（上）15.1 ~ 15.2
好久没更新了~ 由于对NPR方面比较感兴趣,所以任性了一下,先翻译了这一章~ 业余翻译,若有不周到之处,还请多多指教! 实时渲染(第四版)Real-Time Rendering (Fourth Edi ...
《Real-Time Rendering 4th Edition》全文翻译 - 第2章图形渲染管线（下）2.4 ~ 2.6（20200720翻新）
------分割线 2020.7.20------ 翻新了一遍译文,统一了名词,补充了漏译的部分. 实时渲染(第四版)Real-Time Rendering (Fourth Edition) 第2章 ...
《Real-Time Rendering 4th Edition》全文翻译 - 第1章引言
为了追赶同事(或者在公司装X),不得不开始啃RTR4(滑稽) 如题,用笨办法硬上,就是莽! 然后是概括一下每小节大致内容,最后翻译全文. 这样把全书过一遍的话应该能算认真读完了吧-- 全文翻译,逐字逐 ...
《Real-Time Rendering 4th Edition》读书笔记--简单粗糙翻译第五章着色基础 Shading Basics
写在前面的话:因为英语不好,所以看得慢,所以还不如索性按自己的理解简单粗糙翻译一遍,就当是自己的读书笔记了.不对之处甚多,以后理解深刻了,英语好了再回来修改.相信花在本书上的时间和精力是值得的. -- ...
Real-time Rendering (3rd edition)学习笔记第1-2章
本博文仅作学习使用,欢迎学习渲染和计算机图形学的朋友相互讨论. 目录第1章介绍 1.1 内容概括 1.2 符号和定义 1.2.1 数学符号 1.2.2 几何定义进一步阅读和参考资料第2章图形 ...
非真实感渲染(NPR)论文理解及其复现(Unity) - 《Stylized Highlights for Cartoon Rendering and Animation》
Stylized Highlights for Cartoon Rendering and Animation 该论文的目的主要是用来渲染卡通风格的高光.复现参考自[NPR]非真实感渲染实验室符号: ...
Real-Time Rendering——Chapter 15Non-Photorealistic Rendering非真实感渲染15.1 Toon Shading15.1卡通阴影
"Using a term like 'nonlinear science' is like referring to the bulk of zoology as 'the study o ...
《Real-Time Rendering 4th Edition》全文翻译 - 第6章纹理化（上）6.1 ~ 6.3
由于工作变动原因,这次翻译拖的时间比较长--抱歉啦! 其实也是由于每章的内容越来越多了,很难在短时间内翻译完,是个很磨人的事情. 不过我会坚持下去的!希望能更多地帮到大家吧! 业余翻译,若有不周到之处 ...
《Real-Time Rendering 4th Edition》全文翻译 - 第2章图形渲染管线（上）2.1 ~ 2.3（20200720翻新）
如题,笨办法继续莽! 部分段落的论述过于冗长,自己做了分段处理. ------分割线 2020.7.20------ 翻新了一遍译文,统一了名词,补充了漏译的部分. 实时渲染(第四版)Real-Tim ...

《Real-Time Rendering 4th Edition》全文翻译 - 第15章非真实感渲染（下）15.3 ~ 15.5

实时渲染（第四版）Real-Time Rendering (Fourth Edition)

第15章非真实感渲染 Chapter 15 Non-Photorealistic Rendering

15.3 笔触表面样式化 Stroke Surface Stylization