后期-抗锯齿化（Fxaa,Smaa,Mmaa）

概述

在 Three.js 中，有几种常见的抗锯齿方法：

MSAA（多重采样抗锯齿）：这是一种较为常见的抗锯齿技术。通过在每个像素的多个采样点上进行采样和计算，来平滑边缘的锯齿效果。例如，使用 WebGLRenderer 时，可以通过设置 antialias: true 来启用默认的 MSAA 抗锯齿。

FXAA（快速近似抗锯齿）：这是一种后处理抗锯齿方法，计算效率相对较高。它通过分析屏幕上的像素来平滑锯齿边缘。

SSAA（超级采样抗锯齿）：这种方法会在更高的分辨率下进行渲染，然后再缩小到屏幕分辨率，从而达到抗锯齿的效果，但计算成本通常较高。

在实际应用中，需要根据项目的性能要求和效果需求来选择合适的抗锯齿方法。比如，如果对性能要求较高，可以优先考虑 FXAA；如果对画质要求苛刻，且硬件性能足够，SSAA 可能是一个选择。

启用抗锯齿

 renderer = new THREE.WebGLRenderer({
    antialias: true  // 启用抗锯齿
});

Fxaa

快速近似抗锯齿（英语：Fast ApproximateAnti-Aliasing，FXAA），由nVIDIA员工Timothy Lottes开发的一种反锯齿算法。

FXAA占用很少的资源，便可得到良好的反锯齿效果，因为它不是分析3D模型本身，而是分析像素。

import { FXAAShader,ShaderPass } from 'three/examples/jsm/Addons';

this.fxAAShader = new ShaderPass(FXAAShader);  
const pixelRatio = this.target.renderer.getPixelRatio();
this.fxAAShader.material.uniforms['resolution'].value.x = 1 / (this.target.dom.offsetWidth * pixelRatio);
this.fxAAShader.material.uniforms['resolution'].value.y = 1 / (this.target.dom.offsetHeight * pixelRatio);

this.effectComposer.addPass(this.fxAAShader)

/** 
  renderer.setPixelRatio(winddevicePixelRatioow.devicePixelRatio);
	pixelRatio == window.devicePixelRatio
	**/

注意

:::info
pixelRatio为窗口实际设别比例，1 / (this.target.dom.offsetWidth * pixelRatio) 不正确时画面出现遮挡的虚影层

:::

Smaa (增强型子像素形态学抗锯齿）)

import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js';

smaaPass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() );
composer.addPass( smaaPass );

Ssaa( 超级采样抗锯齿）

import { SSAARenderPass } from 'three/addons/postprocessing/SSAARenderPass.js';
ssaaRenderPass = new SSAARenderPass( scene, camera );
ssaaRenderPassP.sampleLevel = 1
ssaaRenderPassP.unbiased = true
ssaaRenderPassP.enabled = true

注意

:::info
sampleLevel 数值过大帧率过低

:::

Msaa(多重采样抗锯齿 )

threejs 默认开启

 renderer = new THREE.WebGLRenderer({
    antialias: true  // 启用抗锯齿
}); 

质量	性能
msaa	msaa
ssaa	fxaa
fxaa	smaa
msaa	ssaa

推荐 msaa > fxaa > smaa > ssaa