Merge pull request #13775 from WestLangley/dev-pmrem_cleanup

PMREM Examples: Clean up

examples/webgl_materials_envmaps_exr.html

@@ -6,11 +6,10 @@
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<style>
 			body {
-				color: #000;
+				color: #fff;
 				font-family:Monospace;
 				font-size:13px;
 				text-align:center;
-				color: #fff;
 
 				background-color: #000;
 
@@ -50,7 +49,7 @@
 
 			var container, stats;
 			var params = {
-				envMap: "EXR",
+				envMap: 'EXR',
 				roughness: 0.0,
 				metalness: 0.0,
 				exposure: 1.0
@@ -67,7 +66,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 0.0, 0, 120 );
 
 				scene = new THREE.Scene();
@@ -101,7 +100,7 @@
 				planeMesh1.rotation.x = - Math.PI * 0.5;
 				scene.add( planeMesh1 );
 
-				new THREE.EXRLoader().load( "textures/piz_compressed.exr", function ( texture ) {
+				new THREE.EXRLoader().load( 'textures/piz_compressed.exr', function ( texture ) {
 
 					texture.minFilter = THREE.NearestFilter;
 					texture.magFilter = THREE.NearestFilter;
@@ -120,7 +119,7 @@
 
 				} );
 
-				new THREE.TextureLoader().load( "textures/equiangular.png", function ( texture ) {
+				new THREE.TextureLoader().load( 'textures/equiangular.png', function ( texture ) {
 
 					texture.encoding = THREE.sRGBEncoding;
 
@@ -214,9 +213,7 @@
 
 				}
 
-				renderer.toneMappingExposure = Math.pow( params.exposure, 4.0 );
-
-				camera.lookAt( scene.position );
+				renderer.toneMappingExposure = params.exposure;
 
 				for ( var i = 0, l = objects.length; i < l; i ++ ) {
 

examples/webgl_materials_envmaps_hdr.html

@@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<style>
 			body {
-				color: #000;
+				color: #fff;
 				font-family:Monospace;
 				font-size:13px;
 				text-align:center;
@@ -33,6 +33,7 @@
 
 		<script src="../build/three.js"></script>
 		<script src="js/controls/OrbitControls.js"></script>
+
 		<script src="js/loaders/RGBELoader.js"></script>
 		<script src="js/loaders/HDRCubeTextureLoader.js"></script>
 
@@ -43,32 +44,18 @@
 		<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
 		<script src="js/libs/dat.gui.min.js"></script>
 
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/FXAAShader.js"></script>
-		<script src="js/postprocessing/BloomPass.js"></script>
-		<script src="js/shaders/ConvolutionShader.js"></script>
-
 		<script>
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 			var container, stats;
 			var params = {
-				envMap: "HDR",
-				projection: 'normal',
-				roughness: 1.0,
-				bumpScale: 0.3,
-				background: false,
-				exposure: 1.0,
-				side: 'front'
+				envMap: 'HDR',
+				roughness: 0.0,
+				metalness: 0.0,
+				exposure: 1.0
 			};
 			var camera, scene, renderer, controls, objects = [];
-			var hdrCubeMap;
-			var composer;
 			var standardMaterial, floorMaterial;
 			var ldrCubeRenderTarget, hdrCubeRenderTarget, rgbmCubeRenderTarget;
 
@@ -80,58 +67,39 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
-				camera.position.set( 0.0, 40, 40 * 3.5 );
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.set( 0.0, 0, 120 );
 
 				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xffffff );
+				scene.background = new THREE.Color( 0x000000 );
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.toneMapping = THREE.LinearToneMapping;
 
 				standardMaterial = new THREE.MeshStandardMaterial( {
 					map: null,
-					bumpScale: - 0.05,
-					color: 0xff4444,
-					metalness: 0.5,
-					roughness: 1.0
+					color: 0xffffff,
+					metalness: params.metalness,
+					roughness: params.roughness
 				} );
 
-				var geometry = new THREE.TorusKnotGeometry( 18, 8, 150, 20 );
+				var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
+
 				var torusMesh1 = new THREE.Mesh( geometry, standardMaterial );
-				torusMesh1.position.x = 0.0;
-				torusMesh1.castShadow = true;
-				torusMesh1.receiveShadow = true;
+
 				scene.add( torusMesh1 );
 				objects.push( torusMesh1 );
 
-				floorMaterial = new THREE.MeshStandardMaterial( {
-					map: null,
-					roughnessMap: null,
+				floorMaterial = new THREE.MeshBasicMaterial( {
 					color: 0xffffff,
-					metalness: 0.0,
-					roughness: 0.0
 				} );
 
 				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;
-				planeMesh1.receiveShadow = true;
 				scene.add( planeMesh1 );
 
-				var textureLoader = new THREE.TextureLoader();
-				textureLoader.load( "./textures/roughness_map.jpg", function( map ) {
-					map.wrapS = THREE.RepeatWrapping;
-					map.wrapT = THREE.RepeatWrapping;
-					map.anisotropy = 4;
-					map.repeat.set( 9, 2 );
-					standardMaterial.map = map;
-					standardMaterial.roughnessMap = map;
-					standardMaterial.bumpMap = map;
-					standardMaterial.needsUpdate = true;
-				} );
-
 				var genCubeUrls = function( prefix, postfix ) {
 					return [
 						prefix + 'px' + postfix, prefix + 'nx' + postfix,
@@ -140,7 +108,7 @@
 					];
 				};
 
-				var hdrUrls = genCubeUrls( "./textures/cube/pisaHDR/", ".hdr" );
+				var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
 				new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function ( hdrCubeMap ) {
 
 					var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
@@ -153,7 +121,7 @@
 
 				} );
 
-				var ldrUrls = genCubeUrls( "./textures/cube/pisa/", ".png" );
+				var ldrUrls = genCubeUrls( './textures/cube/pisa/', '.png' );
 				new THREE.CubeTextureLoader().load( ldrUrls, function ( ldrCubeMap ) {
 
 					ldrCubeMap.encoding = THREE.GammaEncoding;
@@ -169,7 +137,7 @@
 				} );
 
 
-				var rgbmUrls = genCubeUrls( "./textures/cube/pisaRGBM16/", ".png" );
+				var rgbmUrls = genCubeUrls( './textures/cube/pisaRGBM16/', '.png' );
 				new THREE.CubeTextureLoader().load( rgbmUrls, function ( rgbmCubeMap ) {
 
 					rgbmCubeMap.encoding = THREE.RGBM16Encoding;
@@ -184,40 +152,29 @@
 
 				} );
 
-				// Lights
-
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
-
-				var spotLight = new THREE.SpotLight( 0xffffff );
-				spotLight.position.set( 50, 100, 50 );
-				spotLight.angle = Math.PI / 7;
-				spotLight.penumbra = 0.8;
-				spotLight.castShadow = true;
-				scene.add( spotLight );
-
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.shadowMap.enabled = true;
 				container.appendChild( renderer.domElement );
 
 				//renderer.toneMapping = THREE.ReinhardToneMapping;
-				renderer.gammaInput = true;
+				renderer.gammaInput = true; // ???
 				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 );
 
 				var gui = new dat.GUI();
 
-				gui.add( params, 'envMap', [ 'None', 'LDR', 'HDR', 'RGBM16' ] );
+				gui.add( params, 'envMap', [ 'LDR', 'HDR', 'RGBM16' ] );
 				gui.add( params, 'roughness', 0, 1 );
-				gui.add( params, 'bumpScale', - 1, 1 );
-				gui.add( params, 'exposure', 0.1, 2 );
-				gui.add( params, 'side', [ 'front', 'back', 'double' ] );
+				gui.add( params, 'metalness', 0, 1 );
+				gui.add( params, 'exposure', 0, 2 );
 				gui.open();
 
 			}
@@ -234,8 +191,6 @@
 
 			}
 
-			//
-
 			function animate() {
 
 				requestAnimationFrame( animate );
@@ -251,53 +206,31 @@
 				if ( standardMaterial !== undefined ) {
 
 					standardMaterial.roughness = params.roughness;
-					standardMaterial.bumpScale = - 0.05 * params.bumpScale;
+					standardMaterial.metalness = params.metalness;
 
 					var newEnvMap = standardMaterial.envMap;
 
 					switch( params.envMap ) {
 
-						case 'None': newEnvMap = null; break;
 						case 'LDR': newEnvMap = ldrCubeRenderTarget ? ldrCubeRenderTarget.texture : null; break;
 						case 'HDR': newEnvMap = hdrCubeRenderTarget ? hdrCubeRenderTarget.texture : null; break;
 						case 'RGBM16': newEnvMap = rgbmCubeRenderTarget ? rgbmCubeRenderTarget.texture : null; break;
 
 					}
 
-					if( newEnvMap !== standardMaterial.envMap ) {
+					if ( newEnvMap !== standardMaterial.envMap ) {
 
 						standardMaterial.envMap = newEnvMap;
 						standardMaterial.needsUpdate = true;
-						floorMaterial.emissive = new THREE.Color( 1, 1, 1 );
-						floorMaterial.emissiveMap = newEnvMap;
-						floorMaterial.needsUpdate = true;
 
-					}
-
-
-					var side = standardMaterial.side;
-
-					switch ( params.side ) {
-
-						case 'front': side = THREE.FrontSide; break;
-						case 'back': side = THREE.BackSide; break;
-						case 'double': side = THREE.DoubleSide; break;
+						floorMaterial.map = newEnvMap;
+						floorMaterial.needsUpdate = true;
 
 					}
 
-					if( standardMaterial.side !== side ) {
-
-						standardMaterial.side = side;
-						standardMaterial.needsUpdate = true;
-
-					}
 				}
 
-				renderer.toneMappingExposure = Math.pow( params.exposure, 4.0 );
-
-				var timer = Date.now() * 0.00025;
-
-				camera.lookAt( scene.position );
+				renderer.toneMappingExposure = params.exposure;
 
 				for ( var i = 0, l = objects.length; i < l; i ++ ) {