Merge pull request #19617 from mrdoob/sky

Sky: Remove hardcoded Uncharted2 tone mapping

examples/js/objects/Sky.js

@@ -36,7 +36,6 @@ THREE.Sky.prototype = Object.create( THREE.Mesh.prototype );
 THREE.Sky.SkyShader = {
 
 	uniforms: {
-		"luminance": { value: 1 },
 		"turbidity": { value: 2 },
 		"rayleigh": { value: 1 },
 		"mieCoefficient": { value: 0.005 },
@@ -126,7 +125,6 @@ THREE.Sky.SkyShader = {
 		'varying vec3 vBetaM;',
 		'varying float vSunE;',
 
-		'uniform float luminance;',
 		'uniform float mieDirectionalG;',
 		'uniform vec3 up;',
 
@@ -159,21 +157,6 @@ THREE.Sky.SkyShader = {
 		'	return ONE_OVER_FOURPI * ( ( 1.0 - g2 ) * inverse );',
 		'}',
 
-		// Filmic ToneMapping http://filmicgames.com/archives/75
-		'const float A = 0.15;',
-		'const float B = 0.50;',
-		'const float C = 0.10;',
-		'const float D = 0.20;',
-		'const float E = 0.02;',
-		'const float F = 0.30;',
-
-		'const float whiteScale = 1.0748724675633854;', // 1.0 / Uncharted2Tonemap(1000.0)
-
-		'vec3 Uncharted2Tonemap( vec3 x ) {',
-		'	return ( ( x * ( A * x + C * B ) + D * E ) / ( x * ( A * x + B ) + D * F ) ) - E / F;',
-		'}',
-
-
 		'void main() {',
 
 		'	vec3 direction = normalize( vWorldPosition - cameraPos );',
@@ -212,13 +195,13 @@ THREE.Sky.SkyShader = {
 
 		'	vec3 texColor = ( Lin + L0 ) * 0.04 + vec3( 0.0, 0.0003, 0.00075 );',
 
-		'	vec3 curr = Uncharted2Tonemap( ( log2( 2.0 / pow( luminance, 4.0 ) ) ) * texColor );',
-		'	vec3 color = curr * whiteScale;',
-
-		'	vec3 retColor = pow( color, vec3( 1.0 / ( 1.2 + ( 1.2 * vSunfade ) ) ) );',
+		'	vec3 retColor = pow( texColor, vec3( 1.0 / ( 1.2 + ( 1.2 * vSunfade ) ) ) );',
 
 		'	gl_FragColor = vec4( retColor, 1.0 );',
 
+		'#include <tonemapping_fragment>',
+		'#include <encodings_fragment>',
+
 		'}'
 	].join( '\n' )
 

examples/jsm/objects/Sky.js

@@ -44,7 +44,6 @@ Sky.prototype = Object.create( Mesh.prototype );
 Sky.SkyShader = {
 
 	uniforms: {
-		"luminance": { value: 1 },
 		"turbidity": { value: 2 },
 		"rayleigh": { value: 1 },
 		"mieCoefficient": { value: 0.005 },
@@ -134,7 +133,6 @@ Sky.SkyShader = {
 		'varying vec3 vBetaM;',
 		'varying float vSunE;',
 
-		'uniform float luminance;',
 		'uniform float mieDirectionalG;',
 		'uniform vec3 up;',
 
@@ -167,21 +165,6 @@ Sky.SkyShader = {
 		'	return ONE_OVER_FOURPI * ( ( 1.0 - g2 ) * inverse );',
 		'}',
 
-		// Filmic ToneMapping http://filmicgames.com/archives/75
-		'const float A = 0.15;',
-		'const float B = 0.50;',
-		'const float C = 0.10;',
-		'const float D = 0.20;',
-		'const float E = 0.02;',
-		'const float F = 0.30;',
-
-		'const float whiteScale = 1.0748724675633854;', // 1.0 / Uncharted2Tonemap(1000.0)
-
-		'vec3 Uncharted2Tonemap( vec3 x ) {',
-		'	return ( ( x * ( A * x + C * B ) + D * E ) / ( x * ( A * x + B ) + D * F ) ) - E / F;',
-		'}',
-
-
 		'void main() {',
 
 		'	vec3 direction = normalize( vWorldPosition - cameraPos );',
@@ -220,13 +203,13 @@ Sky.SkyShader = {
 
 		'	vec3 texColor = ( Lin + L0 ) * 0.04 + vec3( 0.0, 0.0003, 0.00075 );',
 
-		'	vec3 curr = Uncharted2Tonemap( ( log2( 2.0 / pow( luminance, 4.0 ) ) ) * texColor );',
-		'	vec3 color = curr * whiteScale;',
-
-		'	vec3 retColor = pow( color, vec3( 1.0 / ( 1.2 + ( 1.2 * vSunfade ) ) ) );',
+		'	vec3 retColor = pow( texColor, vec3( 1.0 / ( 1.2 + ( 1.2 * vSunfade ) ) ) );',
 
 		'	gl_FragColor = vec4( retColor, 1.0 );',
 
+		'#include <tonemapping_fragment>',
+		'#include <encodings_fragment>',
+
 		'}'
 	].join( '\n' )
 

examples/webgl_shaders_sky.html

@@ -21,7 +21,7 @@
 
 			var camera, controls, scene, renderer;
 
-			var sky, sunSphere;
+			var sky, sun;
 
 			init();
 			render();
@@ -33,14 +33,7 @@
 				sky.scale.setScalar( 450000 );
 				scene.add( sky );
 
-				// Add Sun Helper
-				sunSphere = new THREE.Mesh(
-					new THREE.SphereBufferGeometry( 20000, 16, 8 ),
-					new THREE.MeshBasicMaterial( { color: 0xffffff } )
-				);
-				sunSphere.position.y = - 700000;
-				sunSphere.visible = false;
-				scene.add( sunSphere );
+				sun = new THREE.Vector3();
 
 				/// GUI
 
@@ -49,14 +42,11 @@
 					rayleigh: 2,
 					mieCoefficient: 0.005,
 					mieDirectionalG: 0.8,
-					luminance: 1,
 					inclination: 0.49, // elevation / inclination
 					azimuth: 0.25, // Facing front,
-					sun: ! true
+					exposure: 0.25
 				};
 
-				var distance = 400000;
-
 				function guiChanged() {
 
 					var uniforms = sky.material.uniforms;
@@ -64,19 +54,17 @@
 					uniforms[ "rayleigh" ].value = effectController.rayleigh;
 					uniforms[ "mieCoefficient" ].value = effectController.mieCoefficient;
 					uniforms[ "mieDirectionalG" ].value = effectController.mieDirectionalG;
-					uniforms[ "luminance" ].value = effectController.luminance;
 
 					var theta = Math.PI * ( effectController.inclination - 0.5 );
 					var phi = 2 * Math.PI * ( effectController.azimuth - 0.5 );
 
-					sunSphere.position.x = distance * Math.cos( phi );
-					sunSphere.position.y = distance * Math.sin( phi ) * Math.sin( theta );
-					sunSphere.position.z = distance * Math.sin( phi ) * Math.cos( theta );
-
-					sunSphere.visible = effectController.sun;
+					sun.x = Math.cos( phi );
+					sun.y = Math.sin( phi ) * Math.sin( theta );
+					sun.z = Math.sin( phi ) * Math.cos( theta );
 
-					uniforms[ "sunPosition" ].value.copy( sunSphere.position );
+					uniforms[ "sunPosition" ].value.copy( sun );
 
+					renderer.toneMappingExposure = effectController.exposure;
 					renderer.render( scene, camera );
 
 				}
@@ -87,10 +75,9 @@
 				gui.add( effectController, "rayleigh", 0.0, 4, 0.001 ).onChange( guiChanged );
 				gui.add( effectController, "mieCoefficient", 0.0, 0.1, 0.001 ).onChange( guiChanged );
 				gui.add( effectController, "mieDirectionalG", 0.0, 1, 0.001 ).onChange( guiChanged );
-				gui.add( effectController, "luminance", 0.0, 2 ).onChange( guiChanged );
 				gui.add( effectController, "inclination", 0, 1, 0.0001 ).onChange( guiChanged );
 				gui.add( effectController, "azimuth", 0, 1, 0.0001 ).onChange( guiChanged );
-				gui.add( effectController, "sun" ).onChange( guiChanged );
+				gui.add( effectController, "exposure", 0, 1, 0.0001 ).onChange( guiChanged );
 
 				guiChanged();
 
@@ -109,6 +96,9 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.outputEncoding = THREE.sRGBEncoding;
+				renderer.toneMapping = THREE.ACESFilmicToneMapping;
+				renderer.toneMappingExposure = 0.25;
 				document.body.appendChild( renderer.domElement );
 
 				controls = new OrbitControls( camera, renderer.domElement );