Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
webgl_shaders_tonemapping.html 16.8 KB
Newer Older
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - adaptive tone-mapping</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				background:#000;
				color:#fff;
				padding:0;
				margin:0;
				overflow:hidden;
				font-family:georgia;
				text-align:center;
			}
			h1 { }
			a { color:skyblue; text-decoration:none }
			canvas { pointer-events:none; z-index:0; position:relative; }
			.label { background-color: black; position: absolute; z-index: 100; padding: 5px }

		</style>
	</head>

	<body>
		<div id="d">
			<div id="info">
				<a href="http://threejs.org" target="_blank">three.js</a> webgl demo :
				Earth diffuse and city lights by <a href="http://seanward.org" target="_blank">Sean Ward</a> :

			</div>
			<div class="label" style="position: absolute;left: 12%;bottom: 10%;">Low Dynamic Range</div>
			<div class="label" style="position: absolute;left: 12%;bottom: 5%;">Static Tone Mapping</div>
			<div class="label" style="position: absolute;left: 45%;bottom: 10%;">High Dynamic Range</div>
			<div class="label" style="position: absolute;left: 45%;bottom: 5%;">Static Tone Mapping</div>
			<div class="label" style="position: absolute;left: 80%;bottom: 10%;">High Dynamic Range</div>
			<div class="label" style="position: absolute;left: 80%;bottom: 5%;">Adaptive Tone Mapping</div>
		</div>

		<script src="../build/three.js"></script>

		<script src="js/Detector.js"></script>
		<script src="js/libs/dat.gui.min.js"></script>

		<script src="js/shaders/CopyShader.js"></script>
		<script src="js/shaders/LuminosityShader.js"></script>
		<script src="js/shaders/ConvolutionShader.js"></script>
		<script src="js/shaders/ToneMapShader.js"></script>
B
add gamma correction pass to adaptive tone mapping example.  
Ben Houston 已提交
49 
		<script src="js/shaders/GammaCorrectionShader.js"></script>
M
Fixed OrbitControls and DAT fight.  
Mr.doob 已提交
50
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
51 52 53 54 55 56 57 58 59 60 61 62 
		<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/postprocessing/BloomPass.js"></script>
		<script src="js/postprocessing/AdaptiveToneMappingPass.js"></script>
		<script src="js/controls/OrbitControls.js"></script>

		<script>

			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
