Optimize Sky Shader (#9684)

- Move computation from fragment shader to vertex shader wherever possible
- Eliminate some dead shader code and comments
- Fix spelling of "Rayleigh"

examples/js/SkyShader.js

@@ -20,7 +20,7 @@ THREE.ShaderLib[ 'sky' ] = {
 
 		luminance: { value: 1 },
 		turbidity: { value: 2 },
-		reileigh: { value: 1 },
+		rayleigh: { value: 1 },
 		mieCoefficient: { value: 0.005 },
 		mieDirectionalG: { value: 0.8 },
 		sunPosition: { value: new THREE.Vector3() }
@@ -29,7 +29,51 @@ THREE.ShaderLib[ 'sky' ] = {
 
 	vertexShader: [
 
+		"uniform vec3 sunPosition;",
+		"uniform float rayleigh;",
+		"uniform float turbidity;",
+		"uniform float mieCoefficient;",
+
 		"varying vec3 vWorldPosition;",
+		"varying vec3 vSunDirection;",
+		"varying float vSunfade;",
+		"varying vec3 vBetaR;",
+		"varying vec3 vBetaM;",
+		"varying float vSunE;",
+
+		"const vec3 up = vec3(0.0, 1.0, 0.0);",
+
+		// constants for atmospheric scattering
+		"const float e = 2.71828182845904523536028747135266249775724709369995957;",
+		"const float pi = 3.141592653589793238462643383279502884197169;",
+
+		// mie stuff
+		// K coefficient for the primaries
+		"const float v = 4.0;",
+		"const vec3 K = vec3(0.686, 0.678, 0.666);",
+
+		// see http://blenderartists.org/forum/showthread.php?321110-Shaders-and-Skybox-madness
+		// A simplied version of the total Reayleigh scattering to works on browsers that use ANGLE
+		"const vec3 simplifiedRayleigh = 0.0005 / vec3(94, 40, 18);",
+
+		// wavelength of used primaries, according to preetham
+		"const vec3 lambda = vec3(680E-9, 550E-9, 450E-9);",
+
+		// earth shadow hack
+		"const float cutoffAngle = pi/1.95;",
+		"const float steepness = 1.5;",
+		"const float EE = 1000.0;",
+
+		"float sunIntensity(float zenithAngleCos)",
+		"{",
+			"return EE * max(0.0, 1.0 - pow(e, -((cutoffAngle - acos(zenithAngleCos))/steepness)));",
+		"}",
+
+		"vec3 totalMie(vec3 lambda, float T)",
+		"{",
+			"float c = (0.2 * T ) * 10E-18;",
+			"return 0.434 * c * pi * pow((2.0 * pi) / lambda, vec3(v - 2.0)) * K;",
+		"}",
 
 		"void main() {",
 
@@ -38,85 +82,57 @@ THREE.ShaderLib[ 'sky' ] = {
 
 			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
 
+			"vSunDirection = normalize(sunPosition);",
+
+			"vSunE = sunIntensity(dot(vSunDirection, up));",
+
+			"vSunfade = 1.0-clamp(1.0-exp((sunPosition.y/450000.0)),0.0,1.0);",
+
+			"float rayleighCoefficient = rayleigh - (1.0 * (1.0-vSunfade));",
+
+			// extinction (absorbtion + out scattering)
+			// rayleigh coefficients
+			"vBetaR = simplifiedRayleigh * rayleighCoefficient;",
+
+			// mie coefficients
+			"vBetaM = totalMie(lambda, turbidity) * mieCoefficient;",
+
 		"}",
 
 	].join( "\n" ),
 
 	fragmentShader: [
 
-		"uniform sampler2D skySampler;",
-		"uniform vec3 sunPosition;",
 		"varying vec3 vWorldPosition;",
-
-		"vec3 cameraPos = vec3(0., 0., 0.);",
-		"// uniform sampler2D sDiffuse;",
-		"// const float turbidity = 10.0; //",
-		"// const float reileigh = 2.; //",
-		"// const float luminance = 1.0; //",
-		"// const float mieCoefficient = 0.005;",
-		"// const float mieDirectionalG = 0.8;",
+		"varying vec3 vSunDirection;",
+		"varying float vSunfade;",
+		"varying vec3 vBetaR;",
+		"varying vec3 vBetaM;",
+		"varying float vSunE;",
 
 		"uniform float luminance;",
-		"uniform float turbidity;",
-		"uniform float reileigh;",
-		"uniform float mieCoefficient;",
 		"uniform float mieDirectionalG;",
 
-		"// constants for atmospheric scattering",
-		"const float e = 2.71828182845904523536028747135266249775724709369995957;",
-		"const float pi = 3.141592653589793238462643383279502884197169;",
+		"const vec3 cameraPos = vec3(0., 0., 0.);",
 
-		"const float n = 1.0003; // refractive index of air",
-		"const float N = 2.545E25; // number of molecules per unit volume for air at",
-								"// 288.15K and 1013mb (sea level -45 celsius)",
-		"const float pn = 0.035;	// depolatization factor for standard air",
-
-		"// wavelength of used primaries, according to preetham",
-		"const vec3 lambda = vec3(680E-9, 550E-9, 450E-9);",
+		// constants for atmospheric scattering
+		"const float pi = 3.141592653589793238462643383279502884197169;",
 
-		"// mie stuff",
-		"// K coefficient for the primaries",
-		"const vec3 K = vec3(0.686, 0.678, 0.666);",
-		"const float v = 4.0;",
+		"const float n = 1.0003;", // refractive index of air
+		"const float N = 2.545E25;", // number of molecules per unit volume for air at
+									// 288.15K and 1013mb (sea level -45 celsius)
 
-		"// optical length at zenith for molecules",
+		// optical length at zenith for molecules
 		"const float rayleighZenithLength = 8.4E3;",
 		"const float mieZenithLength = 1.25E3;",
 		"const vec3 up = vec3(0.0, 1.0, 0.0);",
 
-		"const float EE = 1000.0;",
 		"const float sunAngularDiameterCos = 0.999956676946448443553574619906976478926848692873900859324;",
-		"// 66 arc seconds -> degrees, and the cosine of that",
-
-		"// earth shadow hack",
-		"const float cutoffAngle = pi/1.95;",
-		"const float steepness = 1.5;",
-
-
-		"vec3 totalRayleigh(vec3 lambda)",
-		"{",
-			"return (8.0 * pow(pi, 3.0) * pow(pow(n, 2.0) - 1.0, 2.0) * (6.0 + 3.0 * pn)) / (3.0 * N * pow(lambda, vec3(4.0)) * (6.0 - 7.0 * pn));",
-		"}",
-
-		// see http://blenderartists.org/forum/showthread.php?321110-Shaders-and-Skybox-madness
-		"// A simplied version of the total Reayleigh scattering to works on browsers that use ANGLE",
-		"vec3 simplifiedRayleigh()",
-		"{",
-			"return 0.0005 / vec3(94, 40, 18);",
-			// return 0.00054532832366 / (3.0 * 2.545E25 * pow(vec3(680E-9, 550E-9, 450E-9), vec3(4.0)) * 6.245);
-		"}",
+		// 66 arc seconds -> degrees, and the cosine of that
 
 		"float rayleighPhase(float cosTheta)",
-		"{	 ",
-			"return (3.0 / (16.0*pi)) * (1.0 + pow(cosTheta, 2.0));",
-		"//	return (1.0 / (3.0*pi)) * (1.0 + pow(cosTheta, 2.0));",
-		"//	return (3.0 / 4.0) * (1.0 + pow(cosTheta, 2.0));",
-		"}",
-
-		"vec3 totalMie(vec3 lambda, vec3 K, float T)",
 		"{",
-			"float c = (0.2 * T ) * 10E-18;",
-			"return 0.434 * c * pi * pow((2.0 * pi) / lambda, vec3(v - 2.0)) * K;",
+			"return (3.0 / (16.0*pi)) * (1.0 + pow(cosTheta, 2.0));",
 		"}",
 
 		"float hgPhase(float cosTheta, float g)",
@@ -124,27 +140,15 @@ THREE.ShaderLib[ 'sky' ] = {
 			"return (1.0 / (4.0*pi)) * ((1.0 - pow(g, 2.0)) / pow(1.0 - 2.0*g*cosTheta + pow(g, 2.0), 1.5));",
 		"}",
 
-		"float sunIntensity(float zenithAngleCos)",
-		"{",
-		// This function originally used `exp(n)`, but it returns an incorrect value
-		// on Samsung S6 phones. So it has been replaced with the equivalent `pow(e, n)`.
-		// See https://github.com/mrdoob/three.js/issues/8382
-			"return EE * max(0.0, 1.0 - pow(e, -((cutoffAngle - acos(zenithAngleCos))/steepness)));",
-		"}",
-
-		"// float logLuminance(vec3 c)",
-		"// {",
-		"// 	return log(c.r * 0.2126 + c.g * 0.7152 + c.b * 0.0722);",
-		"// }",
+		// 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;",
 
-		"// Filmic ToneMapping http://filmicgames.com/archives/75",
-		"float A = 0.15;",
-		"float B = 0.50;",
-		"float C = 0.10;",
-		"float D = 0.20;",
-		"float E = 0.02;",
-		"float F = 0.30;",
-		"float W = 1000.0;",
+		"const float whiteScale = 1.0748724675633854;", // 1.0 / Uncharted2Tonemap(1000.0)
 
 		"vec3 Uncharted2Tonemap(vec3 x)",
 		"{",
@@ -154,83 +158,44 @@ THREE.ShaderLib[ 'sky' ] = {
 
 		"void main() ",
 		"{",
-			"float sunfade = 1.0-clamp(1.0-exp((sunPosition.y/450000.0)),0.0,1.0);",
-
-			"// luminance =  1.0 ;// vWorldPosition.y / 450000. + 0.5; //sunPosition.y / 450000. * 1. + 0.5;",
-
-			 "// gl_FragColor = vec4(sunfade, sunfade, sunfade, 1.0);",
-
-			"float reileighCoefficient = reileigh - (1.0* (1.0-sunfade));",
-
-			"vec3 sunDirection = normalize(sunPosition);",
-
-			"float sunE = sunIntensity(dot(sunDirection, up));",
-
-			"// extinction (absorbtion + out scattering) ",
-			"// rayleigh coefficients",
-
-			// "vec3 betaR = totalRayleigh(lambda) * reileighCoefficient;",
-			"vec3 betaR = simplifiedRayleigh() * reileighCoefficient;",
-
-			"// mie coefficients",
-			"vec3 betaM = totalMie(lambda, K, turbidity) * mieCoefficient;",
-
-			"// optical length",
-			"// cutoff angle at 90 to avoid singularity in next formula.",
+			// optical length
+			// cutoff angle at 90 to avoid singularity in next formula.
 			"float zenithAngle = acos(max(0.0, dot(up, normalize(vWorldPosition - cameraPos))));",
 			"float sR = rayleighZenithLength / (cos(zenithAngle) + 0.15 * pow(93.885 - ((zenithAngle * 180.0) / pi), -1.253));",
 			"float sM = mieZenithLength / (cos(zenithAngle) + 0.15 * pow(93.885 - ((zenithAngle * 180.0) / pi), -1.253));",
 
+			// combined extinction factor
+			"vec3 Fex = exp(-(vBetaR * sR + vBetaM * sM));",
 
-
-			"// combined extinction factor	",
-			"vec3 Fex = exp(-(betaR * sR + betaM * sM));",
-
-			"// in scattering",
-			"float cosTheta = dot(normalize(vWorldPosition - cameraPos), sunDirection);",
+			// in scattering
+			"float cosTheta = dot(normalize(vWorldPosition - cameraPos), vSunDirection);",
 
 			"float rPhase = rayleighPhase(cosTheta*0.5+0.5);",
-			"vec3 betaRTheta = betaR * rPhase;",
+			"vec3 betaRTheta = vBetaR * rPhase;",
 
 			"float mPhase = hgPhase(cosTheta, mieDirectionalG);",
-			"vec3 betaMTheta = betaM * mPhase;",
-
+			"vec3 betaMTheta = vBetaM * mPhase;",
 
-			"vec3 Lin = pow(sunE * ((betaRTheta + betaMTheta) / (betaR + betaM)) * (1.0 - Fex),vec3(1.5));",
-			"Lin *= mix(vec3(1.0),pow(sunE * ((betaRTheta + betaMTheta) / (betaR + betaM)) * Fex,vec3(1.0/2.0)),clamp(pow(1.0-dot(up, sunDirection),5.0),0.0,1.0));",
+			"vec3 Lin = pow(vSunE * ((betaRTheta + betaMTheta) / (vBetaR + vBetaM)) * (1.0 - Fex),vec3(1.5));",
+			"Lin *= mix(vec3(1.0),pow(vSunE * ((betaRTheta + betaMTheta) / (vBetaR + vBetaM)) * Fex,vec3(1.0/2.0)),clamp(pow(1.0-dot(up, vSunDirection),5.0),0.0,1.0));",
 
-			"//nightsky",
+			//nightsky
 			"vec3 direction = normalize(vWorldPosition - cameraPos);",
 			"float theta = acos(direction.y); // elevation --> y-axis, [-pi/2, pi/2]",
 			"float phi = atan(direction.z, direction.x); // azimuth --> x-axis [-pi/2, pi/2]",
 			"vec2 uv = vec2(phi, theta) / vec2(2.0*pi, pi) + vec2(0.5, 0.0);",
-			"// vec3 L0 = texture2D(skySampler, uv).rgb+0.1 * Fex;",
 			"vec3 L0 = vec3(0.1) * Fex;",
 
-			"// composition + solar disc",
-			"//if (cosTheta > sunAngularDiameterCos)",
+			// composition + solar disc
 			"float sundisk = smoothstep(sunAngularDiameterCos,sunAngularDiameterCos+0.00002,cosTheta);",
-			"// if (normalize(vWorldPosition - cameraPos).y>0.0)",
-			"L0 += (sunE * 19000.0 * Fex)*sundisk;",
-
+			"L0 += (vSunE * 19000.0 * Fex)*sundisk;",
 
-			"vec3 whiteScale = 1.0/Uncharted2Tonemap(vec3(W));",
-
-			"vec3 texColor = (Lin+L0);   ",
-			"texColor *= 0.04 ;",
-			"texColor += vec3(0.0,0.001,0.0025)*0.3;",
-
-			"float g_fMaxLuminance = 1.0;",
-			"float fLumScaled = 0.1 / luminance;     ",
-			"float fLumCompressed = (fLumScaled * (1.0 + (fLumScaled / (g_fMaxLuminance * g_fMaxLuminance)))) / (1.0 + fLumScaled); ",
-
-			"float ExposureBias = fLumCompressed;",
+			"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*sunfade))));",
-
+			"vec3 retColor = pow(color,vec3(1.0/(1.2+(1.2*vSunfade))));",
 
 			"gl_FragColor.rgb = retColor;",
 
@@ -256,7 +221,6 @@ THREE.Sky = function () {
 	var skyGeo = new THREE.SphereBufferGeometry( 450000, 32, 15 );
 	var skyMesh = new THREE.Mesh( skyGeo, skyMat );
 
-
 	// Expose variables
 	this.mesh = skyMesh;
 	this.uniforms = skyUniforms;

examples/webgl_shaders_sky.html

@@ -50,7 +50,6 @@
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/dat.gui.min.js"></script>
 
-
 		<script>
 
 
@@ -84,7 +83,7 @@
 
 				var effectController  = {
 					turbidity: 10,
-					reileigh: 2,
+					rayleigh: 2,
 					mieCoefficient: 0.005,
 					mieDirectionalG: 0.8,
 					luminance: 1,
@@ -99,7 +98,7 @@
 
 					var uniforms = sky.uniforms;
 					uniforms.turbidity.value = effectController.turbidity;
-					uniforms.reileigh.value = effectController.reileigh;
+					uniforms.rayleigh.value = effectController.rayleigh;
 					uniforms.luminance.value = effectController.luminance;
 					uniforms.mieCoefficient.value = effectController.mieCoefficient;
 					uniforms.mieDirectionalG.value = effectController.mieDirectionalG;
@@ -122,7 +121,7 @@
 				var gui = new dat.GUI();
 
 				gui.add( effectController, "turbidity", 1.0, 20.0, 0.1 ).onChange( guiChanged );
-				gui.add( effectController, "reileigh", 0.0, 4, 0.001 ).onChange( guiChanged );
+				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 );