threejs 画面增强（抗锯齿） fxaa ssaa smaa taa

threejs加载完模型后的，通常显示效果达不到自己的预想，以下讨论几种画面增强方式；使用的技术主要是threejs的后处理技术（postprocess）

什么是fxaa ssaa smaa taa?

其实就是抗锯齿 以上四种抗锯齿方式

aa:antialias的缩写 anti-alias 抗锯齿

#1

fxaa：Fast Approximate Anti-Aliasing  快速近似抗锯齿，名字很好理解，周围啥样 我直接近似，其实就是一种算法 ，算法具体实现方式不必深究，最终实现了抗锯齿，优点：效率高 缺点：不尽人意，事实上，threejs打开抗锯齿的话使用的就是这种方式：

var renderer = new THREE.WebGLRenderer({ antialias: true });

ssaa：super-sampling a-a  超级采样抗锯齿，这种抗锯齿方式听名字就比fxaa（快速近似抗锯齿）效果好，快速近似抗锯齿其实也就是周围采样，超级采样了，肯定比周围采样好 优缺点：超级采样渲染 性能爆炸 耗能高

没有对比  就没有伤害

在sketchfub上下载一个模型 （.obj）

sketchfab上的显式效果

两个字 优雅

使用objloader加载到three中 直接使用第一行代码定义renderer渲染（抗锯齿打开） 效果如下

 

 忽略背景 人物是不是变窄了（失真）？？

 下面 看看sass渲染实现方式

实现方式：

1.初始化一个effectcomposer ；renderer就是你所使用的renderer

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
const effectComposer = new EffectComposer(renderer, renderer.domElement);

来看看composer牛津字典的解释

a person who writes music, especially classical music

一个写音乐，尤其是经典（传统）音乐的人

现在 你创建了一个effect（效果）音乐人，你还需要给他一些你想要的效果，在three中表现为你传给他一段段的pass，他根据这一段段的pass来实现指定的（抗锯齿、特效）效果，需要注意的是你传给他pass的顺序，他会根据你传给他的顺序执行程序

2.增加一个常客 RenderPass

事实上这个renderPass貌似并没有什么用，但是习惯性先把这个renderpass传给effectComposer

通过effectComposer.addPass()添加到composer中

import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'
const renderPass = new RenderPass(scene, camera);
effectComposer.addPass(renderPass);

3. 增加第二个pass：ssaaPass

import { SSAARenderPass } from 'three/examples/jsm/postprocessing/SSAARenderPass';
const sassRenderPass = new SSAARenderPass(scene, camera)
effectComposer.addPass(sassRenderPass )

4.使用我们的音乐家演奏

给音乐家加了这么多pass，那肯定是使用音乐家来演奏（渲染）

 renderer.setAnimationLoop(()=>{
        effectComposer.render()
    })

let us see the effect:

 是不是很有改善

#2 权衡的艺术： smaa

smaa：子像素增强抗锯齿 这是在ssaa和fxaa下的一种抗锯齿方式；也就是最佳能耗比

话不多说， 上代码

import { SMAAPass } from 'three/examples/jsm/postprocessing/SMAAPass'
smaaPass = new SMAAPass(offsetWidth * renderer.getPixelRatio(), offsetHeight * renderer.getPixelRatio());
effectComposer.addPass(smaaPass)

smaa渲染效果

 至于 taa

time aa 时间抗锯齿

来看看threejs推荐什么时候用：

 * When there is no motion in the scene, the TAA render pass accumulates jittered camera samples across frames to create a high quality anti-aliased result.

当场景no motion（没有运动、静止）的时候 ；TAA渲染过程在帧之间累积抖动的相机样本，以创建高质量的抗锯齿结果

就是2张或者多帧合成一帧呗

在此不多赘述 有兴趣的读者可以去了解一下 在渲染静态three页面时候使用taa pass或许会有意想不到的效果！