简单理解GPU一个点的渲染过程

渲然过程概述

主要分为以下五个大阶段，每个阶段下面都涉及到更复杂的算法

顶点着色器=>图元装配=>光栅化=>片元着色器=>深度模板测试

如图所示，我们想绘制一个点在画布上，看看整个渲染过程

1、顶点着色器

一个单独的点的坐标进行输入，顶点着色器对每个坐标进行处理，gpu就知道了这个点的位置在哪。因此我们定好这个点坐标

const vertex= [0.5,0.5,0,1,r,g,b,a]

less 复制代码

@vertex
fn vertex_main(@location(0) position: vec4f,
               @location(1) color: vec4f) -> VertexOut
{
  var output : VertexOut;
  output.position = position;
  output.color = color;
  return output;
}

2、图元装配阶段

图元这个东西容易误解为图形，图元确实和图形息息相关，但是图元强调的是，用什么方式去将一系列点连接成为一个图形。

对于一个点的情况，图元只有一种，无法做连接操作，最终连接的就是一个点。

对于多个点，可以连接的方式就有很多了，比如多个点、多条线、多个三角形、多个三角扇。

在webgpu里对应的就是渲染管线的一个配置

css 复制代码

primitive: {
        topology: "triangle-strip", //绘制的原始类型，三角形  triangle-list
}

3、光栅化（图元=>片元）

前面装配了图元，光栅化就是把图元转换成片元。

片元是什么？

片元就是在设备屏幕上的x,y坐标

简单来说，假如我有一台移动设备像素19201080，光栅化就是计算出设备19201080的数组中，每个坐标的位置。

在三维场景中，存在物体的坐标系，世界坐标系，相机对应的坐标系，屏幕坐标系，裁剪坐标系。从物体坐标到屏幕坐标，中间需要进行矩阵变换。

4、片元着色器

片元已经解释了是屏幕空间中的xy坐标位置，那么片元着色器就更好理解了，就是计算最终的颜色。

@fragment

fn fragment_main(fragData: VertexOut) -> @location(0) vec4f

{

return fragData.color;

}

5、深度模板测试

深度测试和模板测试，都是为了测试哪个图形离屏幕中心最近的。

离得近的会放进颜色缓冲区，颜色缓冲区最终会渲染到屏幕上。

在三维开发中，会涉及到模型、光照、阴影等更复杂的情况，所以会做这么多测试。

学习上的感悟：

人的大脑的学习，更善于从a,b,c学习推导到d，在abc不了解的情况下，直接学习d，大脑会觉得很难，无法理解。所以有的时候对一个事物理解不了，不代表这个事物本身很难，而是直接从d开始了学习。

没有很难的事物，只有缺少科学的学习方法。