Post Processing with A-Frame

HTML

<script src="https://aframe.io/releases/1.4.1/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/postprocessing@6.30.2/build/postprocessing.min.js"></script>
<body>
	<a-scene renderer="antialias: false">
		<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
		<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
		<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
		<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
		<a-sky color="#ECECEC"></a-sky>
	</a-scene>
</body>

JavaScript

const {
	EffectComposer,
	EffectPass,
	NoiseEffect,
	RenderPass,
  SepiaEffect,
	SMAAEffect,
	SMAAImageLoader,
	VignetteEffect
} = POSTPROCESSING;

const postprocessingSystem = {

	composer: null,
	originalRenderMethod: null,

	/**
	 * Initializes this system.
	 */

	init() {

		const sceneEl = this.sceneEl;
		const scene = sceneEl.object3D;
		const renderer = sceneEl.renderer;
		const render = renderer.render;
		const camera = sceneEl.camera;

		const composer = new EffectComposer(renderer);
		this.composer = composer;
		this.originalRenderMethod = render;

		const smaaEffect = new SMAAEffect();
		const noiseEffect = new NoiseEffect();
		const sepiaEffect = new SepiaEffect();
		const vignetteEffect = new VignetteEffect();

		noiseEffect.blendMode.opacity.value = 0.6;
		sepiaEffect.blendMode.opacity.value = 0.3;

		const renderPass = new RenderPass(scene, camera);
		const effectPass = new EffectPass(
			camera,
			smaaEffect,
			noiseEffect,
			sepiaEffect,
			vignetteEffect
		);

		composer.addPass(renderPass);
		composer.addPass(effectPass);

		// Hijack the render method.
		let calledByComposer = false;

		renderer.render = function() {

			if(calledByComposer) {

				render.apply(renderer, arguments);

			} else {

				calledByComposer = true;
				composer.render();
				calledByComposer = false;

			}

		};

	},

	/**
	 * Clean up when the system gets removed.
	 */

	remove() {

		this.composer.renderer.render = this.originalRenderMethod;
		this.composer.dispose();

	}

};

// Wait until A-Frame is ready.
document.querySelector("a-scene").addEventListener("loaded", () => {

	AFRAME.registerSystem("postprocessing", postprocessingSystem);

});