jsantell · November 28, 2018 02:12
diff --git a/memory-leak.html b/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>