M
Renamed tonemapping example.  
Mr.doob 已提交
63 
			var container;
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 

			var bloomPass, adaptToneMappingPass;
			var params;

			var camera, scene, renderer, dynamicHdrEffectComposer, hdrEffectComposer, ldrEffectComposer;
			var cameraCube, sceneCube;
			var cameraBG, debugScene;
			var adaptiveLuminanceMat, currentLuminanceRT, previousLuminanceMat;

			var directionalLight;

			var orbitControls;

			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			var windowThirdX = window.innerWidth / 3;
			var windowThirdY = window.innerHeight / 3;

			init();
			animate();

			function init() {

				params = {
B
refactor on screen controls on readability, add enable/disable tone mapping.  
Ben Houston 已提交
89 90 91 92 93 
					bloomAmount: 1.0,
					sunLight: 4.0,

					enabled: true,
					avgLuminance: 0.7,
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
94 95 
					middleGrey: 0.04,
					maxLuminance: 16,
B
refactor on screen controls on readability, add enable/disable tone mapping.  
Ben Houston 已提交
96
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 
					adaptionRate: 2.0,
				};

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				// CAMERAS

				camera = new THREE.PerspectiveCamera( 70, windowThirdX / window.innerHeight, 0.1, 100000 );
				camera.position.x = 700;
				camera.position.y = 400;
				camera.position.z = 800;
				cameraCube = new THREE.PerspectiveCamera( 70, windowThirdX / window.innerHeight, 1, 100000 );

				cameraBG = new THREE.OrthographicCamera( -windowHalfX, windowHalfX, windowHalfY, -windowHalfY, -10000, 10000 );
				cameraBG.position.z = 100;
M
Fixed OrbitControls and DAT fight.  
Mr.doob 已提交
114 
				orbitControls = new THREE.OrbitControls( camera, container );
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 
				orbitControls.autoRotate = true;
				orbitControls.autoRotateSpeed = 1;

				// SCENE

				scene = new THREE.Scene();
				sceneCube = new THREE.Scene();
				debugScene = new THREE.Scene();

				// LIGHTS

				var ambient = new THREE.AmbientLight( 0x050505 );
				scene.add( ambient );

				directionalLight = new THREE.DirectionalLight( 0xffffff, params.sunLight );
				directionalLight.position.set( 2, 0, 10 ).normalize();
				scene.add( directionalLight );

				var atmoShader = {
					side: THREE.BackSide,
					// blending: THREE.AdditiveBlending,
					transparent: true,
					lights: true,
					uniforms: THREE.UniformsUtils.merge( [

						THREE.UniformsLib[ "common" ],
						THREE.UniformsLib[ "lights" ],
					] ),
					vertexShader: [
						"varying vec3 vViewPosition;",
						"varying vec3 vNormal;",
						THREE.ShaderChunk[ "lights_phong_pars_vertex" ],
						"void main() {",
M
Fixed example.  
Mr.doob 已提交
148 149 
							THREE.ShaderChunk[ "beginnormal_vertex" ],
							THREE.ShaderChunk[ "defaultnormal_vertex" ],
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
150 151 152 153 

							"	vNormal = normalize( transformedNormal );",
							"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
							"vViewPosition = -mvPosition.xyz;",
M
Renamed tonemapping example.  
Mr.doob 已提交
154 155 
							"gl_Position = projectionMatrix * mvPosition;",
						"}"
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
156
M
Renamed tonemapping example.  
Mr.doob 已提交
157 
					].join("\n"),
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
158
M
Renamed tonemapping example.  
Mr.doob 已提交
159 
					fragmentShader: [
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
160
M
Renamed tonemapping example.  
Mr.doob 已提交
161 
						THREE.ShaderChunk[ "lights_phong_pars_fragment" ],
M
Fixed OrbitControls and DAT fight.  
Mr.doob 已提交
162
M
Renamed tonemapping example.  
Mr.doob 已提交
163 164 165 166 
						"void main() {",
							"vec3 normal = normalize( -vNormal );",
							"vec3 viewPosition = normalize( vViewPosition );",
							"#if MAX_DIR_LIGHTS > 0",
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 

								"vec3 dirDiffuse = vec3( 0.0 );",

								"for( int i = 0; i < MAX_DIR_LIGHTS; i ++ ) {",

									"vec4 lDirection = viewMatrix * vec4( directionalLightDirection[ i ], 0.0 );",
									"vec3 dirVector = normalize( lDirection.xyz );",
									"float dotProduct = dot( viewPosition, dirVector );",
									"dotProduct = 1.0 * max( dotProduct, 0.0 ) + (1.0 - max( -dot( normal, dirVector ), 0.0 ));",
									"dotProduct *= dotProduct;",
									"dirDiffuse += max( 0.5 * dotProduct, 0.0 ) * directionalLightColor[ i ];",
								"}",
							"#endif",

							//Fade out atmosphere at edge
							"float viewDot = abs(dot( normal, viewPosition ));",
							"viewDot = clamp( pow( viewDot + 0.6, 10.0 ), 0.0, 1.0);",
M
Fixed OrbitControls and DAT fight.  
Mr.doob 已提交
184
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
185 
							"vec3 colour = vec3( 0.05, 0.09, 0.13 ) * dirDiffuse;",
M
Renamed tonemapping example.  
Mr.doob 已提交
186 
							"gl_FragColor = vec4( colour, viewDot );",
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
187
M
Renamed tonemapping example.  
Mr.doob 已提交
188 
						"}"
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
189
M
Renamed tonemapping example.  
Mr.doob 已提交
190 
					].join("\n"),
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
191 192 193 194 
				};

				var earthAtmoMat = new THREE.ShaderMaterial( atmoShader );
M
Renamed tonemapping example.  
Mr.doob 已提交
195 196 197 198 
				var earthMat = new THREE.MeshPhongMaterial( {
					color: 0xffffff,
					shininess: 200
				} );
M
Fixed OrbitControls and DAT fight.  
Mr.doob 已提交
199
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
200 201 202 203 204 205 206 207 
				var earthDiffuse = THREE.ImageUtils.loadTexture( 'textures/planets/earth_atmos_4096.jpg', undefined, function( tex ) {
					earthMat.map = tex;
					earthMat.needsUpdate = true;
				} );
				var earthSpecular = THREE.ImageUtils.loadTexture( 'textures/planets/earth_specular_2048.jpg', undefined, function( tex ) {
					earthMat.specularMap = tex;
					earthMat.needsUpdate = true;
				} );
M
Renamed tonemapping example.  
Mr.doob 已提交
208
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
209 210 211 212 213 
				// var earthNormal = THREE.ImageUtils.loadTexture( 'textures/planets/earth-new-normal-2048.jpg', undefined, function( tex ) {
				// 	earthMat.normalMap = tex;
				// 	earthMat.needsUpdate = true;
				// } );
M
Renamed tonemapping example.  
Mr.doob 已提交
214 215 216 217 218 219 
				var earthLightsMat = new THREE.MeshBasicMaterial( {
					color: 0xffffff,
					blending: THREE.AdditiveBlending,
					transparent: true,
					depthTest: false
				} );
M
Fixed OrbitControls and DAT fight.  
Mr.doob 已提交
220
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
221 222 223 224 225 
				var earthLights = THREE.ImageUtils.loadTexture( 'textures/planets/earth_lights_2048.png', undefined, function( tex ) {
					earthLightsMat.map = tex;
					earthLightsMat.needsUpdate = true;
				} );
M
Renamed tonemapping example.  
Mr.doob 已提交
226 227 228 229 230 231 232 
				var earthCloudsMat = new THREE.MeshLambertMaterial( {
					color: 0xffffff,
					blending: THREE.NormalBlending,
					transparent: true,
					depthTest: false
				} );
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 
				var earthClouds = THREE.ImageUtils.loadTexture( 'textures/planets/earth_clouds_2048.png', undefined, function( tex ) {
					earthCloudsMat.map = tex;
					earthCloudsMat.needsUpdate = true;
				} );

				var earthGeo = new THREE.SphereGeometry( 600, 24, 24 );
				var sphereMesh = new THREE.Mesh( earthGeo, earthMat );
				scene.add( sphereMesh );

				var sphereLightsMesh = new THREE.Mesh( earthGeo, earthLightsMat );
				scene.add( sphereLightsMesh );

				var sphereCloudsMesh = new THREE.Mesh( earthGeo, earthCloudsMat );
				scene.add( sphereCloudsMesh );

				var sphereAtmoMesh = new THREE.Mesh( earthGeo, earthAtmoMat );
				sphereAtmoMesh.scale.set( 1.05, 1.05, 1.05 );
				scene.add( sphereAtmoMesh );

				var vBGShader = [
					// "attribute vec2 uv;",
					"varying vec2 vUv;",
M
Renamed tonemapping example.  
Mr.doob 已提交
255 256 257 258 
					"void main() {",
						"vUv = uv;",
						"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
					"}"
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
259
M
Renamed tonemapping example.  
Mr.doob 已提交
260 
				].join("\n");
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
261
M
Renamed tonemapping example.  
Mr.doob 已提交
262 
				var pBGShader = [
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
263
M
Renamed tonemapping example.  
Mr.doob 已提交
264 265 
					"uniform sampler2D map;",
					"varying vec2 vUv;",
M
Fixed OrbitControls and DAT fight.  
Mr.doob 已提交
266
M
Renamed tonemapping example.  
Mr.doob 已提交
267 
					"void main() {",
M
Fixed OrbitControls and DAT fight.  
Mr.doob 已提交
268
M
Renamed tonemapping example.  
Mr.doob 已提交
269 270 
						"vec2 sampleUV = vUv;",
						"vec4 colour = texture2D( map, sampleUV, 0.0 );",
M
Fixed OrbitControls and DAT fight.  
Mr.doob 已提交
271
M
Renamed tonemapping example.  
Mr.doob 已提交
272 
						"gl_FragColor = vec4( colour.xyz, 1.0 );",
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
273
M
Renamed tonemapping example.  
Mr.doob 已提交
274 
					"}"
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
275
M
Renamed tonemapping example.  
Mr.doob 已提交
276 
				].join("\n");
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 

				// Skybox
				adaptiveLuminanceMat = new THREE.ShaderMaterial( {
					uniforms: {
						map: { type: 't', value: null }
					},
					vertexShader: vBGShader,
					fragmentShader: pBGShader,
					depthTest: false,
					// color: 0xffffff
					blending: THREE.NoBlending
				} );

				currentLuminanceMat = new THREE.ShaderMaterial( {
					uniforms: {
						map: { type: 't', value: null }
					},
					vertexShader: vBGShader,
					fragmentShader: pBGShader,
					depthTest: false,
					// color: 0xffffff
					// blending: THREE.NoBlending
				} );
M
Fixed OrbitControls and DAT fight.  
Mr.doob 已提交
300
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 
				var quadBG = new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.1, 0.1 ), currentLuminanceMat );
				quadBG.position.z = -500;
				quadBG.position.x = -window.innerWidth * 0.5 + window.innerWidth * 0.05;
				quadBG.scale.set( window.innerWidth, window.innerHeight, 1 );
				debugScene.add( quadBG );

				quadBG = new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.1, 0.1 ), adaptiveLuminanceMat );
				quadBG.position.z = -500;
				quadBG.position.x = -window.innerWidth * 0.5 + window.innerWidth * 0.15;
				quadBG.scale.set( window.innerWidth, window.innerHeight, 1 );
				debugScene.add( quadBG );

				var r = "textures/cube/MilkyWay/";
				var urls = [ r + "dark-s_px.jpg", r + "dark-s_nx.jpg",
							 r + "dark-s_py.jpg", r + "dark-s_ny.jpg",
							 r + "dark-s_pz.jpg", r + "dark-s_nz.jpg" ];

				var textureCube = THREE.ImageUtils.loadTextureCube( urls );
				textureCube.format = THREE.RGBFormat;
				var skyboxShader = THREE.ShaderLib[ "cube" ];
				skyboxShader.uniforms[ "tCube" ].value = textureCube;

				var skyboxMaterial = new THREE.ShaderMaterial( {

					fragmentShader: skyboxShader.fragmentShader,
					vertexShader: skyboxShader.vertexShader,
					uniforms: skyboxShader.uniforms,
					depthWrite: false,
					side: THREE.BackSide

				} ),

				mesh = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), skyboxMaterial );
				sceneCube.add( mesh );
