暗黑模式
渲染原理
教程3DWebGL
渲染流程
渲染管道(Rendering Pipeline)
WebGL渲染管道是指一系列的图形处理阶段，它们按顺序处理顶点数据和片元数据，最终将结果呈现在屏幕上。渲染管道通常包括以下几个阶段：
顶点着色器阶段（Vertex Shader Stage）：
- 顶点着色器是渲染管道的第一个阶段，它对输入的顶点数据进行处理，通常包括变换（例如，从模型空间变换到剪辑空间）、应用光照计算、设置顶点属性等操作。
- 顶点着色器的输出通常是经过变换后的顶点位置和可能的其他顶点属性，如法向量、纹理坐标等。
- 将模型的原始坐标系转换到 WebGL 使用的裁剪空间坐标系，其中每个轴的坐标范围从 -1.0 到 1.0，并且不考虑纵横比，实际尺寸或任何其他因素。
图元装配阶段（Primitive Assembly Stage）：
- 在这个阶段，顶点着色器输出的顶点被组装成图元，如点、线段或三角形。这个阶段通常不需要额外的编程，由WebGL内部自动完成。
几何着色器阶段（Geometry Shader Stage，可选）：
- 几何着色器是一个可选的阶段，它可以在图元级别上操作顶点数据，生成新的几何图元或丢弃某些图元。几何着色器通常用于执行简单的几何操作，如扩展几何图元、创建新的几何图元等。
光栅化阶段（Rasterization Stage）：
- 在这个阶段，几何图元被转换为屏幕上的片元。这包括确定每个图元覆盖的屏幕像素以及对这些像素进行插值以获取最终的片元属性值。
片元着色器阶段（Fragment Shader Stage）：
- 片元着色器是渲染管道的最后一个阶段，它对每个片元（即屏幕上的像素）进行处理，通常包括纹理采样、光照计算、颜色计算等操作。
- 片元着色器的输出是最终的颜色值，这些颜色值将被用于在屏幕上绘制图像。
片元操作阶段（Fragment Operations Stage）：
- 在这个阶段，对片元进行深度测试、模板测试和颜色混合等操作，以确定最终要绘制在屏幕上的像素。
以上是典型的渲染管道阶段，但在WebGL中，开发者可以通过自定义顶点着色器、几何着色器和片元着色器来扩展和修改渲染管道，以实现更复杂的渲染效果和图形处理。
原理讲解
1）TODO: code ⇔GPU 图示
2）TODO: Coordinates Transformation 图示
3）Model Space →VertexShader →ClippingSpace→NDC
加入resolution来修正
4）VBO+IBO+VAO
5）2D
6）3D
Coordinate Transfomations in 3D Graphics
在3D图形中，坐标变换是非常重要的概念，它涉及到将对象从一个坐标系转换到另一个坐标系的过程。常见的坐标变换包括平移（Translation）、旋转（Rotation）、缩放（Scaling）和投影（Projection）等。
平移（Translation）：平移是将对象沿着坐标轴移动一定的距离。在3D图形中，可以通过改变对象的坐标来实现平移。例如，将一个物体从原点移动到另一个位置可以通过修改其坐标值来实现。
旋转（Rotation）：旋转是围绕某一点或轴线将对象转动一定的角度。在3D图形中，可以通过旋转矩阵来实现对象的旋转。旋转可以是绕着任意轴或固定的坐标轴进行的。
缩放（Scaling）：缩放是改变对象的大小，可以是均匀的缩放或者沿着不同的轴进行缩放。在3D图形中，可以通过缩放矩阵来实现对象的缩放。
投影（Projection）：投影是将3D对象投影到2D平面上的过程，通常用于将3D场景显示在2D屏幕上。常见的投影包括透视投影（Perspective Projection）和正交投影（Orthographic Projection）。
这些坐标变换通常以矩阵的形式进行表示和计算。在图形编程中，可以使用矩阵乘法来组合多个变换，以实现复杂的变换效果。例如，可以将平移、旋转和缩放变换组合在一起，以便将对象从一个位置平移、旋转到另一个位置，并改变其大小。
在WebGL等图形库和框架中，通常提供了方便的API来执行这些坐标变换，开发者可以直接调用这些API来实现所需的效果。
这些术语都是与3D图形渲染管线相关的重要概念，它们描述了在渲染3D场景时发生的一系列坐标变换和操作。让我逐一解释：
模型变换（Model Transform）：模型变换是将模型从模型空间（Model Space）转换到世界空间（World Space）的过程。它包括平移、旋转和缩放等操作，将模型放置在世界坐标系中的正确位置。
视图变换（View Transform）：视图变换是将场景从世界空间转换到观察者的视图空间（View Space）的过程。它将模型放置在观察者的视角下，并通常包括摄像机的位置和方向。
投影变换（Projection Transform）：投影变换是将视图空间中的场景投影到裁剪空间（Clip Space）的过程。它定义了观察体的几何形状，常见的投影包括透视投影和正交投影。
透视除法（Perspective Division）：透视除法是将裁剪空间中的坐标转换为标准化设备坐标（Normalized Device Coordinates，NDC）的过程。它通过将坐标除以裁剪空间中的W分量来完成，将坐标转换为位于[-1, 1]范围内的NDC坐标。
视口变换（Viewport Transform）：视口变换是将NDC坐标映射到屏幕空间（Screen Space）的过程。它将NDC坐标映射到屏幕的像素坐标，并通常包括屏幕的大小和位置。
这些变换通常在图形渲染管线中依次执行，以将3D场景从模型空间转换到屏幕上的像素。每个变换都可以表示为矩阵乘法的形式，并且通常在图形API（如OpenGL和WebGL）中以着色器程序的形式实现。理解这些变换对于正确渲染3D场景非常重要，并且对于优化渲染性能也是至关重要的。
入门示例
坐标系
本例（包括后续的例子）模型坐标采用的是右手坐标系：
VBOs + VIOs
TIP
- VBOs: Vertex Buffer Objects，存储顶点、颜色或纹理等数据
- IBOs: Index Buffer Objects，存储元素索引数据
WARNING
Index Buffer: Uint16Array 严格限制