3D 探索 - Antialiasing

May 14

反走样

这模型渲染出来锯齿怎么这么严重😱

小白(我)眼中的锯齿

像素是一个小方形

  • 若是小方形横排或竖排,那肯定整整齐齐
  • 若是斜着或有弧度的排且小方形不能旋转,那必然会出现阶梯样的锯齿

探索!!!👇

Aliasing(走样)

图形渲染,实际上就是对一个连续函数在空间内进行离散的采样

采样,就是连续量转化成离散量的过程,而走样就是采样不足。

现实生活中的走样现象 -> 摩尔纹,车轮倒转等

深入了解

低频采样无法完美呈现高频信号

详情 👉 GAMES101-现代计算机图形学入门

Games 系列 YYDS !!!吹爆 !!!

几何走样

对几何边缘采样不足导致

视觉上,几何物体的边缘有锯齿

着色走样

对着色器中着色公式(渲染方程)采样不足导致

视觉上,闪烁、噪点

反走样方法

SSAA 超采样抗锯齿

屏幕分辨率 1920x1080,2xSSAA 就会渲染到 3840 x 2160 的缓冲中,然后 Downsampling 到 1920x1080 上,就会变得平滑一点,但显而易见性能很差。

  • OGSS -> 采样时选取 2 个邻近像素
  • RGSS -> 采样时选取 4 个邻近像素

MSAA 多重采样抗锯齿

模糊采样,近似出一个合理的覆盖率(与上面不一样,这个不是提升分辨率,是模糊处理提升采样率)

光栅化的过程是通过像素的中心点来判断该像素是否“上色”,简单理解 MSAA 就是将本有一个中心的像素分了好多个小中心,然后通过处于绘制区域的小中心数量来算出当前像素的覆盖率,如分裂成四个小像素,两个小像素中心在绘制区域内,则覆盖率为50%,然后再进行采样

细说 msaa

其它方法 FXAA SMAA TAA ->

FXAA

简述:将生成好的带锯齿边缘的图经过图像处理获取锯齿部分再把它替换掉(是一种图像处理方式)

TAA

简述:理解为时间上的 MSAA,即在时间上分布小中心点,如每一帧一个像素只有一个中心点,但下一帧中心点位置会变且复用上一帧的数据

总结

好多😅 ,面向结果编程,哪个看着效果差不多又不怎么卡就用哪一个(FXAA & TAA

ThreeJS 抗锯齿使用

// 伪代码 抗锯齿

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera();
const renderer = new THREE.WebGLRenderer({
  antialias: true, // 一般的设置这个就可以了,不需要下面叠 BUFF
});

// ThreeJS 后期处理,就是对渲染好的一帧加 BUFF,注意加 BUFF 顺序
const composer = new EffectComposer(renderer);

// 抗锯齿
const ssaaRenderPass = new SSAARenderPass(scene, camera);
// const fxaaRenderPass = new FXAARenderPass(scene, camera);
// const smaaRenderPass = new SMAARenderPass(scene, camera);

// 图片加抗拒锯 BUFF
composer.addPass(ssaaRenderPass);
// composer.addPass(fxaaRenderPass);
// composer.addPass(smaaRenderPass);

// 一些操作