Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
webgl_shaders_tonemapping.html 16.9 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 
<!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>
B
get skin, tone mapping and terrain examples working with new BSDF and light structures.  
Ben Houston 已提交
40 
		<script src="../build/three.min.js"></script>
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
41 42 43 44 45 46 47 48 

		<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
B
get skin, tone mapping and terrain examples working with new BSDF and light structures.  
Ben Houston 已提交
161 162 
						THREE.ShaderChunk[ "common" ],
						THREE.ShaderChunk[ "bsdfs" ],
B
further consolidation of different material BRDFs via the same lighting template.  
Ben Houston 已提交
163 
						THREE.ShaderChunk[ "lights_pars" ],
M
Renamed tonemapping example.  
Mr.doob 已提交
164 
						THREE.ShaderChunk[ "lights_phong_pars_fragment" ],
M
Fixed OrbitControls and DAT fight.  
Mr.doob 已提交
165
M
Renamed tonemapping example.  
Mr.doob 已提交
166 167 168 
						"void main() {",
							"vec3 normal = normalize( -vNormal );",
							"vec3 viewPosition = normalize( vViewPosition );",
M
WebGLRenderer: MAX_ to NUM_. See 8c82186dc3c71e1d6d61c28f67acc29a072ec1d7.  
Mr.doob 已提交
169 
							"#if NUM_DIR_LIGHTS > 0",
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
170 171 172 

								"vec3 dirDiffuse = vec3( 0.0 );",
M
WebGLRenderer: MAX_ to NUM_. See 8c82186dc3c71e1d6d61c28f67acc29a072ec1d7.  
Mr.doob 已提交
173 
								"for( int i = 0; i < NUM_DIR_LIGHTS; i ++ ) {",
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
174
B
get skin, tone mapping and terrain examples working with new BSDF and light structures.  
Ben Houston 已提交
175 
									"vec4 lDirection = viewMatrix * vec4( directionalLights[i].direction, 0.0 );",
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
176 177 178 179 
									"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;",
B
get skin, tone mapping and terrain examples working with new BSDF and light structures.  
Ben Houston 已提交
180 
									"dirDiffuse += max( 0.5 * dotProduct, 0.0 ) * directionalLights[i].color;",
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
181 182 183 184 185 186 
								"}",
							"#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 已提交
187
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
188 
							"vec3 colour = vec3( 0.05, 0.09, 0.13 ) * dirDiffuse;",
M
Renamed tonemapping example.  
Mr.doob 已提交
189 
							"gl_FragColor = vec4( colour, viewDot );",
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
190
M
Renamed tonemapping example.  
Mr.doob 已提交
191 
						"}"
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
192
M
Renamed tonemapping example.  
Mr.doob 已提交
193 
					].join("\n"),
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
194 195 196 197 
				};

				var earthAtmoMat = new THREE.ShaderMaterial( atmoShader );
M
Renamed tonemapping example.  
Mr.doob 已提交
198 199 200 201 
				var earthMat = new THREE.MeshPhongMaterial( {
					color: 0xffffff,
					shininess: 200
				} );
M
Fixed OrbitControls and DAT fight.  
Mr.doob 已提交
202
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
203 204 205 206 207 208 209 210 
				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 已提交
211
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
212 213 214 215 216 
				// 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 已提交
217 218 219 220 221 222 
				var earthLightsMat = new THREE.MeshBasicMaterial( {
					color: 0xffffff,
					blending: THREE.AdditiveBlending,
					transparent: true,
					depthTest: false
				} );
M
Fixed OrbitControls and DAT fight.  
Mr.doob 已提交
223
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
224 225 226 227 228 
				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 已提交
229 230 231 232 233 234 235 
				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 已提交
236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 
				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 已提交
258 259 260 261 
					"void main() {",
						"vUv = uv;",
						"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
					"}"
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
262
M
Renamed tonemapping example.  
Mr.doob 已提交
263 
				].join("\n");
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
264
M
Renamed tonemapping example.  
Mr.doob 已提交
265 
				var pBGShader = [
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
266
M
Renamed tonemapping example.  
Mr.doob 已提交
267 268 
					"uniform sampler2D map;",
					"varying vec2 vUv;",
M
Fixed OrbitControls and DAT fight.  
Mr.doob 已提交
269
M
Renamed tonemapping example.  
Mr.doob 已提交
270 
					"void main() {",
M
Fixed OrbitControls and DAT fight.  
Mr.doob 已提交
271
M
Renamed tonemapping example.  
Mr.doob 已提交
272 273 
						"vec2 sampleUV = vUv;",
						"vec4 colour = texture2D( map, sampleUV, 0.0 );",
M
Fixed OrbitControls and DAT fight.  
Mr.doob 已提交
274
M
Renamed tonemapping example.  
Mr.doob 已提交
275 
						"gl_FragColor = vec4( colour.xyz, 1.0 );",
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
276
M
Renamed tonemapping example.  
Mr.doob 已提交
277 
					"}"
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
278
M
Renamed tonemapping example.  
Mr.doob 已提交
279 
				].join("\n");
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 

				// 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 已提交
