THREE.js - AA and clear color

by Anton Bagayev

HTML

<head>
  <script src="https://threejs.org/build/three.js"></script>
  <script src="https://threejs.org/examples/js/WebGL.js"></script>
  <script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
	<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>

  <script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>

  <script src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
  <script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
  <script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>
  <script src="https://threejs.org/examples/js/shaders/FXAAShader.js"></script>
</head>

<body>
  <div id="container"></div>
</body>

CSS

body {
  background-color: #00ffff;
}

JavaScript

if ( WEBGL.isWebGLAvailable() === false ) {

  document.body.appendChild( WEBGL.getWebGLErrorMessage() );

}

var camera, scene, renderer, clock, group, gui;

var composer1, fxaaPass;

 var params = {

   clearColorAlpha: 1.0

 };

init();
animate();

clearGui();

function clearGui() {

  if ( gui ) gui.destroy();

  gui = new dat.GUI();

  gui.add( params, "clearColorAlpha", 0, 1 );

  gui.open();

}

function init() {

  var container = document.getElementById( 'container' );

  camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
  camera.position.z = 500;

  scene = new THREE.Scene();
  scene.fog = new THREE.Fog( 0xcccccc, 100, 1500 );

  clock = new THREE.Clock();

  var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
  hemiLight.position.set( 0, 1000, 0 );
  scene.add( hemiLight );

  var dirLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
  dirLight.position.set( - 3000, 1000, - 1000 );
  scene.add( dirLight );

  //

  group = new THREE.Group();

  var geometry = new THREE.TetrahedronBufferGeometry( 30 );
  var material = new THREE.MeshStandardMaterial( { color: 0xee0808, flatShading: true } );

  for ( var i = 0; i < 10; i ++ ) {

    var mesh = new THREE.Mesh( geometry, material );

    mesh.position.x = Math.random() * 500 - 250;
    mesh.position.y = Math.random() * 500 - 250;
    mesh.position.z = Math.random() * 500 - 250;

    mesh.scale.setScalar( Math.random() * 2 + 1 );

    mesh.rotation.x = Math.random() * Math.PI;
    mesh.rotation.y = Math.random() * Math.PI;
    mesh.rotation.z = Math.random() * Math.PI;

    group.add( mesh );

  }

  scene.add( group );

  //

  renderer = new THREE.WebGLRenderer({
                    antialias:              false,
                    alpha:                  true,
                    preserveDrawingBuffer:  true
                });
  renderer.toneMapping = THREE.LinearToneMapping;
  renderer.autoClear = false;
  renderer.autoUpdateScene = false;
 ...