M
Fixed OrbitControls and DAT fight.  
Mr.doob 已提交
336
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
337 
				renderer = new THREE.WebGLRenderer();
M
Examples: Added setPixelRatio(). See #5627.  
Mr.doob 已提交
338 
				renderer.setPixelRatio( window.devicePixelRatio );
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
339 340 341 
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.setFaceCulling( THREE.CullFaceNone );
				renderer.autoClear = false;
M
Examples: Added setPixelRatio(). See #5627.  
Mr.doob 已提交
342
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
343 344 345 346 347 348 349 350 351 352 353 354 355 
				renderer.gammaInput = true;
				renderer.gammaOutput = false;

				container.appendChild( renderer.domElement );

				var extensions = new THREE.WebGLExtensions( renderer.getContext() );

				// var width = window.innerWidth || 1;
				var height = window.innerHeight || 1;

				var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: false };
				var regularRenderTarget = new THREE.WebGLRenderTarget( windowThirdX, height, parameters );
				ldrEffectComposer = new THREE.EffectComposer( renderer, regularRenderTarget );
M
Fixed OrbitControls and DAT fight.  
Mr.doob 已提交
356
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
357 358 359 360 361 
				if ( extensions.get('OES_texture_half_float_linear') ) {
					parameters.type = THREE.FloatType;
				}
				var hdrRenderTarget = new THREE.WebGLRenderTarget( windowThirdX, height, parameters );
				dynamicHdrEffectComposer = new THREE.EffectComposer( renderer, hdrRenderTarget );
M
Renamed tonemapping example.  
Mr.doob 已提交
362 363 
				dynamicHdrEffectComposer.setSize( window.innerWidth, window.innerHeight );
				hdrEffectComposer = new THREE.EffectComposer( renderer, hdrRenderTarget );
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
364
M
Renamed tonemapping example.  
Mr.doob 已提交
365 
				var debugPass = new THREE.RenderPass( debugScene, cameraBG );
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
366 367 368 
				debugPass.clear = false;
				var scenePass = new THREE.RenderPass( scene, camera, undefined, undefined, undefined );
				var skyboxPass = new THREE.RenderPass( sceneCube, cameraCube );
M
Renamed tonemapping example.  
Mr.doob 已提交
369 370 371 372 373 374 375 
				scenePass.clear = false;

				adaptToneMappingPass = new THREE.AdaptiveToneMappingPass( true, 256 );
				adaptToneMappingPass.needsSwap = true;
				ldrToneMappingPass = new THREE.AdaptiveToneMappingPass( false, 256 );
				hdrToneMappingPass = new THREE.AdaptiveToneMappingPass( false, 256 );
				bloomPass = new THREE.BloomPass();
B
add gamma correction pass to adaptive tone mapping example.  
Ben Houston 已提交
376 377 
				var gammaCorrectionPass = new THREE.ShaderPass( THREE.GammaCorrectionShader );
				gammaCorrectionPass.renderToScreen = true;
M
Fixed OrbitControls and DAT fight.  
Mr.doob 已提交
378
M
Renamed tonemapping example.  
Mr.doob 已提交
379 380 381 382 383 
				dynamicHdrEffectComposer.addPass( skyboxPass );
				dynamicHdrEffectComposer.addPass( scenePass );
				dynamicHdrEffectComposer.addPass( adaptToneMappingPass );
				// dynamicHdrEffectComposer.addPass( debugPass );
				dynamicHdrEffectComposer.addPass( bloomPass );
B
add gamma correction pass to adaptive tone mapping example.  
Ben Houston 已提交
384 
				dynamicHdrEffectComposer.addPass( gammaCorrectionPass );
M
Renamed tonemapping example.  
Mr.doob 已提交
385 386 387 388 389 

				hdrEffectComposer.addPass( skyboxPass );
				hdrEffectComposer.addPass( scenePass );
				hdrEffectComposer.addPass( hdrToneMappingPass );
				hdrEffectComposer.addPass( bloomPass );
B
add gamma correction pass to adaptive tone mapping example.  
Ben Houston 已提交
390 
				hdrEffectComposer.addPass( gammaCorrectionPass );
M
Renamed tonemapping example.  
Mr.doob 已提交
391 392 393 394 395 

				ldrEffectComposer.addPass( skyboxPass );
				ldrEffectComposer.addPass( scenePass );
				ldrEffectComposer.addPass( ldrToneMappingPass );
				ldrEffectComposer.addPass( bloomPass );
B
add gamma correction pass to adaptive tone mapping example.  
Ben Houston 已提交
396 
				ldrEffectComposer.addPass( gammaCorrectionPass );
M
Renamed tonemapping example.  
Mr.doob 已提交
397 398 399 400 

				// var gammaPass = new THREE.ShaderPass( GammaShader );
				// gammaPass.renderToScreen = true;
				// ldrEffectComposer.addPass( gammaPass );
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
401 402
B
refactor on screen controls on readability, add enable/disable tone mapping.  
Ben Houston 已提交
403 
				var gui = new dat.GUI();
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
404 405 

				// dynamicHdrGui.add( params, 'projection', { 'From cam to mesh': 'camera', 'Normal to mesh': 'normal' } );
B
refactor on screen controls on readability, add enable/disable tone mapping.  
Ben Houston 已提交
406 407 
				var sceneGui = gui.addFolder( 'Scenes' );
				var toneMappingGui = gui.addFolder( 'ToneMapping' );
M
Fix for average lumninance uniform not being set across both static tone mapping shaders  
Michael Bond 已提交
408 
				var staticToneMappingGui = gui.addFolder( 'StaticOnly' );
B
refactor on screen controls on readability, add enable/disable tone mapping.  
Ben Houston 已提交
409 410 411 412 413 414 415 416 
				var adaptiveToneMappingGui = gui.addFolder( 'AdaptiveOnly' );

				sceneGui.add( params, 'bloomAmount', 0.0, 10.0 );
				sceneGui.add( params, 'sunLight', 0.1, 12.0 );

				toneMappingGui.add( params, 'enabled' );
				toneMappingGui.add( params, 'middleGrey', 0, 12 );
				toneMappingGui.add( params, 'maxLuminance', 1, 30 );
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
417
M
Fix for average lumninance uniform not being set across both static tone mapping shaders  
Michael Bond 已提交
418 
				staticToneMappingGui.add( params, 'avgLuminance', 0.001, 2.0 );
B
refactor on screen controls on readability, add enable/disable tone mapping.  
Ben Houston 已提交
419 
				adaptiveToneMappingGui.add( params, 'adaptionRate', 0.0, 10.0 );
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
420
B
refactor on screen controls on readability, add enable/disable tone mapping.  
Ben Houston 已提交
421 
				gui.open();
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 

				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;
				windowThirdX = window.innerWidth / 3;
				windowThirdY = window.innerHeight / 3;

				camera.aspect = windowThirdX / window.innerHeight;
				camera.updateProjectionMatrix();

				cameraCube.aspect = windowThirdX / window.innerHeight;
				cameraCube.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function animate() {

				requestAnimationFrame( animate );
				if ( bloomPass ) {
					bloomPass.copyUniforms[ "opacity" ].value = params.bloomAmount;
				}

				if ( adaptToneMappingPass ) {
					adaptToneMappingPass.setAdaptionRate( params.adaptionRate );
					adaptiveLuminanceMat.uniforms.map.value = adaptToneMappingPass.luminanceRT;
					currentLuminanceMat.uniforms.map.value = adaptToneMappingPass.currentLuminanceRT;
M
Fixed OrbitControls and DAT fight.  
Mr.doob 已提交
455
B
refactor on screen controls on readability, add enable/disable tone mapping.  
Ben Houston 已提交
456 
					adaptToneMappingPass.enabled = params.enabled;
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
457 458 
					adaptToneMappingPass.setMaxLuminance( params.maxLuminance );
					adaptToneMappingPass.setMiddleGrey( params.middleGrey );
B
refactor on screen controls on readability, add enable/disable tone mapping.  
Ben Houston 已提交
459 460 461 462 

					hdrToneMappingPass.enabled = params.enabled;
					hdrToneMappingPass.setMaxLuminance( params.maxLuminance );
					hdrToneMappingPass.setMiddleGrey( params.middleGrey );
M
Fix for average lumninance uniform not being set across both static tone mapping shaders  
Michael Bond 已提交
463 464 465 
					if ( hdrToneMappingPass.setAverageLuminance ) {
						hdrToneMappingPass.setAverageLuminance( params.avgLuminance );
					}
M
Fixed OrbitControls and DAT fight.  
Mr.doob 已提交
466
B
refactor on screen controls on readability, add enable/disable tone mapping.  
Ben Houston 已提交
467 468 469 
					ldrToneMappingPass.enabled = params.enabled;
					ldrToneMappingPass.setMaxLuminance( params.maxLuminance );
					ldrToneMappingPass.setMiddleGrey( params.middleGrey );
M
Fix for average lumninance uniform not being set across both static tone mapping shaders  
Michael Bond 已提交
470 471 472 
					if ( ldrToneMappingPass.setAverageLuminance ) {
						ldrToneMappingPass.setAverageLuminance( params.avgLuminance );
					}
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
473 
				}
M
Renamed tonemapping example.  
Mr.doob 已提交
474
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 
				directionalLight.intensity = params.sunLight;

				orbitControls.update();

				render();

			}

			function render() {

				camera.lookAt( scene.position );
				cameraCube.rotation.copy( camera.rotation );

				renderer.setViewport( 0, 0, windowThirdX, window.innerHeight );
				ldrEffectComposer.render( 0.017 );

				renderer.setViewport( windowThirdX, 0, windowThirdX, window.innerHeight );
				hdrEffectComposer.render( 0.017 );

				renderer.setViewport( windowThirdX * 2, 0, windowThirdX, window.innerHeight );
				dynamicHdrEffectComposer.render( 0.017 );

			}

		</script>

	</body>
</html>