WebGL学习（一）渲染关系

在这里插入图片描述

学习webgl 开发理解渲染关系是必须的，也非常重要，很多人忽视了这个过程。

我这里先简单写一下，后面尽量用通俗易懂的方式，举例讲解。

WebGL，全称Web Graphics Library，是一种在网页上渲染3D图形的技术。它允许开发者使用JavaScript和HTML5的Canvas元素来创建和渲染3D图形。WebGL渲染管线可以想象成一个工厂流水线，它将3D模型转换为2D图像，供我们的眼睛欣赏。这个流水线分为几个主要阶段，每个阶段都对最终图像的生成起着至关重要的作用。

模型阶段(Modeling)：
- 想象一下，你有一个3D的玩具模型，你想要把它展示在屏幕上。在这个阶段，你需要定义玩具模型的形状、大小和位置。
顶点着色器(Vertex Shader)：
- 顶点着色器是流水线的第一个环节。它处理3D模型的顶点（模型的角和边）。它会告诉每个顶点在屏幕上的大概位置。
图元装配(Primitive Assembly)：
- 这个阶段将顶点组装成基本图形，比如三角形或四边形。这就像是把玩具的各个部分拼凑起来。
光栅化(Rasterization)：
- 光栅化阶段将图元转换成像素。这就像是用相机拍摄玩具，把3D模型转换成2D图像。
片段着色器(Fragment Shader)：
- 片段着色器处理每个像素的颜色和特性。它决定了每个像素的颜色、透明度等，就像是给玩具上色。
深度测试(Depth Test)：
- 在3D世界中，物体的前后关系很重要。深度测试确保物体按照正确的前后顺序显示，避免出现“穿模”现象。
模板测试(Stencil Test)：
- 模板测试用于控制像素的可见性，它可以帮助实现一些特殊的视觉效果，比如遮挡和裁剪。
混合(Blending)：
- 混合阶段调整像素的颜色，以实现透明效果或者混合不同颜色的像素，让图像看起来更加自然。
输出到帧缓冲区(Frame Buffer)：
- 最后，经过所有处理的像素被输出到帧缓冲区，这是一个临时存储图像的地方。当一切准备就绪后，这些图像就会被显示在屏幕上。