Three.js实现辉光效果

使用效果合成器EffectComposer来实现辉光效果

function createEffectComposer() {
    const pixelRatio = renderer.getPixelRatio();
    var renderTarget = new THREE.WebGLRenderTarget(
      window.innerWidth * pixelRatio,
      window.innerHeight * pixelRatio,
      {
        minFilter: THREE.LinearFilter,
        magFilter: THREE.LinearFilter,
        format: THREE.RGBAFormat,
        stencilBuffer: false,
        type: THREE.FloatType,
      }
    );
    renderTarget.texture.name = "EffectComposer.rt1";
    composer = new EffectComposer(renderer, renderTarget);
    composer.setPixelRatio(window.devicePixelRatio);
    composer.setSize(window.innerWidth, window.innerHeight);

    const renderScene = new RenderPass(scene, camera);

    bloomPass = new UnrealBloomPass(
      new THREE.Vector2(window.innerWidth, window.innerHeight),
      1.5,
      0.4,
      0.85
    );
    bloomPass.threshold = params.bloomThreshold;
    bloomPass.strength = params.bloomStrength;
    bloomPass.radius = params.bloomRadius;

    effectFXAA = new ShaderPass(FXAAShader);
    effectFXAA.uniforms["resolution"].value.set(
      1 / window.innerWidth,
      1 / window.innerHeight
    );
    effectFXAA.renderToScreen = true;

    // 去掉条带
    ssaaRenderPass = new SSAARenderPass(scene, camera);
    /**
     * 'Level 0: 1 Sample': 0,
                    'Level 1: 2 Samples': 1,
                    'Level 2: 4 Samples': 2,
                    'Level 3: 8 Samples': 3,
                    'Level 4: 16 Samples': 4,
                    'Level 5: 32 Samples': 5
     *  */
    ssaaRenderPass.sampleLevel = 4;
    ssaaRenderPass.unbiased = true;

    composer.addPass(renderScene);
    composer.addPass(ssaaRenderPass);
    composer.addPass(effectFXAA);
    composer.addPass(bloomPass);
    const gui = new GUI();
    gui.add(params, "bloomThreshold", 0.0, 1.0).onChange(function (value: any) {
      bloomPass.threshold = Number(value);
    });

    gui.add(params, "bloomStrength", 0.0, 3.0).onChange(function (value: any) {
      bloomPass.strength = Number(value);
    });

    gui
      .add(params, "bloomRadius", 0.0, 1.0)
      .step(0.01)
      .onChange(function (value: any) {
        bloomPass.radius = Number(value);
      });
  }

其中UnrealBloomPass是实现辉光的主要方法

然而辉光有副作用
那就是锯齿和条带

解决锯齿是通过FXAAShader实现的

解决条带是通过SSAARenderPass实现的