光栅化

光栅化

前边的部分我们学习了MVP矩阵，如何把一个物体投影到一个规则立方体内([-1,1]3)，如何把这个规则立方体内点的物体投影在屏幕上，转变为二维图像，这就是光栅化的过程、

屏幕 把东西画在屏幕上

当进行完 MVP 变换之后，所有需要绘制的点都变换到

的立方体空间中了。

下一步工作就是要把结果绘制到屏幕上，在这之前先了解一下什么是屏幕。

屏幕由一系列的像素(Pixel，是 Picture element 的缩写)排布形成，像素的数量由分辨率决定，如分辨率是 1920 x 1080 的屏幕，就包含了 1920 x 1080 个像素。

每个像素表示的颜色由红（red）、绿（green）、蓝（blue）三种颜色混合而成。

抗锯齿

MSAA (多重采样抗锯齿)

事实上，刚刚提到的计算像素覆盖面积的做法是很难实现的。但我们可以通过超采样的方式来模拟。

所谓的超采样，是指在一个像素里面放多个采样点来检测三角形是否有被覆盖。

:::color2
MSAA 是抗锯齿操作的第一步，也就是模糊操作（求平均）。

MSAA 增加采样点，并不是为了提高采样率（分辨率没有提高），而是为了得到一个更合理的三角形覆盖率。

MSAA 的代价是计算量大增，如果一个像素里面有 4 个采样点，那么计算量就大了 4 倍；如果一个像素里面有 16 个采样点，那么计算量就大了 16 倍。（事实上，工业界会会复用、优化这些采样点，因此计算量并没有增加太多）。

:::

:::color2
工作原理：

• 对每个像素进行多个采样点采样

• 计算采样点被物体覆盖的比例

• 根据比例决定最终像素颜色

优点：

• 图像质量好，特别是对几何边缘

• 没有时间性模糊问题

缺点：

• 性能开销大（采样点越多开销越大）

• 只对几何边缘有效，对材质/着色器内部产生的锯齿无效

:::

FXAA (快速近似抗锯齿)

:::color2
工作原理：

• 是后处理抗锯齿技术

• 在渲染完成后检测画面中的边缘

• 对检测到的边缘进行模糊处理

优点：

• 性能开销小

• 能处理所有类型的锯齿（包括着色器产生的）

缺点：

• 可能会使画面整体略显模糊

• 可能会丢失一些细节

:::

:::color2
快速近似抗锯齿（Fast Approximate Anti-Aliasing，简称 FXAA）：大致上来说，该方法是在得到最终图像后的一种处理，通过分析最终得到的图像，找到锯齿边缘，通过柔化、模糊等方式处理锯齿边缘，降低锯齿的可视性，来达到抗锯齿的目的。FXAA 具有消耗低，速度快的优点。

:::

Cesium 默认使用的是 FXAA (Fast Approximate Anti-aliasing)。可以通过以下代码启用/禁用 FXAA：

选择 FXAA 的原因：

性能开销小，适合 Web 场景的实时渲染

实现简单，作为后处理技术易于集成

对 WebGL 支持良好，兼容性强

足以满足大多数地理可视化场景的需求

TAA (时间抗锯齿)、

:::color2 工作原理：

• 利用前面几帧的信息

• 在时间维度上进行采样和混合

• 通过抖动采样模式获取子像素信息

优点：

• 图像质量很好

• 性能开销适中

• 可以处理半透明物体和细节

缺点：

• 在运动场景中可能产生拖影

• 需要额外存储前帧信息

• 实现复杂度高

:::

:::color2

• MSAA：追求画质、性能够用的场景

• FXAA：追求性能、对画质要求不是特别高的场景

• TAA：现代游戏引擎的主流选择，平衡了质量和性能

:::

:::color2
时间性抗锯齿（Temporal Anti-Aliasing，简称 TAA）：和一般的抗锯齿对像素的采样不同，TAA 是对时间的采样，将上一帧已经得到的结果，作为当前帧的参考，避免直接计算当前帧像素的颜色值，而是复用或着说参考像素在之前帧的颜色值。会导致画面比较模糊，且对于运动的物体效果会很不好。TAA 有升级版，即 TXAA，实际为 TAA+MSAA 的组合。

:::

重心坐标插值


当顶点在纹理上的对应 uv 坐标成功找到之后，三角形三个顶点中间的值需要用三角形的重心坐标插值计算得到

插值的运算不仅仅在纹理中，包括三角形内部的颜色和法线都可以用插值来计算并由此得到一个平滑的过度。

满足这个说明点 p 在三角形内

这是求出了 p 点的纹理坐标

重心坐标(Barycentric Coordinates)是在计算机图形学中用于在三角形内部进行插值的一种技术。它的基本思想是：三角形内的任意一点都可以用三个权重来表示，这些权重表示了该点受三角形三个顶点的影响程度。

基本定义

假设有一个三角形 ABC，内部任意一点 P 可以表示为：P = αA + βB + γC ,其中 α + β + γ = 1，且 α,β,γ ≥ 0

α = Area(PBC)/Area(ABC)

β = Area(PCA)/Area(ABC)

γ = Area(PAB)/Area(ABC)

重心坐标的表示就是(α,β,γ),如 A 点的重心坐标就是(1,0,0)。那么如何确定任意一点的重心坐标呢？这里要通过面积比来算，如上图中一点的坐标，α,β,γ 各个值就是另两个顶点连成的三角形在总面积的占比，如上图所示。

因为 ACA 的面积是 0， 所以 A 点的 β 是 0

而通过如上的表示，我们马上可以找到一个及其特殊的点，就是三角形自己的重心，它的重心坐标是(1/3,1/3,1/3)，这个点与三个顶点连线分成的三个三角形面积也恰好相等。

上图为对于三角形内任意一点的重心坐标计算的通用表达式

通过以上的介绍，我们知道了三角形内部的任意一点的坐标可以通过重心坐标求出表示出来，那么我们也可以利用重心坐标求三角形内部任意一点的其它属性，其他三角形内部的属性也可以用重心坐标的线性组合表示出来，如上图的颜色插值。（注意：重心坐标并没有投影下不变的性质，所以在插值如深度这种空间中的性质时，应该先在 3D 空间中用三维的坐标算出三维空间中的重心坐标进行插值，然后再放回而不能直接在投影之后的三角形中做插值。至于如何在已经投影的三角形在回到三维空间，应用逆变换即可。）

// 假设三个顶点都有颜色属性
Color interpolatedColor = α * colorA + β * colorB + γ * colorC;

// 纹理坐标插值
UV interpolatedUV = α * uvA + β * uvB + γ * uvC;