Browse Source

updated samples

Emmett Lalish 5 years ago
parent
commit
3c0a9f7580

+ 3 - 1
examples/webgl_loader_gltf_extensions.html

@@ -157,7 +157,6 @@
 					.setPath( 'textures/equirectangular/' )
 					.setPath( 'textures/equirectangular/' )
 					.load( 'venice_sunset_1k.hdr', function ( texture ) {
 					.load( 'venice_sunset_1k.hdr', function ( texture ) {
 
 
-						var pmremGenerator = new PMREMGenerator( renderer );
 						envMap = pmremGenerator.fromEquirectangular( texture ).texture;
 						envMap = pmremGenerator.fromEquirectangular( texture ).texture;
 						pmremGenerator.dispose();
 						pmremGenerator.dispose();
 
 
@@ -171,6 +170,9 @@
 
 
 					} );
 					} );
 
 
+				var pmremGenerator = new PMREMGenerator( renderer );
+				pmremGenerator.prepareFromEquirectangular();
+
 			}
 			}
 
 
 			function initScene( sceneInfo ) {
 			function initScene( sceneInfo ) {

+ 3 - 1
examples/webgl_materials_car.html

@@ -69,7 +69,6 @@
 					.setPath( 'textures/hdr/' )
 					.setPath( 'textures/hdr/' )
 					.load( 'quarry_01_1k.hdr', function ( texture ) {
 					.load( 'quarry_01_1k.hdr', function ( texture ) {
 
 
-						var pmremGenerator = new PMREMGenerator( renderer );
 						envMap = pmremGenerator.fromEquirectangular( texture ).texture;
 						envMap = pmremGenerator.fromEquirectangular( texture ).texture;
 						pmremGenerator.dispose();
 						pmremGenerator.dispose();
 
 
@@ -105,6 +104,9 @@
 				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 
 
+				var pmremGenerator = new PMREMGenerator( renderer );
+				pmremGenerator.prepareFromEquirectangular();
+
 				stats = new Stats();
 				stats = new Stats();
 				container.appendChild( stats.dom );
 				container.appendChild( stats.dom );
 
 

+ 3 - 1
examples/webgl_materials_envmaps_exr.html

@@ -72,7 +72,6 @@
 				planeMesh.rotation.x = - Math.PI * 0.5;
 				planeMesh.rotation.x = - Math.PI * 0.5;
 				scene.add( planeMesh );
 				scene.add( planeMesh );
 
 
-				var pmremGenerator = new PMREMGenerator( renderer );
 				THREE.DefaultLoadingManager.onLoad = function ( ) {
 				THREE.DefaultLoadingManager.onLoad = function ( ) {
 
 
 					pmremGenerator.dispose();
 					pmremGenerator.dispose();
@@ -102,6 +101,9 @@
 
 
 				} );
 				} );
 
 
+				var pmremGenerator = new PMREMGenerator( renderer );
+				pmremGenerator.prepareFromEquirectangular();
+
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 

+ 6 - 4
examples/webgl_materials_envmaps_hdr.html

@@ -113,16 +113,12 @@
 				planeMesh.rotation.x = - Math.PI * 0.5;
 				planeMesh.rotation.x = - Math.PI * 0.5;
 				scene.add( planeMesh );
 				scene.add( planeMesh );
 
 
-				var pmremGenerator = new PMREMGenerator( renderer );
 				THREE.DefaultLoadingManager.onLoad = function ( ) {
 				THREE.DefaultLoadingManager.onLoad = function ( ) {
 
 
 					pmremGenerator.dispose();
 					pmremGenerator.dispose();
 
 
 				};
 				};
 
 
-				var envScene = getEnvScene();
-				generatedCubeRenderTarget = pmremGenerator.fromScene( envScene, 0.04 );
-
 				var hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
 				var hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
 				hdrCubeMap = new HDRCubeTextureLoader()
 				hdrCubeMap = new HDRCubeTextureLoader()
 					.setPath( './textures/cube/pisaHDR/' )
 					.setPath( './textures/cube/pisaHDR/' )
@@ -163,6 +159,12 @@
 
 
 					} );
 					} );
 
 
