fix(postprocessing): use premult alpha (#277)

src/postprocessing/EffectComposer.ts

@@ -1,4 +1,4 @@
-import { Clock, LinearFilter, RGBAFormat, Vector2, WebGLRenderer, WebGLRenderTarget } from 'three'
+import { Clock, LinearFilter, RGBAFormat, NoBlending, Vector2, WebGLRenderer, WebGLRenderTarget } from 'three'
 import { CopyShader } from '../shaders/CopyShader'
 import { ShaderPass } from './ShaderPass'
 import { MaskPass, ClearMaskPass } from './MaskPass'
@@ -65,6 +65,8 @@ class EffectComposer<TRenderTarget extends WebGLRenderTarget = WebGLRenderTarget
     }
 
     this.copyPass = new ShaderPass(CopyShader)
+    // @ts-ignore
+    this.copyPass.material.blending = NoBlending
 
     this.clock = new Clock()
   }

src/postprocessing/SSAARenderPass.js

@@ -1,14 +1,4 @@
-import {
-  CustomBlending,
-  OneFactor,
-  AddEquation,
-  SrcAlphaFactor,
-  Color,
-  HalfFloatType,
-  ShaderMaterial,
-  UniformsUtils,
-  WebGLRenderTarget,
-} from 'three'
+import { AdditiveBlending, Color, HalfFloatType, ShaderMaterial, UniformsUtils, WebGLRenderTarget } from 'three'
 import { Pass, FullScreenQuad } from './Pass'
 import { CopyShader } from '../shaders/CopyShader'
 
@@ -47,14 +37,8 @@ class SSAARenderPass extends Pass {
       transparent: true,
       depthTest: false,
       depthWrite: false,
-
-      // do not use AdditiveBlending because it mixes the alpha channel instead of adding
-      blending: CustomBlending,
-      blendEquation: AddEquation,
-      blendDst: OneFactor,
-      blendDstAlpha: OneFactor,
-      blendSrc: SrcAlphaFactor,
-      blendSrcAlpha: OneFactor,
+      premultipliedAlpha: true,
+      blending: AdditiveBlending,
     })
 
     this.fsQuad = new FullScreenQuad(this.copyMaterial)

src/postprocessing/SavePass.js

@@ -1,4 +1,4 @@
-import { ShaderMaterial, UniformsUtils, WebGLRenderTarget } from 'three'
+import { NoBlending, ShaderMaterial, UniformsUtils, WebGLRenderTarget } from 'three'
 import { Pass, FullScreenQuad } from './Pass'
 import { CopyShader } from '../shaders/CopyShader'
 
@@ -18,6 +18,7 @@ class SavePass extends Pass {
       uniforms: this.uniforms,
       vertexShader: shader.vertexShader,
       fragmentShader: shader.fragmentShader,
+      blending: NoBlending,
     })
 
     this.renderTarget = renderTarget

src/postprocessing/TAARenderPass.js

@@ -19,6 +19,7 @@ class TAARenderPass extends SSAARenderPass {
 
     this.sampleLevel = 0
     this.accumulate = false
+    this.accumulateIndex = -1
   }
 
   render(renderer, writeBuffer, readBuffer, deltaTime) {
@@ -50,6 +51,9 @@ class TAARenderPass extends SSAARenderPass {
     const autoClear = renderer.autoClear
     renderer.autoClear = false
 
+    renderer.getClearColor(this._oldClearColor)
+    const oldClearAlpha = renderer.getClearAlpha()
+
     const sampleWeight = 1.0 / jitterOffsets.length
 
     if (this.accumulateIndex >= 0 && this.accumulateIndex < jitterOffsets.length) {
@@ -74,11 +78,16 @@ class TAARenderPass extends SSAARenderPass {
         }
 
         renderer.setRenderTarget(writeBuffer)
+        renderer.setClearColor(this.clearColor, this.clearAlpha)
         renderer.clear()
         renderer.render(this.scene, this.camera)
 
         renderer.setRenderTarget(this.sampleRenderTarget)
-        if (this.accumulateIndex === 0) renderer.clear()
+        if (this.accumulateIndex === 0) {
+          renderer.setClearColor(0x000000, 0.0)
+          renderer.clear()
+        }
+
         this.fsQuad.render(renderer)
 
         this.accumulateIndex++
@@ -89,6 +98,7 @@ class TAARenderPass extends SSAARenderPass {
       if (this.camera.clearViewOffset) this.camera.clearViewOffset()
     }
 
+    renderer.setClearColor(this.clearColor, this.clearAlpha)
     const accumulationWeight = this.accumulateIndex * sampleWeight
 
     if (accumulationWeight > 0) {
@@ -103,11 +113,11 @@ class TAARenderPass extends SSAARenderPass {
       this.copyUniforms['opacity'].value = 1.0 - accumulationWeight
       this.copyUniforms['tDiffuse'].value = this.holdRenderTarget.texture
       renderer.setRenderTarget(writeBuffer)
-      if (accumulationWeight === 0) renderer.clear()
       this.fsQuad.render(renderer)
     }
 
     renderer.autoClear = autoClear
+    renderer.setClearColor(this._oldClearColor, oldClearAlpha)
   }
 
   dispose() {

src/postprocessing/TexturePass.js

@@ -19,6 +19,7 @@ class TexturePass extends Pass {
       fragmentShader: shader.fragmentShader,
       depthTest: false,
       depthWrite: false,
+      premultipliedAlpha: true,
     })
 
     this.needsSwap = false