1.游戏引擎随笔 0x36：UE5.x Nanite 源码解析之可编程光栅化（下）
2.R爬虫必备基础——CSS+SelectorGadget

游戏引擎随笔 0x36：UE5.x Nanite 源码解析之可编程光栅化（下）

       书接上回。

       在展开正题之前，先做必要的铺垫，解释纳尼特(Nanite)技术方案中的Vertex Reuse Batch。纳尼特在软光栅路径实现机制中，将每个Cluster对应一组线程执行软光栅，外卖小程序源码每ThreadGroup有个线程。在光栅化三角形时访问三角形顶点数据，但顶点索引范围可能覆盖整个Cluster的个顶点，因此需要在光栅化前完成Cluster顶点变换。纳尼特将变换后的顶点存储于Local Shared Memory(LDS)中，进行组内线程同步，确保所有顶点变换完成，光栅化计算时直接访问LDS，实现软光栅高性能。

       然而，在使用PDO(Masked)等像素可编程光栅化时，纳尼特遇到了性能问题。启用PDO或Mask时，可能需要读取Texture，根据读取的Texel决定像素光栅化深度或是否被Discard。读取纹理需计算uv坐标，而uv又需同时计算重心坐标，expma指标公式源码增加指令数量，降低寄存器使用效率，影响Active Warps数量，降低延迟隐藏能力，导致整体性能下降。复杂材质指令进一步加剧问题。

       此外，当Cluster包含多种材质时，同一Cluster中的三角形被重复光栅化多次，尤其是材质仅覆盖少数三角形时，大量线程闲置，浪费GPU计算资源。

       为解决这些问题，纳尼特引入基于GPU SIMT/SIMD的Vertex Reuse Batch技术。技术思路如下：将每个Material对应的三角形再次分为每个为一组的Batch，每Batch对应一组线程，每个ThreadGroup有个线程，正好对应一个GPU Warp。利用Wave指令共享所有线程中的变换后的顶点数据，无需LDS，减少寄存器数量，增加Warp占用率，安卓下载源码提升整体性能。

       Vertex Reuse Batch技术的启用条件由Shader中的NANITE_VERT_REUSE_BATCH宏控制。

       预处理阶段，纳尼特在离线时构建Vertex Reuse Batch，核心逻辑在NaniteEncode.cpp中的BuildVertReuseBatches函数。通过遍历Material Range，统计唯一顶点数和三角形数，达到顶点去重和优化性能的目标。

       最终，数据被写入FPackedCluster，根据材质数量选择直接或通过ClusterPageData存储Batch信息。Batch数据的Pack策略确保数据对齐和高效存储。

       理解Vertex Reuse Batch后，再来回顾Rasterizer Binning的数据：RasterizerBinData和RasterizerBinHeaders。在启用Vertex Reuse Batch时，这两者包含的是Batch相关数据，Visible Index实际指的是Batch Index，而Triangle Range则对应Batch的三角形数量。

       当Cluster不超过3个材质时，直接从FPackedCluster中的VertReuseBatchInfo成员读取每个材质对应的BatchCount。有了BatchCount，即可遍历所有Batch获取对应的产品展示网站源码三角形数量。在Binning阶段的ExportRasterizerBin函数中，根据启用Vertex Reuse Batch的条件调整BatchCount，表示一个Cluster对应一个Batch。

       接下来，遍历所有Batch并将其对应的Cluster Index、Triangle Range依次写入到RasterizerBinData Buffer中。启用Vertex Reuse Batch时，通过DecodeVertReuseBatchInfo函数获取Batch对应的三角形数量。对于不超过3个材质的Cluster，DecodeVertReuseBatchInfo直接从Cluster的VertReuseBatchInfo中Unpack出Batch数据，否则从ClusterPageData中根据Batch Offset读取数据。

       在Binning阶段的AllocateRasterizerBinCluster中，还会填充Indirect Argument Buffer，将当前Cluster的Batch Count累加，用于硬件光栅化Indirect Draw的Instance参数以及软件光栅化Indirect Dispatch的ThreadGroup参数。这标志着接下来的光栅化Pass中，每个Instance和ThreadGroup对应一个Batch，以Batch为光栅化基本单位。

       终于来到了正题：光栅化。本文主要解析启用Vertex Reuse Batch时的软光栅源码，硬件光栅化与之差异不大，此处略过。vip解析接口源码此外，本文重点解析启用Vertex Reuse Batch时的光栅化源码，对于未启用部分，除可编程光栅化外，与原有固定光栅化版本差异不大，不再详细解释。

       CPU端针对硬/软光栅路径的Pass，分别遍历所有Raster Bin进行Indirect Draw/Dispatch。由于Binning阶段GPU中已准备好Draw/Dispatch参数，因此在Indirect Draw/Dispatch时只需设置每个Raster Bin对应的Argument Offset即可。

       由于可编程光栅化与材质耦合，导致每个Raster Bin对应的Shader不同，因此每个Raster Bin都需要设置各自的PSO。对于不使用可编程光栅化的Nanite Cluster，即固定光栅化，为不降低原有性能，在Shader中通过两个宏隔绝可编程和固定光栅化的执行路径。

       此外，Shader中还包括NANITE_VERT_REUSE_BATCH宏，实现软/硬光栅路径、Compute Pipeline、Graphics Pipeline、Mesh Shader、Primitive Shader与材质结合生成对应的Permutation。这部分代码冗长繁琐，不再详细列出讲解，建议自行阅读源码。

       GPU端软光栅入口函数依旧是MicropolyRasterize，线程组数量则根据是否启用Vertex Reuse Batch决定。

       首先判断是否使用Rasterizer Binning渲染标记，启用时根据VisibleIndex从Binning阶段生成的RasterizerBinHeaders和RasterizerBinData Buffer中获取对应的Cluster Index和光栅化三角形的起始范围。当启用Vertex Reuse Batch，这个范围是Batch而非Cluster对应的范围。

       在软光栅中，每线程计算任务分为三步。第一步利用Wave指令共享所有线程中的Vertex Attribute，线程数设置为Warp的Size，目前为，每个Lane变换一个顶点，最多变换个顶点。由于三角形往往共用顶点，直接根据LaneID访问顶点可能重复，为确保每个Warp中的每个Lane处理唯一的顶点，需要去重并返回当前Lane需要处理的唯一顶点索引，通过DeduplicateVertIndexes函数实现。同时返回当前Lane对应的三角形顶点索引，用于三角形设置和光栅化步骤。

       获得唯一顶点索引后，进行三角形设置。这里代码与之前基本一致，只是写成模板函数，将Sub Pixel放大倍数SubpixelSamples和是否背面剔除bBackFaceCull作为模板参数，通过使用HLSL 语法实现。

       最后是光栅化三角形写入像素。在Virtual Shadow Map等支持Nanite的场景下，定义模板结构TNaniteWritePixel来实现不同应用环境下Nanite光栅化Pipeline的细微差异。

       在ENABLE_EARLY_Z_TEST宏定义时，调用EarlyDepthTest函数提前剔除像素，减少后续重心坐标计算开销。当启用NANITE_PIXEL_PROGRAMMABLE宏时，可以使用此机制提前剔除像素。

       最后重点解析前面提到的DeduplicateVertIndexes函数。

       DeduplicateVertIndexes函数给每个Lane返回唯一的顶点索引，同时给当前Lane分配三角形顶点索引以及去重后的顶点数量。

       首先通过DecodeTriangleIndices获取Cluster Local的三角形顶点索引，启用Cluster约束时获取所有Lane中最小的顶点索引，即顶点基索引。将当前三角形顶点索引（Cluster Local）减去顶点基索引，得到相对顶点基索引的局部顶点索引。

       接下来生成顶点标志位集合。遍历三角形三个顶点，将局部顶点索引按顺序设置到对应位，表示哪些顶点已被使用。每个标志位是顶点的索引，并在已使用的顶点位置处设置为1。使用uint2数据类型，最多表示个顶点位。

       考虑Cluster最多有个顶点，为何使用位uint2来保存Vertex Mask而非位？这是由于Nanite在Build时启用了约束机制（宏NANITE_USE_CONSTRAINED_CLUSTERS），该机制保证了Cluster中的三角形顶点索引与当前最大值之差必然小于（宏CONSTRAINED_CLUSTER_CACHE_SIZE），因此，生成的Triangle Batch第一个索引与当前最大值之差将不小于，并且每个Batch最多有个唯一顶点，顶点索引差的最大值为，仅需2个位数据即可。约束机制确保使用更少数据和计算。

       将所有Lane所标记三个顶点的Vertex Mask进行位合并，得到当前Wave所有顶点位掩码。通过FindNthSetBit函数找出当前Lane对应的Mask索引，加上顶点基索引得到当前Lane对应的Cluster Local顶点索引。

       接下来获取当前Lane对应的三角形的Wave Local的三个顶点索引，用于后续通过Wave指令访问其他Lane中已经计算完成的顶点属性。通过MaskedBitCount函数根据Vertex Mask以及前面局部顶点索引通过前缀求和得到当前Lane对应的Vertex Wave Local Index。

       最后统计Vertex Mask所有位，返回总计有效的顶点数量。

       注意FindNthSetBit函数，实现Lane与顶点局部索引（减去顶点基索引）的映射，返回当前Lane对应的Vertex Mask中被设置为1的位索引。如果某位为0，则返回下一个位为1的索引。如果Mask中全部位都设置为1，则实际返回为Lane索引。通过二分法逐渐缩小寻找索引范围，不断更新所在位置，最后返回找到的位置索引。

       最后，出于验证目的进行了Vertex Reuse Batch的性能测试。在材质包含WPO、PDO或Mask时关闭Vertex Reuse Batch功能，与开启功能做对比。测试场景为由每颗万个三角形的树木组成的森林，使用Nsight Graphics进行Profiling，得到GPU统计数据如下：

       启用Vertex Reuse Batch后，软光栅总计耗时减少了1.毫秒。SM Warp总占用率有一定提升。SM内部工作量分布更加均匀，SM Launch的总Warp数量提升了一倍。长短板Stall略有增加，但由于完全消除了由于LDS同步导致的Barrier Stall，总体性能还是有很大幅度的提升。

       至此，Nanite可编程光栅化源码解析讲解完毕。回顾整个解析过程，可以发现UE5团队并未使用什么高深的黑科技，而是依靠引擎开发者强悍的工程实现能力完成的，尤其是在充分利用GPU SIMT/SIMD机制榨干机能的同时，保证了功能与极限性能的实现。这种能力和精神，都很值得我们学习。

