Browse Source

pisaHDR -> overpass

Emmett Lalish 5 years ago
parent
commit
ef1a6180cc

+ 4 - 5
examples/webgl_materials_envmaps_hdr.html

@@ -53,13 +53,11 @@
 				room.scale.setScalar(10);
 				envScene.add(room);
 
-				var mainLight = new THREE.PointLight(0xffffff, 0.2, 0, 2);
-				mainLight.position.set(0, 0, 0);
+				var mainLight = new THREE.PointLight(0xffffff, 50, 0, 2);
 				envScene.add(mainLight);
 
-				var lightMaterial = new THREE.MeshBasicMaterial();
-				lightMaterial.color.setScalar(20);
-
+				var lightMaterial = new THREE.MeshLambertMaterial( { color: 0x000000, emissive: 0xffffff, emissiveIntensity: 10 } );
+				
 				var light1 = new THREE.Mesh(geometry, lightMaterial);
 				light1.position.set(-5, 2, 0);
 				light1.scale.set(0.1, 1, 1);
@@ -91,6 +89,7 @@
 				scene.background = new THREE.Color( 0x000000 );
 
 				renderer = new THREE.WebGLRenderer();
+				renderer.physicallyCorrectLights = true;
 				renderer.toneMapping = THREE.LinearToneMapping;
 
 				//

+ 7 - 9
examples/webgl_materials_physical_clearcoat.html

@@ -20,7 +20,7 @@
 		import Stats from './jsm/libs/stats.module.js';
 
 		import { OrbitControls } from './jsm/controls/OrbitControls.js';
-		import { HDRCubeTextureLoader } from './jsm/loaders/HDRCubeTextureLoader.js';
+		import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 		import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
 
 		var container, stats;
@@ -46,14 +46,14 @@
 			group = new THREE.Group();
 			scene.add( group );
 
