图形渲染管线流程笔记

概述

• 图形渲染管线（Graphics Pipeline）

现代GPU的图形渲染管线完整流程

• CPU提交数据
• 输入装配 -> 【顶点着色器】-> 曲面细分 -> 几何着色器
• 图元装配 -> 光栅化 -> 【片段着色器】 -> 测试与混合
• 帧缓冲区 -> 【屏幕显示】

阶段详解（2D视角）

输入装配（Input Assembler）

• 作用：收集原始的顶点数据
• 2D示例：

// 一个2D矩形的4个顶点数据constvertices=[// x, y, u, v (位置坐标 + UV纹理坐标)-1,-1,0,0,// 左下角1,-1,1,0,// 右下角-1,1,0,1,// 左上角1,1,1,1// 右上角];

顶点着色器（Vertex Shader）

• 作用：处理每个顶点的位置和属性
• 2D特点：通常简单，只是传递数据
• 示例关键理解：每个顶点都会执行一次这个程序：

// Laya 2D顶点着色器voidmain(){gl_Position=mvp*vec4(a_Position,0.0,1.0);// 位置变换v_TexCoord0=a_TexCoord0;// 传递UV坐标}

图元装配（Primitive Assembly）

• 作用：将顶点组装成三角形、线条等基本图形
• 2D示例：把4个顶点组装成2个三角形，组成一个矩形精灵

光栅化（Rasterization）

• 作用：将几何图形转换为屏幕上的像素（片段）
• 过程：三角形几何体 → 计算覆盖的像素 → 生成片段(Fragment)
• 重要概念：片段(Fragment) ≠ 像素(Pixel)
  • 片段是"候选像素"，还需要经过测试才能成为最终像素

片段着色器（Fragment Shader）

• 作用：决定每个片段的最终颜色
• 示例关键理解：每个像素都会执行一次这个程序！

voidmain(){vec4 color=texture2D(u_AlbedoTexture,v_TexCoord0);// 采样纹理color.rgb*=u_Brightness;// 调整亮度gl_FragColor=color;// 输出颜色}

测试与混合（Tests & Blending）

• 深度测试：决定哪个物体在前（3D重要，2D通常按绘制顺序）
• 模板测试：用于遮罩效果
• Alpha混合：处理半透明效果

// 经典的Alpha混合公式final_color=source_color*source_alpha+destination_color*(1.0-source_alpha)

对于2D游戏，可以重点关注

• [精灵顶点数据] → [顶点着色器(传递数据)] → [光栅化] → [片段着色器(上色)] → [混合]
• 关键简化：
  • 顶点着色器通常只是传递位置和UV
  • 深度测试通常用绘制顺序代替
  • 主要工作都在片段着色器中完成

实际渲染2D精灵流程示例

准备阶段（CPU）

// Laya中创建精灵letsprite=newLaya.Sprite();sprite.loadImage("hero.png");

顶点着色器处理

// 每个顶点执行：位置 → 裁剪空间，UV → 传递// 输入：4个顶点 → 输出：4个变换后的顶点

光栅化

• 矩形几何体 → GPU计算覆盖的像素 → 生成1000个片段(假设精灵大小)

片段着色器处理

// 每个片段执行：voidmain(){// 根据UV坐标从纹理获取颜色vec4 color=texture2D(u_Texture,v_TexCoord0);// 应用特效（如变红表示受伤）if(u_IsHurt>0.5){color.rgb=mix(color.rgb,vec3(1.0,0.0,0.0),0.5);}gl_FragColor=color;}

最终输出

• 经过Alpha混合后，精灵显示在屏幕上