+				var pmremGenerator = new PMREMGenerator( renderer );
+				pmremGenerator.prepareFromCubemap();
+
+				var envScene = getEnvScene();
+				generatedCubeRenderTarget = pmremGenerator.fromScene( envScene, 0.04 );
+
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 				container.appendChild( renderer.domElement );

+ 6 - 4
examples/webgl_materials_envmaps_hdr_nodes.html

@@ -125,16 +125,12 @@
 				planeMesh.rotation.x = - Math.PI * 0.5;
 				planeMesh.rotation.x = - Math.PI * 0.5;
 				scene.add( planeMesh );
 				scene.add( planeMesh );
 
 
-				var pmremGenerator = new PMREMGenerator( renderer );
 				THREE.DefaultLoadingManager.onLoad = function ( ) {
 				THREE.DefaultLoadingManager.onLoad = function ( ) {
 
 
 					pmremGenerator.dispose();
 					pmremGenerator.dispose();
 
 
 				};
 				};
 
 
-				var envScene = getEnvScene();
-				generatedCubeRenderTarget = pmremGenerator.fromScene( envScene, 0.04 );
-
 				var hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
 				var hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
 				hdrCubeMap = new HDRCubeTextureLoader()
 				hdrCubeMap = new HDRCubeTextureLoader()
 					.setPath( './textures/cube/pisaHDR/' )
 					.setPath( './textures/cube/pisaHDR/' )
@@ -175,6 +171,12 @@
 
 
 					} );
 					} );
 
 
+				var pmremGenerator = new PMREMGenerator( renderer );
+				pmremGenerator.prepareFromCubemap();
+
+				var envScene = getEnvScene();
+				generatedCubeRenderTarget = pmremGenerator.fromScene( envScene, 0.04 );
+
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 				container.appendChild( renderer.domElement );

+ 13 - 17
examples/webgl_materials_envmaps_pmrem_nodes.html

@@ -68,22 +68,6 @@
 			init();
 			init();
 			animate();
 			animate();
 
 
