引子小明的点怎么就成了面之惑小明搞懂了渲染流水线的第一道工序——顶点处理。他知道了那些顶点经过一场精密的坐标搬家都在屏幕上找到了自己的落脚点。可当他准备跳到下一步光栅化时忽然卡住了一个别扭的问题横在中间等等……我好像漏掉了什么。顶点处理结束后,我手里有的,是一堆已经确定了屏幕位置的’点’——立方体的 8 个角点,各自站好了。可这 8 个点,现在还是 8 个孤零零、彼此毫无关系的’散点’啊!它们就像夜空里 8 颗互不相干的星星。而光栅化那一步,要做的是’把三角形填充成像素’。问题来了——‘三角形’从哪来的?我手里只有’点’啊!是谁,在什么时候,把这些散落的’点’,连成了一个个有意义的’三角形’的?这中间,是不是还藏着一道我没注意到的工序?小明这一问敏锐地抓住了渲染流水线中一道极易被忽略、却承前启后的关键工序——图元装配Primitive Assembly。它就像流水线上一个沉默的组装工上一道工序顶点处理交给它一堆散落的、处理好的零件顶点而它的使命就是把这些散点按照正确的规则组装成一个个有意义的几何形状再交给下一道工序光栅化去填色。今天我们就来打捞这道被遗忘的工序看看这位沉默的组装工是如何把一盘散沙变成有形之物的。一、核心问题什么是图元要理解图元装配先得搞懂它要装配出来的东西——图元Primitive。图元,就是 GPU 能够理解和处理的、最基本的几何形状单位。你可能以为GPU 能直接画出复杂的模型一辆车、一个人。其实不然。GPU 非常专一它只认识几种最简单、最基础的形状点Point单个顶点最简单;线Line两个顶点连成的一条线段;三角形Triangle三个顶点围成的一个面 ——这是最最重要、最常用的图元为什么是三角形因为三角形是最稳定、最简单的面三个点,永远能确定一个平面(而四个点可能不在同一平面上,会翘边);任何再复杂的形状——一个球、一辆车、一张脸——都可以用成千上万个小三角形拼接近似出来。所以你游戏里看到的一切模型本质上都是由海量的小三角形拼成的这也是为什么衡量模型的复杂度常说多少个三角面面数。而图元装配就是那道把顶点正确地连成这些三角形图元的工序。二、装配的关键靠索引这份组装说明书现在问题来了给你一堆散落的顶点你怎么知道哪三个点应该连成一个三角形难道是就近连接?或者随便连?当然不是!如果连错了,一个立方体可能被连成一堆乱七八糟的碎片。答案是靠一份叫索引Index“的组装说明书”。让我们用一个生动的比喻——连点成画游戏你小时候一定玩过那种按数字连线的游戏:纸上散布着许多带编号的点(1、2、3、4……),旁边有一份说明:“1 连 2,2 连 3,3 连 1……”。你照着说明,把对应编号的点连起来,一幅图案就出现了。图元装配,干的就是一模一样的事!那些顶点,就是纸上带编号的点(顶点 0、顶点 1、顶点 2……);那份索引数据,就是组装说明书,它明确规定:“用顶点 0、顶点 1、顶点 2,组成第一个三角形;用顶点 2、顶点 3、顶点 0,组成第二个三角形……”图元装配,就照着这份说明书,把散落的顶点,准确无误地组装成一个个三角形。看装配一点都不随意它严格遵循着模型自带的那份索引说明书。是这份说明书决定了哪些点该连在一起成为一个面。为什么要用索引这么麻烦—— 为了省小明可能会问直接告诉每个三角形用哪三个点不就行了为什么要搞个索引答案是为了复用顶点节省内存想象立方体的一个角点,它同时被三个面共享。如果不用索引,你就得把这个角点的完整数据(坐标、法线、UV……)存储三次!非常浪费。而用了索引,这个角点的完整数据只存一份,三个面只需要在说明书里,都写上这个点的编号即可。同一个点,反复被不同的三角形引用,数据却只存一份。这又是一次复用的智慧还记得对象池吗——不重复存储相同的东西用一个编号索引去引用它。三、装配之后还有一道筛选——面剔除图元被装配成三角形后在交给光栅化之前图元装配阶段及其相邻步骤往往还会顺手做一件筛选的活——面剔除Face Culling尤其是背面剔除Back-face Culling。这是一个很聪明的优化想象一个不透明的立方体。它有 6 个面,但无论你从哪个角度看,你最多只能同时看到 3 个面——那些背对着你的面,是永远看不到的!既然看不到,那还费劲去渲染它们干嘛?于是,图元装配阶段会判断每个三角形是正对着摄像机还是背对着摄像机,把那些背对着的、看不见的三角形,直接剔除掉,不再往下传递。这一剔就省下了大约一半三角形的后续处理开销是一项非常划算的优化。怎么判断正反面呢靠三角形三个顶点的环绕顺序顺时针 or 逆时针。这个顺序正是在那份索引说明书里被精心规定好的。所以如果模型索引顺序错了可能会出现该显示的面消失了的诡异 Bug四、承前启后图元装配在流水线中的位置让我们把图元装配放回整条流水线里看看它的承前启后① 顶点处理Vertex Shader —— 交出一堆处理好、定好位的散落顶点 ↓ ★ 图元装配Primitive Assembly★ ← 我们在这里 —— 照着索引说明书把散点连成三角形图元 —— 顺手剔除掉背对摄像机的、看不见的三角形 ↓ ② 光栅化Rasterization —— 把这些三角形填充成一个个像素 ↓ ……后续上色、测试、输出看清楚它的价值了吗它承接上一步把散落的顶点整理成有意义的形状;它启动下一步光栅化必须拿到三角形才能开始填色。没有图元装配这道连点成形的工序光栅化就是无米之炊。它沉默、不起眼却是从点到形的关键一跃——是它让一盘散沙般的顶点第一次拥有了轮廓和意义。尾声连点成形——“孤立的点毫无意义连接才创造价值”我们终于打捞起了那道被遗忘的工序——图元装配。它的使命凝练成一句话就是“把散落的、孤立的顶点按照正确的规则索引连接组装成一个个有意义的几何形状三角形。” 正是这道连点成形的工序让上一步交出的一盘散沙第一次有了轮廓、有了结构、有了后续被填充成画面的可能。而在这道朴素的连点成形工序里藏着一个格外深刻的道理孤立的点毫无意义唯有连接才创造出价值与形状。你看那些顶点单独看每一个都只是一个孤零零的坐标就像夜空里一颗互不相干的星微不足道;可一旦它们被正确地连接起来——三个点就组成了一个能被看见的面千万个面就拼出了一个鲜活的世界。这多像我们所处的世界和我们每一个人啊。一个孤立的人、一份孤立的知识、一个孤立的资源其价值都是有限的。真正的价值往往诞生于连接之中——人与人的连接协作、关系、网络知识与知识的连接融会贯通资源与资源的连接整合、配置;你身边或许散落着很多点——零散的技能、零星的人脉、片段的想法。它们单独存在时就像那些散落的顶点成不了气候。而一旦你学会把它们连接起来让技能之间产生化学反应、让人脉之间形成网络、让想法之间彼此印证——一个全新的、有价值的形状就诞生了;而图元装配还告诉我们连接不能随意乱连要遵循正确的说明书索引。胡乱的连接只会连出一堆混乱的碎片唯有有章法、有逻辑、有目的的连接才能组装出稳固而有意义的结构。人们常说一个人可以走得很快,但一群人才能走得更远。图元装配那连点成三角形的智慧,正暗合此理——单个顶点(个人)再优秀,也只是一个点;唯有正确地连接成面(团队、网络、系统),才能承载起一整幅宏大的画面。中国人所讲的众人拾柴火焰高“独木不成林”,亦是此意。所以当你感到自己孤立无援“空有一身本事却成不了事时愿你能想起渲染流水线里那位沉默的组装工”问自己一句“我是不是,还只是一个’孤立的点’我手里那些散落的技能、人脉、资源,我有没有,把它们’正确地连接’起来我缺的,或许不是更多的’点’,而是那份把点’连成形’的说明书与行动。”因为正如那道朴素而关键的图元装配所揭示的——一个孤立的顶点永远只是一个顶点而当它学会与别的点正确地连接它就成了一个面的一部分进而成了整个宏大画面中不可或缺的一笔。连接创造价值连点方能成形——这就是那位沉默的图元装配工用它把散点连成三角形的方式为我们上的、关于协作与连接的、朴素而深刻的一课。