R爬虫必备基础——CSS+SelectorGadget

        CSS，全称叫作Cascading Style Sheets，即层叠样式表。“层叠”是指当在HTML中引用了数个样式文件，并且样式发生冲突时，浏览器能依据层叠顺序处理。“样式”指网页中文字大小、颜色、元素间距、排列等格式。HTML定义了网页的结构，但是只有HTML页面的布局并不美观，可能只是简单的节点元素的排列，为了让网页看起来更好看一些，这里借助了CSS。CSS是目前唯一的网页页面排版样式标准，有了它的帮助，页面才会变得更为美观。如下图的右侧，即为CSS。

        就局部放大来看，下图所示就是一个CSS样式。大括号前面是一个CSS选择器，此选择器的意思是首先选中id为head_wrapper且class为s-ps-islite的节点，然后再选中其内部的class为s-p-top的节点。大括号内部写的就是一条条样式规则，例如position指定了这个元素的布局方式为绝对布局，bottom指定元素的下边距为像素，width指定了宽度为%占满父元素，height则指定了元素的高度。也就是说，我们将位置、宽度、高度等样式配置统一写成这样的形式，然后用大括号括起来，接着在开头再加上CSS选择器，这就代表这个样式对CSS选择器选中的元素生效，元素就会根据此样式来展示了。在网页中，一般会统一定义整个网页的样式规则，并写入CSS文件中（其后缀为css）。在HTML中，只需要用link标签即可引入写好的CSS文件，这样整个页面就会变得美观、优雅。

        在爬虫过程中都需要爬取目标的节点，我们知道网页由一个个节点组成，CSS选择器会根据不同的节点设置不同的样式规则，那什么是节点？又怎样来定位节点呢？下面围绕这两个问题进行介绍。

        在HTML中，所有标签定义的内容都是节点，它们构成了一个HTML DOM树。我们先看下什么是DOM，DOM是W3C（万维网联盟）的标准，其英文全称Document Object Model，即文档对象模型。它定义了访问HTML和XML文档的标准：W3C文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。W3C DOM标准被分为如下3个不同的部分：

        核心DOM：针对任何结构化文档的标准模型。