-			function generate() {
-
-				var pmremGenerator = new PMREMGenerator( renderer );
-				hdrCubeRenderTarget = pmremGenerator.fromCubemap( hdrCubeMap );
-				pmremGenerator.dispose();
-
-				nodeTexture.value = hdrCubeRenderTarget.texture;
-
-				hdrCubeMap.magFilter = THREE.LinearFilter;
-				hdrCubeMap.needsUpdate = true;
-
-				planeMesh.material.map = hdrCubeRenderTarget.texture;
-				planeMesh.material.needsUpdate = true;
-
-			}
-
 			function init() {
 			function init() {
 
 
 				container = document.createElement( 'div' );
 				container = document.createElement( 'div' );
@@ -127,12 +111,24 @@
 					.setDataType( THREE.UnsignedByteType )
 					.setDataType( THREE.UnsignedByteType )
 					.load( hdrUrls, function () {
 					.load( hdrUrls, function () {
 
 
-						generate();
+						hdrCubeRenderTarget = pmremGenerator.fromCubemap( hdrCubeMap );
+						pmremGenerator.dispose();
+
+						nodeTexture.value = hdrCubeRenderTarget.texture;
+
+						hdrCubeMap.magFilter = THREE.LinearFilter;
+						hdrCubeMap.needsUpdate = true;
+
+						planeMesh.material.map = hdrCubeRenderTarget.texture;
+						planeMesh.material.needsUpdate = true;
 
 
 						nodeMaterial.visible = true;
 						nodeMaterial.visible = true;
 
 
 					} );
 					} );
 
 
+				var pmremGenerator = new PMREMGenerator( renderer );
+				pmremGenerator.prepareFromCubemap();
+
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 				container.appendChild( renderer.domElement );

+ 8 - 4
examples/webgl_materials_physical_clearcoat.html

@@ -49,11 +49,10 @@
 			new RGBELoader()
 			new RGBELoader()
 					.setDataType( THREE.UnsignedByteType )
 					.setDataType( THREE.UnsignedByteType )
 					.setPath( 'textures/equirectangular/' )
 					.setPath( 'textures/equirectangular/' )
-					.load( 'pedestrian_overpass_1k.hdr', function ( hdrCubeMap ) {
+					.load( 'pedestrian_overpass_1k.hdr', function ( hdrEquirect ) {
 
 
-						var pmremGenerator = new PMREMGenerator( renderer );
-						var hdrCubeRenderTarget = pmremGenerator.fromCubemap( hdrCubeMap );
-						hdrCubeMap.dispose();
+						var hdrCubeRenderTarget = pmremGenerator.fromEquirectangular( hdrEquirect );
+						hdrEquirect.dispose();
 						pmremGenerator.dispose();
 						pmremGenerator.dispose();
 
 
 						var geometry = new THREE.SphereBufferGeometry( 80, 64, 32 );
 						var geometry = new THREE.SphereBufferGeometry( 80, 64, 32 );
@@ -183,6 +182,11 @@
 
 
 			//
 			//
 
 
+			var pmremGenerator = new PMREMGenerator( renderer );
+			pmremGenerator.prepareFromEquirectangular();
+
+			//
+
 			stats = new Stats();
 			stats = new Stats();
 			container.appendChild( stats.dom );
 			container.appendChild( stats.dom );
 
 

+ 4 - 4
examples/webgl_materials_physical_transparency.html

@@ -37,7 +37,7 @@
 			var spotLight1, spotLight2;
 			var spotLight1, spotLight2;
 			var mesh1, mesh2;
 			var mesh1, mesh2;
 
 
-			var hdrCubeMap = new RGBELoader()
+			var hdrEquirect = new RGBELoader()
 				.setDataType( THREE.UnsignedByteType )
 				.setDataType( THREE.UnsignedByteType )
 				.setPath( 'textures/equirectangular/' )
 				.setPath( 'textures/equirectangular/' )
 				.load( 'pedestrian_overpass_1k.hdr', function ( texture ) {
 				.load( 'pedestrian_overpass_1k.hdr', function ( texture ) {
@@ -64,7 +64,7 @@
 				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.outputEncoding = THREE.sRGBEncoding;
 
 
 				scene = new THREE.Scene();
 				scene = new THREE.Scene();
-				scene.background = hdrCubeMap;
+				scene.background = hdrEquirect;
 
 
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.set( 0, 0, 120 );
 				camera.position.set( 0, 0, 120 );
@@ -72,8 +72,8 @@
 				//
 				//
 
 
 				var pmremGenerator = new PMREMGenerator( renderer );
 				var pmremGenerator = new PMREMGenerator( renderer );
-				hdrCubeRenderTarget = pmremGenerator.fromCubemap( hdrCubeMap );
-				hdrCubeMap.dispose();
+				hdrCubeRenderTarget = pmremGenerator.fromEquirectangular( hdrEquirect );
+				hdrEquirect.dispose();
 				pmremGenerator.dispose();
 				pmremGenerator.dispose();
 
 
 				scene.background = hdrCubeRenderTarget.texture;
 				scene.background = hdrCubeRenderTarget.texture;

+ 5 - 4
examples/webgl_materials_reflectivity.html

@@ -115,19 +115,20 @@
 				new RGBELoader()
 				new RGBELoader()
 					.setDataType( THREE.UnsignedByteType )
 					.setDataType( THREE.UnsignedByteType )
 					.setPath( 'textures/equirectangular/' )
 					.setPath( 'textures/equirectangular/' )
-					.load( 'pedestrian_overpass_1k.hdr', function ( hdrCubeMap ) {
+					.load( 'pedestrian_overpass_1k.hdr', function ( hdrEquirect ) {
 
 
-						var pmremGenerator = new PMREMGenerator( renderer );
-						hdrCubeRenderTarget = pmremGenerator.fromCubemap( hdrCubeMap );
+						hdrCubeRenderTarget = pmremGenerator.fromEquirectangular( hdrEquirect );
 						pmremGenerator.dispose();
 						pmremGenerator.dispose();
 
 
 						gemFrontMaterial.envMap = gemBackMaterial.envMap = hdrCubeRenderTarget.texture;
 						gemFrontMaterial.envMap = gemBackMaterial.envMap = hdrCubeRenderTarget.texture;
 						gemFrontMaterial.needsUpdate = gemBackMaterial.needsUpdate = true;
 						gemFrontMaterial.needsUpdate = gemBackMaterial.needsUpdate = true;
 
 
-						hdrCubeMap.dispose();
+						hdrEquirect.dispose();
 
 
 					} );
 					} );
 
 
+				var pmremGenerator = new PMREMGenerator( renderer );
+				pmremGenerator.prepareFromEquirectangular();
 
 
 				// Lights
 				// Lights
 
 

+ 6 - 4
examples/webgl_materials_standard.html

@@ -105,11 +105,10 @@
 				new RGBELoader()
 				new RGBELoader()
 					.setDataType( THREE.UnsignedByteType )
 					.setDataType( THREE.UnsignedByteType )
 					.setPath( 'textures/equirectangular/' )
 					.setPath( 'textures/equirectangular/' )
-					.load( 'venice_sunset_1k.hdr', function ( hdrCubeMap ) {
+					.load( 'venice_sunset_1k.hdr', function ( hdrEquirect ) {
 
 
-						var pmremGenerator = new PMREMGenerator( renderer );
-						var hdrCubeRenderTarget = pmremGenerator.fromCubemap( hdrCubeMap );
-						hdrCubeMap.dispose();
+						var hdrCubeRenderTarget = pmremGenerator.fromEquirectangular( hdrEquirect );
+						hdrEquirect.dispose();
 						pmremGenerator.dispose();
 						pmremGenerator.dispose();
 
 
 						material.envMap = hdrCubeRenderTarget.texture;
 						material.envMap = hdrCubeRenderTarget.texture;
@@ -118,6 +117,9 @@
 
 
 					} );
 					} );
 
 
+				var pmremGenerator = new PMREMGenerator( renderer );
+				pmremGenerator.prepareFromEquirectangular();
+
 				//
 				//
 
 
 				if ( statsEnabled ) {
 				if ( statsEnabled ) {

+ 8 - 4
examples/webgl_materials_variations_physical.html

@@ -52,11 +52,10 @@
 				new RGBELoader()
 				new RGBELoader()
 					.setDataType( THREE.UnsignedByteType )
 					.setDataType( THREE.UnsignedByteType )
 					.setPath( 'textures/equirectangular/' )
 					.setPath( 'textures/equirectangular/' )
-					.load( 'pedestrian_overpass_1k.hdr', function ( hdrCubeMap ) {
+					.load( 'pedestrian_overpass_1k.hdr', function ( hdrEquirect ) {
 
 
-						var pmremGenerator = new PMREMGenerator( renderer );
-						hdrCubeRenderTarget = pmremGenerator.fromCubemap( hdrCubeMap );
-						hdrCubeMap.dispose();
+						hdrCubeRenderTarget = pmremGenerator.fromEquirectangular( hdrEquirect );
+						hdrEquirect.dispose();
 						pmremGenerator.dispose();
 						pmremGenerator.dispose();
 
 
 						// Materials
 						// Materials
@@ -165,6 +164,11 @@
 
 
 				//
 				//
 
 
+				var pmremGenerator = new PMREMGenerator( renderer );
+				pmremGenerator.prepareFromEquirectangular();
+
+				//
+
 				stats = new Stats();
 				stats = new Stats();
 				container.appendChild( stats.dom );
 				container.appendChild( stats.dom );
 
 

+ 8 - 4
examples/webgl_materials_variations_standard.html

@@ -57,11 +57,10 @@
 				new RGBELoader()
 				new RGBELoader()
 					.setDataType( THREE.UnsignedByteType )
 					.setDataType( THREE.UnsignedByteType )
 					.setPath( 'textures/equirectangular/' )
 					.setPath( 'textures/equirectangular/' )
-					.load( 'pedestrian_overpass_1k.hdr', function ( hdrCubeMap ) {
+					.load( 'pedestrian_overpass_1k.hdr', function ( hdrEquirect ) {
 
 
-						var pmremGenerator = new PMREMGenerator( renderer );
-						hdrCubeRenderTarget = pmremGenerator.fromCubemap( hdrCubeMap );
-						hdrCubeMap.dispose();
+						hdrCubeRenderTarget = pmremGenerator.fromEquirectangular( hdrEquirect );
+						hdrEquirect.dispose();
 						pmremGenerator.dispose();
 						pmremGenerator.dispose();
 
 
 						var bumpScale = 1;
 						var bumpScale = 1;
@@ -170,6 +169,11 @@
 
 
 				//
 				//
 
 
+				var pmremGenerator = new PMREMGenerator( renderer );
+				pmremGenerator.prepareFromEquirectangular();
+
+				//
+
 				stats = new Stats();
 				stats = new Stats();
 				container.appendChild( stats.dom );
 				container.appendChild( stats.dom );
 
 

+ 3 - 1
examples/webgl_pmrem_test.html

@@ -133,7 +133,6 @@
 					.setPath( 'textures/equirectangular/' )
 					.setPath( 'textures/equirectangular/' )
 					.load( 'spot1Lux.hdr', function ( texture ) {
 					.load( 'spot1Lux.hdr', function ( texture ) {
 
 
-						var pmremGenerator = new PMREMGenerator( renderer );
 						radianceMap = pmremGenerator.fromEquirectangular( texture ).texture;
 						radianceMap = pmremGenerator.fromEquirectangular( texture ).texture;
 						pmremGenerator.dispose();
 						pmremGenerator.dispose();
 
 
@@ -166,6 +165,9 @@
 
 
 					} );
 					} );
 
 
+				var pmremGenerator = new PMREMGenerator( renderer );
+				pmremGenerator.prepareFromEquirectangular();
+
 			}
 			}
 
 
 			function onResize() {
 			function onResize() {

+ 6 - 4
examples/webgl_tonemapping.html

@@ -135,17 +135,19 @@
 				new RGBELoader()
 				new RGBELoader()
 					.setDataType( THREE.UnsignedByteType )
 					.setDataType( THREE.UnsignedByteType )
 					.setPath( 'textures/equirectangular/' )
 					.setPath( 'textures/equirectangular/' )
-					.load( 'pedestrian_overpass_1k.hdr', function ( hdrCubeMap ) {
+					.load( 'pedestrian_overpass_1k.hdr', function ( hdrEquirect ) {
 
 
-						var pmremGenerator = new PMREMGenerator( renderer );
-						standardMaterial.envMap = pmremGenerator.fromCubemap( hdrCubeMap ).texture;
+						standardMaterial.envMap = pmremGenerator.fromEquirectangular( hdrEquirect ).texture;
 						standardMaterial.needsUpdate = true;
 						standardMaterial.needsUpdate = true;
 
 
-						hdrCubeMap.dispose();
+						hdrEquirect.dispose();
 						pmremGenerator.dispose();
 						pmremGenerator.dispose();
 
 
 					} );
 					} );
 
 
+				var pmremGenerator = new PMREMGenerator( renderer );
+				pmremGenerator.prepareFromEquirectangular();
+
 				// Lights
 				// Lights
 
 
 				scene.add( new THREE.HemisphereLight( 0x111111, 0x000000 ) );
 				scene.add( new THREE.HemisphereLight( 0x111111, 0x000000 ) );