303
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
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 336 337 338 
				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 已提交
339
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
340 
				renderer = new THREE.WebGLRenderer();
M
Examples: Added setPixelRatio(). See #5627.  
Mr.doob 已提交
341 
				renderer.setPixelRatio( window.devicePixelRatio );
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
342 343 344 
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.setFaceCulling( THREE.CullFaceNone );
				renderer.autoClear = false;
M
Examples: Added setPixelRatio(). See #5627.  
Mr.doob 已提交
345
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
346 347 348 349 350 351 352 353 354 355 356 357 358 
				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 已提交
359
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
360 361 362 363 364 
				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 已提交
365 366 
				dynamicHdrEffectComposer.setSize( window.innerWidth, window.innerHeight );
				hdrEffectComposer = new THREE.EffectComposer( renderer, hdrRenderTarget );
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
367
M
Renamed tonemapping example.  
Mr.doob 已提交
368 
				var debugPass = new THREE.RenderPass( debugScene, cameraBG );
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
369 370 371 
				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 已提交
372 373 374 375 376 377 378 
				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 已提交
379 380 
				var gammaCorrectionPass = new THREE.ShaderPass( THREE.GammaCorrectionShader );
				gammaCorrectionPass.renderToScreen = true;
M
Fixed OrbitControls and DAT fight.  
Mr.doob 已提交
381
M
Renamed tonemapping example.  
Mr.doob 已提交
382 383 384 385 386 
				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 已提交
387 
				dynamicHdrEffectComposer.addPass( gammaCorrectionPass );
M
Renamed tonemapping example.  
Mr.doob 已提交
388 389 390 391 392 

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

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

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

				// 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 已提交
409 410 
				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 已提交
411 
				var staticToneMappingGui = gui.addFolder( 'StaticOnly' );
B
refactor on screen controls on readability, add enable/disable tone mapping.  
Ben Houston 已提交
412 413 414 415 416 417 418 419 
				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 已提交
420
M
Fix for average lumninance uniform not being set across both static tone mapping shaders  
Michael Bond 已提交
421 
				staticToneMappingGui.add( params, 'avgLuminance', 0.001, 2.0 );
B
refactor on screen controls on readability, add enable/disable tone mapping.  
Ben Houston 已提交
422 
				adaptiveToneMappingGui.add( params, 'adaptionRate', 0.0, 10.0 );
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
423
B
refactor on screen controls on readability, add enable/disable tone mapping.  
Ben Houston 已提交
424 
				gui.open();
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
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 455 456 457 

				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 已提交
458
B
refactor on screen controls on readability, add enable/disable tone mapping.  
Ben Houston 已提交
459 
					adaptToneMappingPass.enabled = params.enabled;
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
460 461 
					adaptToneMappingPass.setMaxLuminance( params.maxLuminance );
					adaptToneMappingPass.setMiddleGrey( params.middleGrey );
B
refactor on screen controls on readability, add enable/disable tone mapping.  
Ben Houston 已提交
462 463 464 465 

					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 已提交
466 467 468 
					if ( hdrToneMappingPass.setAverageLuminance ) {
						hdrToneMappingPass.setAverageLuminance( params.avgLuminance );
					}
M
Fixed OrbitControls and DAT fight.  
Mr.doob 已提交
469
B
refactor on screen controls on readability, add enable/disable tone mapping.  
Ben Houston 已提交
470 471 472 
					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 已提交
473 474 475 
					if ( ldrToneMappingPass.setAverageLuminance ) {
						ldrToneMappingPass.setAverageLuminance( params.avgLuminance );
					}
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
476 
				}
M
Renamed tonemapping example.  
Mr.doob 已提交
477
M
Adding adaptive tone-mapping postprocessing pass and example  
Michael Bond 已提交
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 503 504 505 
				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>