2 scenes postprocess rendering

by rocket5tim

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://threejs.org/examples/js/shaders/BokehShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/BokehPass.js"></script>
<script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<canvas class="webgl"></canvas>

JavaScript

let canvas, fgScene, bgScene, camera, renderer, controls, bgRenderPass, fgRenderPass, composer

const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
}

function init() {
  canvas = document.querySelector('canvas.webgl')

  fgScene = new THREE.Scene()
  bgScene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(40, sizes.width / sizes.height, 0.1, 100);
  camera.position.copy(new THREE.Vector3(0, 2, 10));
  camera.lookAt(new THREE.Vector3());

  renderer = new THREE.WebGLRenderer({
    //alpha: true,
    canvas: canvas,
  });
  renderer.autoClear = true;
  renderer.setSize(sizes.width, sizes.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

  bgRenderPass = new THREE.RenderPass(bgScene, camera);
  bgRenderPass.renderToScreen = true
  bgRenderPass.clear = false
  bgRenderPass.clearDepth = true

  fgRenderPass = new THREE.RenderPass(fgScene, camera);
  fgRenderPass.renderToScreen = true
  fgRenderPass.clear = false
  fgRenderPass.clearDepth = true

  const bokehPass = new THREE.BokehPass(bgScene, camera, {
    focus: 8.47,
    aperture: 200,
    maxblur: 0.01,

    width: sizes.width,
    height: sizes.height
  });

  composer = new THREE.EffectComposer(renderer);
  //bokehPass.needsSwap = true;

  composer.addPass(bgRenderPass);
  composer.addPass(fgRenderPass);
  composer.addPass(bokehPass);

  window.addEventListener('resize', resize, false);

  controls = new THREE.OrbitControls(camera, canvas);
  controls.enableDamping = true;
}

function createSceneObjects() {

  // foreground objects
  const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  directionalLight.position.set(10, 10, 10);
  directionalLight.lookAt(new THREE.Vector3());
  fgScene.add(directionalLight);

  const foregroundCube = new THREE.Mesh(
    new THREE.BoxBufferGeometry(1, 1, 1),
    new THREE.MeshStandardMaterial({
      color: 'grey'
    })
  );
  fgScene.add(foregroundCube);

  // background objects
  const ambientLight = new...