XML DOM：针对XML文档的标准模型。

HTML DOM：针对HTML文档的标准模型。

        根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点。整个文档是一个文档节点；每个HTML元素是元素节点；HTML元素内的文本是文本节点；每个HTML属性是属性节点；注释是注释节点。HTML DOM将HTML文档视作树结构，这种结构被称为节点树，如下图所示。

        节点树中的节点彼此拥有层级关系。我们常用父（parent）、子（child）和兄弟（sibling）等术语描述这些关系。父节点拥有子节点，同级的子节点被称为兄弟节点。在节点树中，顶端节点称为根（root）。除了根节点之外，每个节点都有父节点，同时可拥有任意数量的子节点或兄弟节点。下图展示了节点树以及节点之间的关系。

        在CSS中，我们使用CSS选择器来定位节点。例如，下图中div节点的id为container，那么就可以表示为#container，其中#开头代表选择id，其后紧跟id的名称。另外，如果我们想选择class为wrapper的节点，便可以使用.wrapper，这里以点（.）开头代表选择class，其后紧跟class的名称。另外，还有一种选择方式，那就是根据标签名筛选，例如想选择二级标题，直接用h2即可。这是最常用的3种表示，分别是根据id、class、标签名筛选，请牢记它们的写法。

        另外，CSS选择器还支持嵌套选择，各个选择器之间加上空格分隔开便可以代表嵌套关系，如#container .wrapper p则代表先选择id为container的节点，然后选中其内部的class为wrapper的节点，然后再进一步选中其内部的p节点。另外，如果不加空格，则代表并列关系，如div#container .wrapper p.text代表先选择id为container的div节点，然后选中其内部的class为wrapper的节点，再进一步选中其内部的class为text的p节点。这就是CSS选择器，其筛选功能还是非常强大的。另外，CSS选择器还有一些其他语法规则，具体如下表所示。

        但是，这样每次都要浪费部分时间去寻找定位点，这样既不很方便，也不高效，那么如何提高爬虫中这部分工作的效率呢？今天我给大家分享一个爬虫的利器，它就是：SelectorGadget 插件。

        point and click CSS selectors，强大的谷歌插件CSS生成器，有助于我们快速找到html的节点信息，它也支持Xpath表达式。Selector Gadget是一个开源的Chrome扩展程序，可以轻松地在复杂的网站上生成和选择CSS选择器。安装扩展程序后，转到任意页面并启动它。网站右下方会打开一个方框。单击您希望选择器匹配的页面元素（它将变为绿色）。然后SelectorGadget将为该元素生成一个最小的CSS选择器，并突出显示（黄色）选择器匹配的所有内容。现在单击突出显示的元素将其从选择器中删除（红色），或单击未突出显示的元素将其添加到选择器。通过这个选择和拒绝过程，SelectorGadget可以帮助您找到满足您需求的完美CSS选择器。

        首先需要安装一下这个神器。在谷歌浏览器中的应用商店里，搜索到SelectorGadget插件，点击“添加至Chrome”即可。如果不能打开Chrome应用商店，可以通过网上的其他途径获取该插件，之后再手动添加至谷歌浏览器即可。手动添加方法是：打开谷歌浏览器扩展程序，并开启开发者模式，将该插件拖拽到浏览器里，如果不成功，可以选择“加载已解压的扩展程序”，将该文件夹先压缩再解压添加进去。

        同时在页面栏上能看到红框处的SelectorGadget标志。

        咱们以 / 网页为例，首先点击网页上方的SelectorGadget，然后在网页下方弹出SelectorGadget框。接下来，咱们尝试一下如何使用？比如我们想定位“拆弹专家2”的节点，直接点击它，则会在框内显示其节点——.item-title（如下图）。绿色：单击希望选择器匹配的页面元素。黄色：生成的这个CSS选择器【.item-title】能匹配的所有内容，从下图可以发现该CSS选择器可以抓取哪些信息。当你把鼠标放到这些高亮的元素上时，会显示红色，代表要将其从选择器中删除；而单击未突出显示的元素将其添加到选择器。

        在实际构建CSS表达式过程中，需要搭配网页开发工具里的copy selector功能使用，非常方便。比如：定位抓取以下网页（ /allmovies ）红框内的所有电影名称信息。

        具体操作流程如下：在某一电影名称下右击——检查，定位到电影名称的网页源码处，然后右击—copy—copy selector，再打开SelectorGadget，在框内粘贴CSS表达式，按Enter键，发现在网页中准确定位出该电影名称。但我们需要定位所有的电影名称，在已有的CSS表达式【（body > div:nth-child(5) > div.inner-wrapper > div.inner-2col-main > div > ul > li:nth-child(1) > a > span.item-title）】上进行修改，这里可以发现【li:nth-child(1)】只选取了第一个，而我们所需选取所有，因此去掉后面的【(1)】即可。在具体实践中，如何修改还有有赖于小伙伴对网页结构和CSS语法的理解。最终，获取以上红框内电影名称的CSS选择器表达式为：【body > div:nth-child(5) > div.inner-wrapper > div.inner-2col-main > div > ul > li:nth-child > a > span.item-title】。在实际应用中，不同节点标签之间用空格分隔：【body div:nth-child(5) div.inner-wrapper div.inner-2col-main div ul li:nth-child a span.item-title】。

        但在SelectorGadget使用中，发现其构建的CSS表达式往往很复杂，大部分情况下其实也是可以自己构建CSS表达式的。构建CSS选择表达式的关键在于清楚整个网页结构，找到标签之间的属于关系、属性值属于哪个标签等，就可以比较快速的构建。而且浏览器很智能，鼠标在源码上的位置，可以在网页显示上呈现阴影，这个功能简直太香了。以上红框内所有电影名字的CSS表达式也可以表示为：【div.movlist ul li a span.item-title】

        然后用SelectorGadget验证，如下图，发现高亮选中的部分就是我想要定位的信息，说明这个CSS表达式正确。

        以上简单介绍了如何构建CSS表达式，在爬虫过程中定位抓取特定节点数据是非常重要的一步，有了这步才有下游的精准数据提取与清洗。希望本次教程能给有需要的小伙伴一点小小帮助！

        更多内容可关注公共号“YJY技能修炼”~~~

        往期回顾

        R爬虫在工作中的一点妙用

        R爬虫必备基础——HTML和CSS初识

        R爬虫必备基础——静态网页+动态网页

        R爬虫必备——rvest包的使用