Merge pull request #8360 from bhouston/improve_mat_standard_example

Add PMREM/CubeUV envMaps to materials_standard example

examples/webgl_materials_envmaps_hdr.html

@@ -32,28 +32,27 @@
 			Created by Prashant Sharma and <a href="http://clara.io/" target="_blank">Ben Houston</a>.</div>
 
 		<script src="../build/three.min.js"></script>
-		<script src="../examples/js/controls/OrbitControls.js"></script>
-		<script src="../src/loaders/BinaryTextureLoader.js"></script>
-		<script src="../examples/js/loaders/RGBELoader.js"></script>
-		<script src="../examples/js/loaders/HDRCubeTextureLoader.js"></script>
-
-		<script src="../examples/js/Detector.js"></script>
-		<script src="../examples/js/libs/stats.min.js"></script>
-
-		<script src="../examples/js/Half.js"></script>
-		<script src="../examples/js/Encodings.js"></script>
-		<script src="../examples/js/pmrem/PMREMGenerator.js"></script>
-		<script src="../examples/js/pmrem/PMREMCubeUVPacker.js"></script>
-		<script src="../examples/js/libs/dat.gui.min.js"></script>
-
-		<script src="../examples/js/postprocessing/EffectComposer.js"></script>
-		<script src="../examples/js/postprocessing/RenderPass.js"></script>
-		<script src="../examples/js/postprocessing/MaskPass.js"></script>
-		<script src="../examples/js/postprocessing/ShaderPass.js"></script>
-		<script src="../examples/js/shaders/CopyShader.js"></script>
-		<script src="../examples/js/shaders/FXAAShader.js"></script>
-		<script src="../examples/js/postprocessing/BloomPass.js"></script>
-		<script src="../examples/js/shaders/ConvolutionShader.js"></script>
+		<script src="js/controls/OrbitControls.js"></script>
+		<script src="js/loaders/RGBELoader.js"></script>
+		<script src="js/loaders/HDRCubeTextureLoader.js"></script>
+
+		<script src="js/Detector.js"></script>
+		<script src="js/libs/stats.min.js"></script>
+
+		<script src="js/Half.js"></script>
+		<script src="js/Encodings.js"></script>
+		<script src="js/pmrem/PMREMGenerator.js"></script>
+		<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>
 
@@ -125,7 +124,7 @@
 				scene.add( planeMesh1 );
 
 				var textureLoader = new THREE.TextureLoader();
-				textureLoader.load( "../examples/textures/roughness_map.jpg", function( map ) {
+				textureLoader.load( "./textures/roughness_map.jpg", function( map ) {
 					map.wrapS = THREE.RepeatWrapping;
 					map.wrapT = THREE.RepeatWrapping;
 					map.anisotropy = 4;
@@ -143,7 +142,7 @@
 					];
 				};
 
-				var hdrUrls = genCubeUrls( "../examples/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 );
@@ -158,7 +157,7 @@
 					standardMaterial.needsUpdate = true;
 				} );
 
-				var ldrUrls = genCubeUrls( "../examples/textures/cube/pisa/", ".png" );
+				var ldrUrls = genCubeUrls( "./textures/cube/pisa/", ".png" );
 				new THREE.CubeTextureLoader().load( ldrUrls, function ( ldrCubeMap ) {
 
 					ldrCubeMap.encoding = THREE.GammaEncoding;
@@ -173,7 +172,7 @@
 				} );
 
 
-				var rgbmUrls = genCubeUrls( "../examples/textures/cube/pisaRGBM16/", ".png" );
+				var rgbmUrls = genCubeUrls( "./textures/cube/pisaRGBM16/", ".png" );
 				new THREE.CubeTextureLoader().load( rgbmUrls, function ( rgbmCubeMap ) {
 
 					rgbmCubeMap.encoding = THREE.RGBM16Encoding;

examples/webgl_materials_standard.html

@@ -51,6 +51,12 @@
 
 		<script src="js/controls/TrackballControls.js"></script>
 		<script src="js/loaders/OBJLoader.js"></script>
+		<script src="js/loaders/RGBELoader.js"></script>
+		<script src="js/loaders/HDRCubeTextureLoader.js"></script>
+		<script src="js/Half.js"></script>
+		<script src="js/Encodings.js"></script>
+		<script src="js/pmrem/PMREMGenerator.js"></script>
+		<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
 
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
@@ -87,6 +93,21 @@
 
 				controls = new THREE.TrackballControls( camera );
 
+				//
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setClearColor( 0x202020 );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
+
+				renderer.autoClear = false;
+				renderer.gammaInput = true;
+				renderer.gammaOutput = true;
+				renderer.toneMapping = THREE.ReinhardToneMapping;
+				renderer.toneMappingExposure = 3;
+
+
 				scene = new THREE.Scene();
 
 				sceneCube = new THREE.Scene();
@@ -111,7 +132,7 @@
 				var shader = THREE.ShaderLib[ "cube" ];
 				shader.uniforms[ "tCube" ].value = textureCube;
 
-				var material = new THREE.ShaderMaterial( {
+				var materialBG = new THREE.ShaderMaterial( {
 
 					fragmentShader: shader.fragmentShader,
 					vertexShader: shader.vertexShader,
@@ -121,7 +142,7 @@
 
 				} ),
 
-				mesh = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), material );
+				mesh = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), materialBG );
 				sceneCube.add( mesh );
 
 				//
@@ -129,10 +150,10 @@
 				var path = 'models/obj/cerberus/';
 
 				var loader = new THREE.OBJLoader();
+				var material = new THREE.MeshStandardMaterial();
 				loader.load( path + 'Cerberus.obj', function ( group ) {
 
 					// var material = new THREE.MeshBasicMaterial( { wireframe: true } );
-					var material = new THREE.MeshStandardMaterial();
 
 					var loader = new THREE.TextureLoader();
 
@@ -143,7 +164,6 @@
 					material.roughnessMap = loader.load( path + 'Cerberus_R.jpg' );
 					material.metalnessMap = loader.load( path + 'Cerberus_M.jpg' );
 					material.normalMap = loader.load( path + 'Cerberus_N.jpg' );
-					material.envMap = textureCube;
 
 					material.map.wrapS = THREE.RepeatWrapping;
 					material.roughnessMap.wrapS = THREE.RepeatWrapping;
@@ -166,17 +186,28 @@
 
 				} );
 
-				//
+				var genCubeUrls = function( prefix, postfix ) {
+					return [
+						prefix + 'px' + postfix, prefix + 'nx' + postfix,
+						prefix + 'py' + postfix, prefix + 'ny' + postfix,
+						prefix + 'pz' + postfix, prefix + 'nz' + postfix
+					];
+				};
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( 0x202020 );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
+				var hdrUrls = genCubeUrls( "./textures/cube/pisaHDR/", ".hdr" );
+				new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function ( hdrCubeMap ) {
 
-				renderer.autoClear = false;
-				renderer.gammaInput = true;
-				renderer.gammaOutput = true;
+					var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
+					pmremGenerator.update( renderer );
+
+					var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
+					pmremCubeUVPacker.update( renderer );
+
+					hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
+
+					material.envMap = hdrCubeRenderTarget;
+					material.needsUpdate = true;
+				} );
 
 				//