threejs抗锯齿（推荐MSAA）

各种抗锯齿：

这里不一一介绍抗锯齿的概念了，需要了解的自行百度

FXAA：锯齿感不是特别严重，推荐使用FXAA（效果不好，但主推性能）
SMAA：不推荐，效果不好，性能方面还不如FXAA
SSAA：效果还可以，但是性能方面太拉垮
MSAA：多重采样抗锯齿，threejs本身的抗锯齿处理就是MSAA，效果还可以，起码比上面几个强，性能方面比SSAA强得多

---

使用方式：

平时添加特效一样，使用效果合成器（EffectComposer）替换常规渲染（WebGLRenderer）
然后在EffectComposer里添加一个绘图缓冲WebGLRenderTarget即可
simples作为WebGLRenderTarget的参数，定义MSAA的样本计数

---

代码：

EffectComposer 部分

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js'
import { GammaCorrectionShader } from 'three/examples/jsm/shaders/GammaCorrectionShader.js'
import * as THREE from 'three'
import { webglRender } from './render'

let composer
let size, renderTarget

function createComposer() {
  size = webglRender.getDrawingBufferSize(new THREE.Vector2())
  renderTarget = new THREE.WebGLRenderTarget(size.width, size.height, { samples: 8 })
  composer = new EffectComposer(webglRender)

  // 渲染通道
  composer.addPass(new RenderPass(scene, camera))
  // 伽马矫正通道
  composer.addPass(new ShaderPass((GammaCorrectionShader)))
}

export{ composer, createComposer }

渲染animate部分使用 composer.render() 替换 webglRender.render(scene, camera) 即可

function animate() {
  requestAnimationFrame(animate)
  orbitControls.update()
  // webglRender.render(scene, camera)
  composer.render()
}

上面引入的./render是WebGLRenderer
避免误导，特地指出，这些代码是平时项目里抠出来的，比较零散，见谅
./render部分，这部分没有本文特殊操作，只做上述./render的诠释，renderer参照，把所有零碎的东西丢进了Store，方便封装成组件，各路大神按照自己的写就好

import * as THREE from 'three'
import { useThreeStore } from '@/store/modules/three'

let webglRender

function createWebglRender() {
  let { offsetWidth: width, offsetHeight: height } = useThreeStore().dom

  webglRender = new THREE.WebGLRenderer({
    antialias: true, //抗锯齿
    alpha: true, //是否开启透明
    logarithmicDepthBuffer: true, //用来处理图层交叉闪烁问题
    localClippingEnabled: true,
    preserveDrawingBuffer: true, //开启绘图的缓冲
    powerPreference: 'high-performance', //精度
    sortObjects: false,
    depthWrite: false, //透明物体深度问题
    depthTest: true,
    autoClear: false
  })
  //设置分辨率，有时候*2比常态window.devicePixelRatio效果要好，而且没有影响，但*2以上就会出问题
  webglRender.setPixelRatio(window.devicePixelRatio * 2) 
  webglRender.setSize(width, height)

  // webglRender.toneMapping = THREE.ACESFilmicToneMapping
  // webglRender.toneMappingExposure = 1
  webglRender.outputColorSpace = THREE.SRGBColorSpace
  // webglRender.useLegacyLights = true //物理光照,衰减光照，版本three0.15x.0新版以后更新平替physicallyCorrectLights
  webglRender.physicallyCorrectLights = true //物理光照,衰减光照
  webglRender.outputEncoding = THREE.sRGBEncoding

  // 阴影渲染
  webglRender.shadowMap.enabled = true
  webglRender.shadowMap.type = THREE.PCFSoftShadowMap // 阴影类型
  useThreeStore().dom.appendChild(webglRender.domElement)
}

export { createWebglRender, webglRender }