Pārlūkot izejas kodu

better defaults for inline tonemapping demo.

Ben Houston 9 gadi atpakaļ
vecāks
revīzija
e129823889
2 mainītis faili ar 87 papildinājumiem un 78 dzēšanām
  1. BIN
      examples/textures/brick_roughness.jpg
  2. 87 78
      examples/webgl_tonemapping.html

BIN
examples/textures/brick_roughness.jpg


+ 87 - 78
examples/webgl_tonemapping.html

@@ -60,12 +60,12 @@
 
 			var container, stats;
 			var params = {
-				opacity: 0.5,
+				opacity: 1.0,
 				roughness: 1.0,
-				bumpScale: 0.3,
-				exposure: 1.0,
+				bumpScale: 1.0,
+				exposure: 3.0,
 				whitePoint: 1.0,
-				toneMapping: "Uncharted2"
+				toneMapping: "Cineon"
 			};
 
 			var toneMappingOptions = {
@@ -101,78 +101,87 @@
 				roughnessTexture.repeat.set( 9, 2 );
 
 
-								// Materials
-								var hdrpath = "../examples/textures/cube/hdrPisa/";
-								var hdrformat = '.hdr';
-								var hdrurls = [
-									hdrpath + 'px' + hdrformat, hdrpath + 'nx' + hdrformat,
-									hdrpath + 'py' + hdrformat, hdrpath + 'ny' + hdrformat,
-									hdrpath + 'pz' + hdrformat, hdrpath + 'nz' + hdrformat
-								];
-
-								renderer = new THREE.WebGLRenderer( { antialias: false } );
-
-								var roughnessTexture = THREE.ImageUtils.loadTexture( "../examples/textures/roughness_map.jpg" );
-								roughnessTexture.wrapS = THREE.RepeatWrapping;
-								roughnessTexture.wrapT = THREE.RepeatWrapping;
-								roughnessTexture.repeat.set( 9, 2 );
-
-								var hdrType = THREE.UnsignedByteType;
-
-								/*
-								if ( renderer.extensions.get( 'OES_texture_half_float' ) && renderer.extensions.get( 'OES_texture_half_float_linear' ) ) {
-									hdrType = THREE.HalfFloatType;
-								} else if ( renderer.extensions.get( 'OES_texture_float' ) && renderer.extensions.get( 'OES_texture_float_linear' ) ) {
-									hdrType = THREE.FloatType;
-								}
-								*/
-
-								var hdrCubeMap = new THREE.HDRCubeMapLoader().load( hdrType, hdrurls, function ( hdrCubeMap ) {
-
-									var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
-									pmremGenerator.update( renderer );
-
-									var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
-									pmremCubeUVPacker.update( renderer );
-
-									standardMaterial = new THREE.MeshStandardMaterial( {
-										map: null,
-										roughnessMap: roughnessTexture,
-										bumpScale: - 0.05,
-										bumpMap: roughnessTexture,
-										color: 0xffffff,
-										metalness: 0.9,
-										roughness: 1.0,
-										envMap: pmremCubeUVPacker.CubeUVRenderTarget,
-										shading: THREE.SmoothShading,
-										transparent: true,
-										blending: THREE.PremultipliedAlphaBlending
-									} );
-									var geometry = new THREE.TorusKnotGeometry( 18, 8, 150, 20 );;
-									var torusMesh1 = new THREE.Mesh( geometry, standardMaterial );
-									torusMesh1.position.x = 0.0;
-									torusMesh1.castShadow = true;
-									scene.add( torusMesh1 );
-									objects.push( torusMesh1 );
-
-									floorMaterial = new THREE.MeshStandardMaterial( {
-										map: null,
-										roughnessMap: null,
-										color: 0xffffff,
-										metalness: 0.0,
-										roughness: 0.0,
-										envMap: pmremCubeUVPacker.CubeUVRenderTarget,
-										shading: THREE.SmoothShading
-									} );
-
-									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 );
-
-								} );
+				// Materials
+				var hdrpath = "../examples/textures/cube/hdrPisa/";
+				var hdrformat = '.hdr';
+				var hdrurls = [
+					hdrpath + 'px' + hdrformat, hdrpath + 'nx' + hdrformat,
+					hdrpath + 'py' + hdrformat, hdrpath + 'ny' + hdrformat,
+					hdrpath + 'pz' + hdrformat, hdrpath + 'nz' + hdrformat
+				];
+
+				renderer = new THREE.WebGLRenderer( { antialias: false } );
+
+				var hdrType = THREE.UnsignedByteType;
+
+				/*
+				if ( renderer.extensions.get( 'OES_texture_half_float' ) && renderer.extensions.get( 'OES_texture_half_float_linear' ) ) {
+					hdrType = THREE.HalfFloatType;
+				} else if ( renderer.extensions.get( 'OES_texture_float' ) && renderer.extensions.get( 'OES_texture_float_linear' ) ) {
+					hdrType = THREE.FloatType;
+				}
+				*/
+
+				var hdrCubeMap = new THREE.HDRCubeMapLoader().load( hdrType, hdrurls, function ( hdrCubeMap ) {
+
+					var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
+					pmremGenerator.update( renderer );
+
+					var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
+					pmremCubeUVPacker.update( renderer );
+
+					var brickDiffuse = THREE.ImageUtils.loadTexture( "../examples/textures/brick_diffuse.jpg" );
+					brickDiffuse.wrapS = THREE.RepeatWrapping;
+					brickDiffuse.wrapT = THREE.RepeatWrapping;
+					brickDiffuse.repeat.set( 9, 0.5 );
+					var brickBump = THREE.ImageUtils.loadTexture( "../examples/textures/brick_bump.jpg" );
+					brickBump.wrapS = THREE.RepeatWrapping;
+					brickBump.wrapT = THREE.RepeatWrapping;
+					brickBump.repeat.set( 9, 0.5 );
+					var brickRoughness = THREE.ImageUtils.loadTexture( "../examples/textures/brick_roughness.jpg" );
+					brickRoughness.wrapS = THREE.RepeatWrapping;
+					brickRoughness.wrapT = THREE.RepeatWrapping;
+					brickRoughness.repeat.set( 9, 0.5 );
+
+					standardMaterial = new THREE.MeshStandardMaterial( {
+						map: brickDiffuse,
+						roughnessMap: brickRoughness,
+						bumpScale: - 0.05,
+						bumpMap: brickBump,
+						color: 0xffffff,
+						metalness: 0.9,
+						roughness: 0.8,
+						envMap: pmremCubeUVPacker.CubeUVRenderTarget,
+						shading: THREE.SmoothShading,
+						transparent: true,
+						blending: THREE.PremultipliedAlphaBlending
+					} );
+					var geometry = new THREE.TorusKnotGeometry( 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,
+						color: 0xffffff,
+						metalness: 0.0,
+						roughness: 0.0,
+						envMap: pmremCubeUVPacker.CubeUVRenderTarget,
+						shading: THREE.SmoothShading
+					} );
+
+					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 );
+
+				} );
 
 				// Lights
 
@@ -218,8 +227,8 @@
 				var gui = new dat.GUI();
 
 				gui.add( params, 'toneMapping', Object.keys( toneMappingOptions ) );
-				gui.add( params, 'exposure', 0, 5 );
-				gui.add( params, 'whitePoint', 0, 5 );
+				gui.add( params, 'exposure', 0, 10 );
+				gui.add( params, 'whitePoint', 0, 10 );
 				gui.add( params, 'opacity', 0, 1 );
 				gui.open();