Advanced Compositing

by [Twiner]

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/postprocessing.min.js"></script>
<script src="https://vanruesc.github.io/delta-controls/build/delta-controls.min.js"></script>

CSS

body {
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

JavaScript

/**
 * Loads scene assets.
 *
 * @return {Promise} A promise that will be fulfilled as soon as all assets have been loaded.
 */

function load() {

	const assets = new Map();
	const loadingManager = new THREE.LoadingManager();
	const cubeTextureLoader = new THREE.CubeTextureLoader(loadingManager);

	const path = "https://vanruesc.github.io/postprocessing/public/demo/textures/skies/space3/";
	const format = ".jpg";
	const urls = [
		path + "px" + format, path + "nx" + format,
		path + "py" + format, path + "ny" + format,
		path + "pz" + format, path + "nz" + format
	];

	return new Promise((resolve, reject) => {

		loadingManager.onError = reject;
		loadingManager.onProgress = (item, loaded, total) => {

			if(loaded === total) {

				resolve(assets);

			}

		};

		cubeTextureLoader.load(urls, function(textureCube) {

			assets.set("sky", textureCube);

		});

		const searchImage = new Image();
		const areaImage = new Image();

		searchImage.addEventListener("load", function() {

			assets.set("smaa-search", this);
			loadingManager.itemEnd("smaa-search");

		});

		areaImage.addEventListener("load", function() {

			assets.set("smaa-area", this);
			loadingManager.itemEnd("smaa-area");

		});

		// Register the new image assets.
		loadingManager.itemStart("smaa-search");
		loadingManager.itemStart("smaa-area");

		// Load the images asynchronously.
		searchImage.src = POSTPROCESSING.SMAAEffect.searchImageDataURL;
		areaImage.src = POSTPROCESSING.SMAAEffect.areaImageDataURL;

	});

}

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

function initialize(assets) {

	const viewport = document.body;
	const width = window.innerWidth;
	const height = window.innerHeight;
	const aspect = width / height;

	// Scene, Clock, Renderer and Composer.

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

	const backgroundScene = new THREE.Scene();
	backgroundScene.background = assets.get("sky");

	const clock =...