Improved visual quality of webgl_loader_gltf examples.

examples/webgl_loader_gltf.html

@@ -33,6 +33,7 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - GLTFLoader<br />
 			Battle Damaged Sci-fi Helmet by
 			<a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a><br />
+			<a href="https://hdrihaven.com/hdri/?h=pedestrian_overpass" target="_blank" rel="noopener">Pedestrian Overpass</a> by <a href="https://hdrihaven.com/" target="_blank" rel="noopener">HDRI Haven</a>
 		</div>
 
 		<script src="../build/three.js"></script>
@@ -40,6 +41,12 @@
 		<script src="js/controls/OrbitControls.js"></script>
 		<script src="js/loaders/GLTFLoader.js"></script>
 
+		<script src="js/loaders/EquirectangularToCubeGenerator.js"></script>
+		<script src="js/loaders/RGBELoader.js"></script>
+
+		<script src="js/pmrem/PMREMGenerator.js"></script>
+		<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
+
 		<script src="js/WebGL.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 
@@ -71,30 +78,24 @@
 
 				scene = new THREE.Scene();
 
-				var urls = [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ];
-				var loader = new THREE.CubeTextureLoader().setPath( 'textures/cube/Bridge2/' );
-				loader.load( urls, function ( texture ) {
-
-					texture.encoding = THREE.sRGBEncoding;
-
-					// light probe
-
-					var sh = new THREE.SphericalHarmonics3();
-					// Coefficients computed with LightProbeGenerator.fromCubeTexture() and sh.toArray()
-					sh.fromArray(
-						[ 0.30350402186576847, 0.4695020609740584, 0.6617666153025029,
-							0.08320329629560637, 0.17400245533281114, 0.3453152275957874,
-							0.12158824672933624, 0.10353622444396401, 0.06530153583524678,
-							0.013607857556048842, 0.019188302420841814, 0.01874813525865349,
-							0.010822144860690035, 0.01574198289465548, 0.01742654587405097,
-							0.06310934215371257, 0.061061933521237545, 0.044428745834389806,
-							0.19958014705624538, 0.22020936865062024, 0.19468224569437417,
-							0.019647224115989702, 0.032414009820739324, 0.043555315974879015,
-							0.13316051440231733, 0.1964793374921572, 0.2189213184804167
-						]
-					);
-					var lightProbe = new THREE.LightProbe( sh );
-					scene.add( lightProbe );
+				var loader = new THREE.RGBELoader().setPath( 'textures/equirectangular/' );
+				loader.load( 'pedestrian_overpass_2k.hdr', function ( texture ) {
+
+					texture.encoding = THREE.RGBEEncoding;
+					texture.minFilter = THREE.NearestFilter;
+					texture.magFilter = THREE.NearestFilter;
+					texture.flipY = true;
+
+					var cubeGenerator = new THREE.EquirectangularToCubeGenerator( texture, { resolution: 1024 } );
+					cubeGenerator.update( renderer );
+
+					var pmremGenerator = new THREE.PMREMGenerator( cubeGenerator.renderTarget.texture );
+					pmremGenerator.update( renderer );
+
+					var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
+					pmremCubeUVPacker.update( renderer );
+
+					var envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;
 
 					// model
 
@@ -105,7 +106,7 @@
 
 							if ( child.isMesh ) {
 
-								child.material.envMap = texture;
+								child.material.envMap = envMap;
 
 							}
 
@@ -115,7 +116,10 @@
 
 					} );
 
-					scene.background = texture;
+					pmremGenerator.dispose();
+					pmremCubeUVPacker.dispose();
+
+					scene.background = cubeGenerator.renderTarget;
 
 				} );
 
@@ -123,7 +127,6 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.gammaOutput = true;
-				renderer.gammaFactor = 2.2; // approximate sRGB
 				container.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize, false );

examples/webgl_loader_gltf_extensions.html

@@ -56,6 +56,9 @@
 		<script src="js/loaders/DDSLoader.js"></script>
 		<script src="js/loaders/GLTFLoader.js"></script>
 
+		<script src="js/loaders/EquirectangularToCubeGenerator.js"></script>
+		<script src="js/loaders/RGBELoader.js"></script>
+
 		<script src="js/pmrem/PMREMGenerator.js"></script>
 		<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
 
@@ -184,11 +187,20 @@
 
 				// Load background and generate envMap
 
-				var urls = [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ];
-				var loader = new THREE.CubeTextureLoader().setPath( 'textures/cube/Park2/' );
-				background = loader.load( urls, function ( texture ) {
+				var loader = new THREE.RGBELoader().setPath( 'textures/equirectangular/' );
+				loader.load( 'venice_sunset_2k.hdr', function ( texture ) {
+
+					texture.encoding = THREE.RGBEEncoding;
+					texture.minFilter = THREE.NearestFilter;
+					texture.magFilter = THREE.NearestFilter;
+					texture.flipY = true;
+
+					var cubeGenerator = new THREE.EquirectangularToCubeGenerator( texture, { resolution: 1024 } );
+					cubeGenerator.update( renderer );
+
+					background = cubeGenerator.renderTarget;
 
-					var pmremGenerator = new THREE.PMREMGenerator( texture );
+					var pmremGenerator = new THREE.PMREMGenerator( cubeGenerator.renderTarget.texture );
 					pmremGenerator.update( renderer );
 
 					var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );