TAA quirks

Chaining effects results in glitch.

by rayfoundry

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/rayfoundry-tmp/magnificient-watch.min.js"></script>
<body>    	
        <div class="world" id="world"></div>			    
</body>

JavaScript

///////////////

// GLOBAL VARIABLES
var viewer;
var clock = new THREE.Clock();
var cameraImmobile = true; 
var canRotateOnOwn = true;

//THREEJS RELATED VARIABLES

var scene,
    camera, fieldOfView, aspectRatio, nearPlane, farPlane,
    renderer,
    container,
    controls,
    sceneObj;

var composer,
    copyPass,
    taaRenderPass,
    colorCorrectLUTPass,
    chromaticAbberationPass,
    bokehPass,
    renderPass;

//SCREEN & MOUSE VARIABLES

var HEIGHT, WIDTH,
    mousePos = { x: 0, y: 0 };

//INIT THREE JS, SCREEN AND MOUSE EVENTS

function createScene() {  
      
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;

  scene = new THREE.Scene();
  aspectRatio = WIDTH / HEIGHT;
  fieldOfView = 60;
  nearPlane = .1;
  farPlane = 500;
  camera = new THREE.PerspectiveCamera(
    fieldOfView,
    aspectRatio,
    nearPlane,
    farPlane
    );
  //scene.fog = new THREE.Fog(0xf7d9aa, 100,950);
  camera.position.x = 0;
  camera.position.z = 4;
  camera.position.y = 0.2;  

  //INIT RENDERER
  renderer = new THREE.WebGLRenderer({ alpha: false, antialias: false });
  renderer.setClearColor( 0x000000 );
  renderer.setPixelRatio( window.devicePixelRatio ? window.devicePixelRatio : 1 );
  renderer.setSize(WIDTH, HEIGHT);        

  // postprocessing
  composer = new THREE.EffectComposer( renderer );  
    
  //TAA AntiAliasing PASS
  taaRenderPass = new THREE.TAARenderPass( scene, camera );  
  taaRenderPass.sampleLevel = 2;  
  composer.addPass( taaRenderPass );    
  
  //Effect 2  
  chromaticAbberationPass = new THREE.ShaderPass( THREE.RGBShiftShader );
  chromaticAbberationPass.uniforms[ 'amount' ].value = 0.0002;  
  //chromaticAbberationPass.renderToScreen = true;  
  composer.addPass( chromaticAbberationPass );

  //Effect 1
  colorCorrectionPass = new THREE.ShaderPass( THREE.ColorCorrectionShader );
  colorCorrectionPass.renderToScreen = true;      
  composer.addPass( colorCorrectionPass );

  /*
  //Effect 3
  colorCorrectLUTPass = new...