-			new HDRCubeTextureLoader()
-				.setDataType( THREE.UnsignedByteType )
-				.setPath( './textures/cube/pisaHDR/' )
-				.load( [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ],
-					function ( hdrCubeMap ) {
+			new RGBELoader()
+					.setDataType( THREE.UnsignedByteType )
+					.setPath( 'textures/equirectangular/' )
+					.load( 'pedestrian_overpass_1k.hdr', function ( hdrCubeMap ) {
 
 						var pmremGenerator = new PMREMGenerator( renderer );
 						var hdrCubeRenderTarget = pmremGenerator.fromCubemap( hdrCubeMap );
+						hdrCubeMap.dispose();
 						pmremGenerator.dispose();
 
 						var geometry = new THREE.SphereBufferGeometry( 80, 64, 32 );
@@ -151,9 +151,7 @@
 
 						//
 
-						hdrCubeMap.magFilter = THREE.LinearFilter;
-						hdrCubeMap.needsUpdate = true;
-						scene.background = hdrCubeMap;
+						scene.background = hdrCubeRenderTarget.texture;
 
 					}
 

+ 6 - 8
examples/webgl_materials_physical_transparency.html

@@ -19,7 +19,7 @@
 
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { HDRCubeTextureLoader } from './jsm/loaders/HDRCubeTextureLoader.js';
+			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 			import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
 
 			var params = {
@@ -37,12 +37,10 @@
 			var spotLight1, spotLight2;
 			var mesh1, mesh2;
 
-			var hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
-
-			var hdrCubeMap = new HDRCubeTextureLoader()
-				.setPath( './textures/cube/pisaHDR/' )
+			var hdrCubeMap = new RGBELoader()
 				.setDataType( THREE.UnsignedByteType )
-				.load( hdrUrls, function () {
+				.setPath( 'textures/equirectangular/' )
+				.load( 'pedestrian_overpass_1k.hdr', function ( texture ) {
 
 					init();
 					animate();
@@ -75,10 +73,10 @@
 
 				var pmremGenerator = new PMREMGenerator( renderer );
 				hdrCubeRenderTarget = pmremGenerator.fromCubemap( hdrCubeMap );
+				hdrCubeMap.dispose();
 				pmremGenerator.dispose();
 
-				hdrCubeMap.magFilter = THREE.LinearFilter;
-				hdrCubeMap.needsUpdate = true;
+				scene.background = hdrCubeRenderTarget.texture;
 
 				//
 

+ 4 - 15
examples/webgl_materials_reflectivity.html

@@ -23,7 +23,7 @@
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
-			import { HDRCubeTextureLoader } from './jsm/loaders/HDRCubeTextureLoader.js';
+			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 			import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
 
 			var container, stats;
@@ -112,21 +112,10 @@
 
 				} );
 
-				var genCubeUrls = function ( prefix, postfix ) {
-
-					return [
-						prefix + 'px' + postfix, prefix + 'nx' + postfix,
-						prefix + 'py' + postfix, prefix + 'ny' + postfix,
-						prefix + 'pz' + postfix, prefix + 'nz' + postfix
-					];
-
-	};
-
-				var hdrUrls = genCubeUrls( "./textures/cube/pisaHDR/", ".hdr" );
-
-				new HDRCubeTextureLoader()
+				new RGBELoader()
 					.setDataType( THREE.UnsignedByteType )
-					.load( hdrUrls, function ( hdrCubeMap ) {
+					.setPath( 'textures/equirectangular/' )
+					.load( 'pedestrian_overpass_1k.hdr', function ( hdrCubeMap ) {
 
 						var pmremGenerator = new PMREMGenerator( renderer );
 						hdrCubeRenderTarget = pmremGenerator.fromCubemap( hdrCubeMap );

+ 9 - 11
examples/webgl_materials_standard.html

@@ -21,6 +21,7 @@
 
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
+			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 			import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
 
 			var statsEnabled = true;
@@ -100,22 +101,19 @@
 
 					} );
 
-				new THREE.CubeTextureLoader().setPath( './textures/cube/pisaRGBM16/' )
-					.load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ], function ( rgbmCubeMap ) {
-
-						rgbmCubeMap.encoding = THREE.RGBM16Encoding;
-						rgbmCubeMap.format = THREE.RGBAFormat;
+				new RGBELoader()
+					.setDataType( THREE.UnsignedByteType )
+					.setPath( 'textures/equirectangular/' )
+					.load( 'pedestrian_overpass_1k.hdr', function ( hdrCubeMap ) {
 
 						var pmremGenerator = new PMREMGenerator( renderer );
-						var rgbmCubeRenderTarget = pmremGenerator.fromCubemap( rgbmCubeMap );
+						var hdrCubeRenderTarget = pmremGenerator.fromCubemap( hdrCubeMap );
+						hdrCubeMap.dispose();
 						pmremGenerator.dispose();
 
-						material.envMap = rgbmCubeRenderTarget.texture;
-						material.needsUpdate = true; // is this needed?
+						material.envMap = hdrCubeRenderTarget.texture;
 
-						rgbmCubeMap.magFilter = THREE.LinearFilter;
-						rgbmCubeMap.needsUpdate = true;
-						scene.background = rgbmCubeMap;
+						scene.background = hdrCubeRenderTarget.texture;
 
 					} );
 

+ 6 - 7
examples/webgl_materials_variations_physical.html

@@ -19,7 +19,7 @@
 			import Stats from './jsm/libs/stats.module.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { HDRCubeTextureLoader } from './jsm/loaders/HDRCubeTextureLoader.js';
+			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 			import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
 
 			var container, stats;
@@ -57,15 +57,16 @@
 
 				scene = new THREE.Scene();
 
-				var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
 				var hdrCubeRenderTarget = null;
 
-				new HDRCubeTextureLoader()
+				new RGBELoader()
 					.setDataType( THREE.UnsignedByteType )
-					.load( hdrUrls, function ( hdrCubeMap ) {
+					.setPath( 'textures/equirectangular/' )
+					.load( 'pedestrian_overpass_1k.hdr', function ( hdrCubeMap ) {
 
 						var pmremGenerator = new PMREMGenerator( renderer );
 						hdrCubeRenderTarget = pmremGenerator.fromCubemap( hdrCubeMap );
+						hdrCubeMap.dispose();
 						pmremGenerator.dispose();
 
 						// Materials
@@ -115,9 +116,7 @@
 
 						}
 
-						hdrCubeMap.magFilter = THREE.LinearFilter;
-						hdrCubeMap.needsUpdate = true;
-						scene.background = hdrCubeMap;
+						scene.background = hdrCubeRenderTarget.texture;
 
 					} );
 

+ 6 - 18
examples/webgl_materials_variations_standard.html

@@ -19,7 +19,7 @@
 			import Stats from './jsm/libs/stats.module.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { HDRCubeTextureLoader } from './jsm/loaders/HDRCubeTextureLoader.js';
+			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 			import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
 
 			var container, stats;
@@ -43,20 +43,8 @@
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.set( 0.0, 400, 400 * 3.5 );
 
-				//
-				var genCubeUrls = function ( prefix, postfix ) {
-
-					return [
-						prefix + 'px' + postfix, prefix + 'nx' + postfix,
-						prefix + 'py' + postfix, prefix + 'ny' + postfix,
-						prefix + 'pz' + postfix, prefix + 'nz' + postfix
-					];
-
-				};
-
 				scene = new THREE.Scene();
 
-				var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
 				var hdrCubeRenderTarget = null;
 
 				// Materials
@@ -66,12 +54,14 @@
 				imgTexture.anisotropy = 16;
 				imgTexture = null;
 
-				new HDRCubeTextureLoader()
+				new RGBELoader()
 					.setDataType( THREE.UnsignedByteType )
-					.load( hdrUrls, function ( hdrCubeMap ) {
+					.setPath( 'textures/equirectangular/' )
+					.load( 'pedestrian_overpass_1k.hdr', function ( hdrCubeMap ) {
 
 						var pmremGenerator = new PMREMGenerator( renderer );
 						hdrCubeRenderTarget = pmremGenerator.fromCubemap( hdrCubeMap );
+						hdrCubeMap.dispose();
 						pmremGenerator.dispose();
 
 						var bumpScale = 1;
@@ -121,9 +111,7 @@
 
 						}
 
-						hdrCubeMap.magFilter = THREE.LinearFilter;
-						hdrCubeMap.needsUpdate = true;
-						scene.background = hdrCubeMap;
+						scene.background = hdrCubeRenderTarget.texture;
 
 					} );
 

+ 4 - 12
examples/webgl_tonemapping.html

@@ -19,7 +19,7 @@
 
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { HDRCubeTextureLoader } from './jsm/loaders/HDRCubeTextureLoader.js';
+			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 			import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
 
 			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
@@ -132,18 +132,10 @@
 				floor.receiveShadow = true;
 				scene.add( floor );
 
-				// Materials
-				var hdrpath = "textures/cube/pisaHDR/";
-				var hdrformat = '.hdr';
-				var hdrUrls = [
-					hdrpath + 'px' + hdrformat, hdrpath + 'nx' + hdrformat,
-					hdrpath + 'py' + hdrformat, hdrpath + 'ny' + hdrformat,
-					hdrpath + 'pz' + hdrformat, hdrpath + 'nz' + hdrformat
-				];
-
-				new HDRCubeTextureLoader()
+				new RGBELoader()
 					.setDataType( THREE.UnsignedByteType )
-					.load( hdrUrls, function ( hdrCubeMap ) {
+					.setPath( 'textures/equirectangular/' )
+					.load( 'pedestrian_overpass_1k.hdr', function ( hdrCubeMap ) {
 
 						var pmremGenerator = new PMREMGenerator( renderer );
 						standardMaterial.envMap = pmremGenerator.fromCubemap( hdrCubeMap ).texture;