jsantell/memory-leak.html

## memory-leak.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>threejs webgl - materials - equirectangular exr image based lighting</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				color: #fff;
				font-family:Monospace;
				font-size:13px;
				text-align:center;

				background-color: #000;

				margin: 0px;
				overflow: hidden;
			}
			a { color: #00f }

			#info {
				position: absolute;
				top: 0px; width: 100%;
				padding: 5px;
			}
		</style>
	</head>
	<body>

		<div id="container"></div>
		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">threejs</a> - Example of an IBL (Image based lighting) pipeline based around<br> equirectangular EXR lightprobe data. Created by <a href="https://github.com/richardmonette" target="_blank" rel="noopener">Richard Monette</a></div>

		<script src="../build/three.js"></script>
		<script src="js/controls/OrbitControls.js"></script>

		<script src="js/loaders/EXRLoader.js"></script>
		<script src="js/loaders/EquirectangularToCubeGenerator.js"></script>

		<script src="js/WebGL.js"></script>
		<script src="js/libs/stats.min.js"></script>

		<script src="js/pmrem/PMREMGenerator.js"></script>
		<script src="js/pmrem/PMREMCubeUVPacker.js"></script>

		<script>

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

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

			}

			var container, stats;
			var camera, scene, renderer, controls, objects = [];
			var standardMaterial, floorMaterial;
			var pngCubeRenderTarget, exrCubeRenderTarget;
			var pngBackground, exrBackground;

			init();
			animate();

            (async function() {
                const wait = ms => new Promise(resolve => setTimeout(resolve, ms));

                while (1) {
                    const t = (performance.now() / 1000).toFixed(2);
                    console.log('updating texture', `${t}s`);
                    await updateTexture();
                    await wait(1000);
                }
            })();
			function init() {

                THREE.Cache.enabled = true;
				container = document.createElement( 'div' );
				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
				camera.position.set( 0, 0, 120 );

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0x000000 );

				renderer = new THREE.WebGLRenderer();
				renderer.toneMapping = THREE.LinearToneMapping;

				standardMaterial = new THREE.MeshStandardMaterial( {
					map: null,
					color: 0xffffff,
					metalness: 1,
					roughness: 0,
					envMapIntensity: 1.0
				} );

				var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );

				var torusMesh1 = new THREE.Mesh( geometry, standardMaterial );

				scene.add( torusMesh1 );
				objects.push( torusMesh1 );

				floorMaterial = new THREE.MeshBasicMaterial( {
					color: 0xffffff
				} );

				var planeGeometry = new THREE.PlaneBufferGeometry( 200, 200 );
				var planeMesh1 = new THREE.Mesh( planeGeometry, floorMaterial );
				planeMesh1.position.y = - 50;
				planeMesh1.rotation.x = - Math.PI * 0.5;
				scene.add( planeMesh1 );

				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );

				container.appendChild( renderer.domElement );

				renderer.gammaInput = false;
				renderer.gammaOutput = true;

				stats = new Stats();
				container.appendChild( stats.dom );

				controls = new THREE.OrbitControls( camera, renderer.domElement );
				controls.minDistance = 50;
				controls.maxDistance = 300;

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

			}

			function onWindowResize() {

				var width = window.innerWidth;
				var height = window.innerHeight;

				camera.aspect = width / height;
				camera.updateProjectionMatrix();

				renderer.setSize( width, height );

			}

			function animate() {

				requestAnimationFrame( animate );

				stats.begin();
				render();
				stats.end();

			}

            async function updateTexture() {
                return new Promise(resolve => {
                    new THREE.EXRLoader().load( 'textures/piz_compressed.exr', function ( texture ) {
                        // Clean up previous map/renderTarget
                        if (standardMaterial.envMap) {
                            standardMaterial.envMap.dispose();
                            floorMaterial.map = standardMaterial.envMap = null;
                        }

                        texture.minFilter = THREE.NearestFilter;
                        texture.magFilter = THREE.NearestFilter;
                        texture.encoding = THREE.LinearEncoding;

                        var cubemapGenerator = new THREE.EquirectangularToCubeGenerator( texture, { resolution: 512, type: THREE.HalfFloatType } );
                        var cubeMapTexture = cubemapGenerator.update( renderer );

                        var pmremGenerator = new THREE.PMREMGenerator( cubeMapTexture );
                        pmremGenerator.update( renderer );

                        var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
                        pmremCubeUVPacker.update( renderer );

                        var renderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
                        var envMap = renderTarget.texture;

                        texture.dispose();
                        cubemapGenerator.dispose();
                        pmremGenerator.dispose();
                        pmremCubeUVPacker.dispose();

                        envMap.dispose = () => {
                            renderTarget.dispose();
                        }

                        standardMaterial.envMap = envMap;
                        standardMaterial.needsUpdate = true;

                        floorMaterial.map = envMap;
                        floorMaterial.needsUpdate = true;

                        resolve();
                    } );
                });
            }

			function render() {

				for ( var i = 0, l = objects.length; i < l; i ++ ) {

					var object = objects[ i ];
					object.rotation.y += 0.005;

				}

				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>threejs webgl - materials - equirectangular exr image based lighting</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
	body {
	color: #fff;
	font-family:Monospace;
	font-size:13px;
	text-align:center;

	background-color: #000;

	margin: 0px;
	overflow: hidden;
	}
	a { color: #00f }

	#info {
	position: absolute;
	top: 0px; width: 100%;
	padding: 5px;
	}
	</style>
	</head>
	<body>

	<div id="container"></div>
	<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">threejs</a> - Example of an IBL (Image based lighting) pipeline based around<br> equirectangular EXR lightprobe data. Created by <a href="https://github.com/richardmonette" target="_blank" rel="noopener">Richard Monette</a></div>

	<script src="../build/three.js"></script>
	<script src="js/controls/OrbitControls.js"></script>

	<script src="js/loaders/EXRLoader.js"></script>
	<script src="js/loaders/EquirectangularToCubeGenerator.js"></script>

	<script src="js/WebGL.js"></script>
	<script src="js/libs/stats.min.js"></script>

	<script src="js/pmrem/PMREMGenerator.js"></script>
	<script src="js/pmrem/PMREMCubeUVPacker.js"></script>

	<script>

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

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

	}

	var container, stats;
	var camera, scene, renderer, controls, objects = [];
	var standardMaterial, floorMaterial;
	var pngCubeRenderTarget, exrCubeRenderTarget;
	var pngBackground, exrBackground;

	init();
	animate();

	(async function() {
	const wait = ms => new Promise(resolve => setTimeout(resolve, ms));

	while (1) {
	const t = (performance.now() / 1000).toFixed(2);
	console.log('updating texture', `${t}s`);
	await updateTexture();
	await wait(1000);
	}
	})();
	function init() {

	THREE.Cache.enabled = true;
	container = document.createElement( 'div' );
	document.body.appendChild( container );

	camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
	camera.position.set( 0, 0, 120 );

	scene = new THREE.Scene();
	scene.background = new THREE.Color( 0x000000 );

	renderer = new THREE.WebGLRenderer();
	renderer.toneMapping = THREE.LinearToneMapping;

	standardMaterial = new THREE.MeshStandardMaterial( {
	map: null,
	color: 0xffffff,
	metalness: 1,
	roughness: 0,
	envMapIntensity: 1.0
	} );

	var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );

	var torusMesh1 = new THREE.Mesh( geometry, standardMaterial );

	scene.add( torusMesh1 );
	objects.push( torusMesh1 );

	floorMaterial = new THREE.MeshBasicMaterial( {
	color: 0xffffff
	} );

	var planeGeometry = new THREE.PlaneBufferGeometry( 200, 200 );
	var planeMesh1 = new THREE.Mesh( planeGeometry, floorMaterial );
	planeMesh1.position.y = - 50;
	planeMesh1.rotation.x = - Math.PI * 0.5;
	scene.add( planeMesh1 );

	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );

	container.appendChild( renderer.domElement );

	renderer.gammaInput = false;
	renderer.gammaOutput = true;

	stats = new Stats();
	container.appendChild( stats.dom );

	controls = new THREE.OrbitControls( camera, renderer.domElement );
	controls.minDistance = 50;
	controls.maxDistance = 300;

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

	}

	function onWindowResize() {

	var width = window.innerWidth;
	var height = window.innerHeight;

	camera.aspect = width / height;
	camera.updateProjectionMatrix();

	renderer.setSize( width, height );

	}

	function animate() {

	requestAnimationFrame( animate );

	stats.begin();
	render();
	stats.end();

	}

	async function updateTexture() {
	return new Promise(resolve => {
	new THREE.EXRLoader().load( 'textures/piz_compressed.exr', function ( texture ) {
	// Clean up previous map/renderTarget
	if (standardMaterial.envMap) {
	standardMaterial.envMap.dispose();
	floorMaterial.map = standardMaterial.envMap = null;
	}

	texture.minFilter = THREE.NearestFilter;
	texture.magFilter = THREE.NearestFilter;
	texture.encoding = THREE.LinearEncoding;

	var cubemapGenerator = new THREE.EquirectangularToCubeGenerator( texture, { resolution: 512, type: THREE.HalfFloatType } );
	var cubeMapTexture = cubemapGenerator.update( renderer );

	var pmremGenerator = new THREE.PMREMGenerator( cubeMapTexture );
	pmremGenerator.update( renderer );

	var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
	pmremCubeUVPacker.update( renderer );

	var renderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
	var envMap = renderTarget.texture;

	texture.dispose();
	cubemapGenerator.dispose();
	pmremGenerator.dispose();
	pmremCubeUVPacker.dispose();

	envMap.dispose = () => {
	renderTarget.dispose();
	}

	standardMaterial.envMap = envMap;
	standardMaterial.needsUpdate = true;

	floorMaterial.map = envMap;
	floorMaterial.needsUpdate = true;

	resolve();
	} );
	});
	}

	function render() {

	for ( var i = 0, l = objects.length; i < l; i ++ ) {

	var object = objects[ i ];
	object.rotation.y += 0.005;

	}

	renderer.render( scene, camera );

	}

	</script>

	</body>
	</html>