Post Processing - Sandbox

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/delta-controls@latest/build/delta-controls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/postprocessing.min.js"></script>
<div class="title left">Relative Size</div><div class="title right">Fixed Size</div>

CSS

body { font-family: sans-serif; margin: 0; overflow: hidden; white-space: nowrap; }
canvas { display: inline-block; }

.title { color: white; position: absolute; top: 5px; }
.left { left: 5px; }
.right { left: calc(50% + 5px); }

JavaScript

// Shortcuts.
const T = THREE, PP = POSTPROCESSING;

/**
 * Creates the scene.
 *
 * @param {Map} assets - Preloaded scene assets.
 */

function initialize() {

	const viewport = document.body;
	const width = window.innerWidth / 2; // Occupy half the screen.
	const height = window.innerHeight;
	const aspect = width / height;

	// Scene, Clock, Renderer and Composer.

	const scene = new T.Scene();
	scene.fog = new T.FogExp2(0x000000, 0.025);

	const clock = new T.Clock();
	const renderer1 = new T.WebGLRenderer({ antialias: false });
	const renderer2 = new T.WebGLRenderer({ antialias: false });

	renderer1.setSize(width, height);
	renderer1.setClearColor(scene.fog.color, 1);
	viewport.appendChild(renderer1.domElement);

	renderer2.setSize(width, height);
	renderer2.setClearColor(scene.fog.color, 1);
	viewport.appendChild(renderer2.domElement);

	const composer1 = new PP.EffectComposer(renderer1);
	const composer2 = new PP.EffectComposer(renderer2);

	// Camera and Controls.

	const camera = new T.PerspectiveCamera(50, aspect, 0.1, 200);
	camera.position.set(0, 0, 9);
	camera.lookAt(scene.position);

	// Lights.

	scene.add(new T.AmbientLight(0xcccccc));
	scene.add(new T.DirectionalLight(0xffffff));

	// Objects.

  const object = new T.Object3D();
  const geometry = new T.SphereBufferGeometry(1, 4, 4);

  let material, mesh;

  for(let i = 0; i < 100; ++i) {

    material = new T.MeshPhongMaterial({
      color: 0xffffff * Math.random(),
      flatShading: true
    });

    mesh = new T.Mesh(geometry, material);
    mesh.position.set(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).normalize();
    mesh.position.multiplyScalar(Math.random() * 10);
    mesh.rotation.set(Math.random() * 2, Math.random() * 2, Math.random() * 2);
    mesh.scale.multiplyScalar(Math.random());
    object.add(mesh);

  }

  scene.add(object);

	// Passes.

	const renderPass1 = new PP.RenderPass(scene, camera);
	const blurPass1 = new PP.BlurPass();

	blurPass1.renderToScreen...