WebGL 1.0与WebGL 2.0的流水线基本一致, 这里就不具体分开讨论, 每个阶段的详细文章里面有差异的会进行描述1. 图形 API 概述OpenGL面向桌面平台的图形 API。OpenGL ESOpenGL 的精简版面向移动设备和嵌入式系统。WebGL基于 OpenGL ES 的 Web 图形 API让浏览器通过 JavaScript 使用 GPU 渲染。WebGL 版本基于的 OpenGL ES 版本对应的 OpenGL 规范版本对应 GLSL 的版本WebGL 1.0OpenGL ES 2.0OpenGL 2.0GLSL 1.00WebGL 2.0OpenGL ES 3.0OpenGL 3.xGLSL ES 3.002. 渲染管线渲染管线也称渲染流水线由 GPU 内部处理图形信号的并行处理单元组成。这些单元相互独立不同型号硬件上数量差异很大越高端型号数量越多。3. 渲染管线各阶段3.1 基本处理该阶段设定 3D 空间中物体的顶点坐标、颜色、纹理坐标等属性并指定绘制方式如点、线段或三角形绘制。3.2 顶点缓冲对象该功能可选。当场景顶点数据基本不变时可在初始化阶段将顶点数据送入顶点缓冲对象绘制每帧时直接从中获取省去顶点数据 IO节省 GPU 带宽提高渲染效率。3.3 顶点着色器顶点着色器是可编程处理单元每顶点执行一次负责顶点的变换、光照、材质等操作。其工作过程为将原始顶点几何信息及其他属性传入经处理后产生纹理坐标、颜色、点位置等后继流程所需属性再传递给图元装配阶段。顶点着色器替代了原有固定管线的顶点变换、光照计算开发人员可以根据自己的需求自行开发顶点变换、光照等功能大大增加了程序的灵活性。但凡事有利皆有弊增加灵活性的同时也增加了开发的难度。顶点着色器的工作原理如图。顶点着色器输入主要为待处理顶点相应的 attribute属性变量、uniform一致变量、采样器以及临时变量输出主要为经过顶点着色器后生成的 varying易变变量及一些内建输出变量。attribute 变量指的是 3D 物体中每个顶点各自不同的信息所属的变量一般顶点的位置、颜色、法向量等每个顶点各自不同的信息都是以 attribute 变量的方式传入顶点着色器的。uniform 变量指的是对于同一组顶点组成的单个 3D 物体中所有顶点都相同的量一般为场景中当前的光源位置、当前的摄像机位置、投影系列矩阵等。varying 变量易变变量是从顶点着色器计算产生并传递到片元着色器的数据变量。顶点着色器可以使用易变变量来传递需要插值到片元的颜色、法向量、纹理坐标等任意值。内建输出变量gl_Position、gl_FrontFacing 和 gl_PointSize 等。gl_Position 是经过变换矩阵变换、投影后顶点的最终位置gl_FrontFacing 指的是片元所在面的朝向gl_PointSize 指的是点的大小。需要特别注意的是易变变量在顶点着色器赋值后并不是直接将赋的值送入到后继的片元着色器中而是在光栅化阶段由管线根据片元所属图元各个顶点对应的顶点着色器对此易变变量的赋值情况及片元与各顶点的位置关系插值产生。插值操作都是由 GPU 中的专用硬件实现的速度很快。3.4 图元装配图元装配是指将顶点着色器处理后的顶点按照指定的图元类型和顶点顺序组织成点、线段或三角形等基本图元。图元的组织方式由绘制命令中的 mode 参数决定例如gl.drawArrays(gl.TRIANGLES,0,6);这里的 gl.TRIANGLES 表示每三个顶点组成一个独立三角形。常见图元装配模式图元类型装配规则POINTS每个顶点组成一个点LINES每两个顶点组成一条独立线段LINE_STRIP相邻顶点依次连接成线段LINE_LOOP与 LINE_STRIP 类似但首尾相连TRIANGLES每三个顶点组成一个独立三角形TRIANGLE_STRIP从第三个顶点开始每增加一个顶点组成一个新三角形TRIANGLE_FAN以第一个顶点为公共顶点依次组成三角形3.5 图元裁剪图元处理最重要的工作是剪裁将超出可视范围的图元部分裁掉只保留处于可视范围内的部分。GPU 会根据剪裁边界完全在内部保留整个图元。完全在外部丢弃整个图元。部分在内部计算交点生成新的顶点形成裁剪后的图元。OpenGL ES 3.0 使用齐次裁剪空间Clip Space。顶点着色器输出 gl_Position包含四个分量gl_Position vec4(x, y, z, w);OpenGL ES 3.0 默认的剪裁条件为−w≤x≤w -w \le x \le w−w≤x≤w−w≤y≤w -w \le y \le w−w≤y≤w−w≤z≤w -w \le z \le w−w≤z≤w也就是说顶点需要位于这六个剪裁平面围成的区域内需要注意剪裁发生在透视除法除以 w之前不是直接拿 NDC 坐标进行剪裁。3.6 透视除法透视除法是裁剪处理之后的固定功能操作生成 NDCNormalized Device Coordinates标准化设备坐标(xndc,yndc,zndc)(xw,yw,zw) (x_{ndc}, y_{ndc}, z_{ndc}) \left( \frac{x}{w}, \frac{y}{w}, \frac{z}{w} \right)(xndc​,yndc​,zndc​)(wx​,wy​,wz​)3.7 视口变换将 NDC 标准化设备坐标映射到实际的窗口坐标Window Coordinates。具体的视口大小由程序配置比如gl.viewport(0, 0, 800, 600);理解这一步之后可以继续看视口变换如何将 NDC 的[-1, 1]坐标映射到实际屏幕像素坐标。3.8 光栅化光栅化的主要作用是将屏幕空间中的图元三角形、线段、点离散化生成片元Fragment。对于三角形光栅化会确定它覆盖了屏幕上的哪些像素位置并为这些位置生成对应的片元。每个片元包含屏幕坐标、深度值以及通过插值计算得到的颜色、纹理坐标等数据供后续片元着色器处理。片元不等于最终像素因为片元还需要经过深度测试、模板测试、混合等处理最终才可能影响帧缓冲中的像素值。3.9 片元着色器片元着色器是 WebGL 渲染管线中的可编程阶段主要负责计算每个片元的颜色。片元着色器接收光栅化阶段插值生成的数据如颜色、纹理坐标等通过纹理采样、光照计算等操作生成片元颜色并交由后续的剪裁测试、深度测试、模板测试及颜色混合等阶段处理。在 WebGL 1.0 中varying接收从顶点着色器传递并经过插值的数据。gl_FragColor输出片元颜色。性能提示片元着色器通常比顶点着色器执行次数更多应尽量减少复杂计算。部分计算可以提前到顶点着色器中完成。3.10 剪裁测试剪裁测试Scissor Test用于限制片元的绘制区域。启用剪裁测试后只有位于指定矩形区域内的片元才能进入后续处理阶段区域外的片元将被丢弃。3.11 深度测试和模板测试深度测试Depth Test深度测试用于判断片元的前后遮挡关系。通过比较当前片元与深度缓冲中对应位置的深度值决定片元是否通过测试。默认情况下深度值较小的片元通过测试从而实现近处物体遮挡远处物体的效果。模板测试Stencil Test模板测试通过比较片元与模板缓冲中的值决定片元是否可以被绘制。通常用于限制绘制区域实现镜像、倒影、遮罩等效果。3.12 颜色缓冲混合颜色混合Blending用于将当前片元颜色与颜色缓冲中已有的颜色进行混合。启用混合根据混合因子计算最终颜色常用于实现半透明效果。禁用混合通过测试的片元颜色通常直接替换颜色缓冲中的原有颜色。3.13 抖动抖动Dithering通过调整相邻像素的颜色利用有限的颜色数量模拟更丰富的颜色层次减少色彩过渡中的色带现象。现代显示设备通常具有较高的色彩精度因此抖动的作用相对有限部分实现可能会忽略抖动设置。3.14 帧缓冲帧缓冲Framebuffer用于存储渲染结果。WebGL 并不是直接将图形绘制到屏幕上而是先将结果写入帧缓冲再由浏览器将其呈现到屏幕。帧缓冲主要包含以下三种缓冲缓冲类型主要作用颜色缓冲Color Buffer存储像素颜色通常包含 RGBA 四个通道深度缓冲Depth Buffer存储深度值用于深度测试和遮挡关系判断模板缓冲Stencil Buffer存储模板值用于模板测试和绘制区域控制绘制新的一帧时通常需要根据实际渲染需求清除相关缓冲避免上一帧的数据影响当前渲染结果。补充说明以上按便于理解的逻辑顺序介绍各个阶段并不代表 GPU 必须严格按照此顺序执行。例如部分 GPU 可以提前执行深度测试以减少不必要的片元着色计算。4. WebGL 2.0 与 WebGL 1.0 的主要区别WebGL 2.0 基于 OpenGL ES 3.0在 WebGL 1.0 的基础上增加了一系列能力和接口能够支持更复杂的渲染效果。能力WebGL 1.0WebGL 2.0基于规范OpenGL ES 2.0OpenGL ES 3.0着色器语言GLSL ES 1.00GLSL ES 3.00顶点数组对象 VAO需要扩展或不支持原生支持实例化绘制依赖扩展原生支持多渲染目标 MRT依赖扩展原生支持3D 纹理 / 纹理数组不支持支持非 2 的幂纹理 NPOT受限制支持更完整Uniform Buffer Object不支持支持整数 / 浮点纹理与渲染目标依赖扩展原生支持变换反馈不支持支持需要注意的是WebGL 2.0 并不是完全向下兼容 WebGL 1.0。两者在着色器语法、纹理格式、默认行为等方面存在差异实际开发时需要根据目标浏览器和硬件能力选择合适的版本并通过能力检测进行降级处理。