Sky: Make sun disc optional. (mrdoob#33031)

Author: jwheare

examples/jsm/objects/Sky.js

@@ -25,6 +25,16 @@ import {
  * sky.scale.setScalar( 10000 );
  * scene.add( sky );
  * ```
+ * 
+ * It can be useful to hide the sun disc when generating an environment map to avoid artifacts
+ * 
+ * ```js
+ * // disable before rendering environment map
+ * sky.material.uniforms.showSunDisc.value = false;
+ * // ...
+ * // re-enable before scene sky box rendering
+ * sky.material.uniforms.showSunDisc.value = true;
+ * ```
  *
  * @augments Mesh
  * @three_import import { Sky } from 'three/addons/objects/Sky.js';
@@ -78,6 +88,7 @@ Sky.SkyShader = {
 		'cloudCoverage': { value: 0.4 },
 		'cloudDensity': { value: 0.4 },
 		'cloudElevation': { value: 0.5 },
+		'showSunDisc': { value: 1 },
 		'time': { value: 0.0 }
 	},
 
@@ -167,6 +178,7 @@ Sky.SkyShader = {
 		uniform float cloudCoverage;
 		uniform float cloudDensity;
 		uniform float cloudElevation;
+		uniform float showSunDisc;
 		uniform float time;
 
 		// Cloud noise functions
@@ -256,8 +268,8 @@ Sky.SkyShader = {
 			vec3 L0 = vec3( 0.1 ) * Fex;
 
 			// composition + solar disc
-			float sundisk = smoothstep( sunAngularDiameterCos, sunAngularDiameterCos + 0.00002, cosTheta );
-			L0 += ( vSunE * 19000.0 * Fex ) * sundisk;
+			float sundisc = smoothstep( sunAngularDiameterCos, sunAngularDiameterCos + 0.00002, cosTheta ) * showSunDisc;
+			L0 += ( vSunE * 19000.0 * Fex ) * sundisc;
 
 			vec3 texColor = ( Lin + L0 ) * 0.04 + vec3( 0.0, 0.0003, 0.00075 );
 

examples/jsm/objects/SkyMesh.js

@@ -26,6 +26,16 @@ import { Fn, float, vec2, vec3, acos, add, mul, clamp, cos, dot, exp, max, mix,
  * scene.add( sky );
  * ```
  *
+ * It can be useful to hide the sun disc when generating an environment map to avoid artifacts
+ * 
+ * ```js
+ * // disable before rendering environment map
+ * sky.showSunDisc.value = false;
+ * // ...
+ * // re-enable before scene sky box rendering
+ * sky.showSunDisc.value = true;
+ * ```
+ *
  * @augments Mesh
  * @three_import import { SkyMesh } from 'three/addons/objects/SkyMesh.js';
  */
@@ -117,6 +127,13 @@ class SkyMesh extends Mesh {
 		 */
 		this.cloudElevation = uniform( 0.5 );
 
+		/**
+		 * Whether to render the solar disc.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this.showSunDisc = uniform( 1 );
+
 		/**
 		 * This flag can be used for type testing.
 		 *
@@ -146,8 +163,8 @@ class SkyMesh extends Mesh {
 		const vertexNode = /*@__PURE__*/ Fn( () => {
 
 			// constants for atmospheric scattering
-			const e = float( 2.71828182845904523536028747135266249775724709369995957 );
-			// const pi = float( 3.141592653589793238462643383279502884197169 );
+			const e = float( 2.718281828459045 );
+			// const pi = float( 3.141592653589793 );
 
 			// wavelength of used primaries, according to preetham
 			// const lambda = vec3( 680E-9, 550E-9, 450E-9 );
@@ -211,13 +228,13 @@ class SkyMesh extends Mesh {
 		const colorNode = /*@__PURE__*/ Fn( () => {
 
 			// constants for atmospheric scattering
-			const pi = float( 3.141592653589793238462643383279502884197169 );
+			const pi = float( 3.141592653589793 );
 
 			// optical length at zenith for molecules
 			const rayleighZenithLength = float( 8.4E3 );
 			const mieZenithLength = float( 1.25E3 );
 			// 66 arc seconds -> degrees, and the cosine of that
-			const sunAngularDiameterCos = float( 0.999956676946448443553574619906976478926848692873900859324 );
+			const sunAngularDiameterCos = float( 0.9999566769464484 );
 
 			// 3.0 / ( 16.0 * pi )
 			const THREE_OVER_SIXTEENPI = float( 0.05968310365946075 );
@@ -262,8 +279,8 @@ class SkyMesh extends Mesh {
 			const L0 = vec3( 0.1 ).mul( Fex );
 
 			// composition + solar disc
-			const sundisk = smoothstep( sunAngularDiameterCos, sunAngularDiameterCos.add( 0.00002 ), cosTheta );
-			L0.addAssign( vSunE.mul( 19000.0 ).mul( Fex ).mul( sundisk ) );
+			const sundisc = smoothstep( sunAngularDiameterCos, sunAngularDiameterCos.add( 0.00002 ), cosTheta ).mul( this.showSunDisc );
+			L0.addAssign( vSunE.mul( 19000.0 ).mul( Fex ).mul( sundisc ) );
 
 			const texColor = add( Lin, L0 ).mul( 0.04 ).add( vec3( 0.0, 0.0003, 0.00075 ) ).toVar();
 

examples/webgl_shaders_sky.html

@@ -55,7 +55,8 @@
 					exposure: renderer.toneMappingExposure,
 					cloudCoverage: 0.4,
 					cloudDensity: 0.4,
-					cloudElevation: 0.5
+					cloudElevation: 0.5,
+					showSunDisc: true
 				};
 
 				function guiChanged() {
@@ -68,6 +69,7 @@
 					uniforms[ 'cloudCoverage' ].value = effectController.cloudCoverage;
 					uniforms[ 'cloudDensity' ].value = effectController.cloudDensity;
 					uniforms[ 'cloudElevation' ].value = effectController.cloudElevation;
+					uniforms[ 'showSunDisc' ].value = effectController.showSunDisc;
 
 					const phi = THREE.MathUtils.degToRad( 90 - effectController.elevation );
 					const theta = THREE.MathUtils.degToRad( effectController.azimuth );
@@ -89,6 +91,7 @@
 				gui.add( effectController, 'elevation', 0, 90, 0.1 ).onChange( guiChanged );
 				gui.add( effectController, 'azimuth', - 180, 180, 0.1 ).onChange( guiChanged );
 				gui.add( effectController, 'exposure', 0, 1, 0.0001 ).onChange( guiChanged );
+				gui.add( effectController, 'showSunDisc' ).onChange( guiChanged );
 
 				const folderClouds = gui.addFolder( 'Clouds' );
 				folderClouds.add( effectController, 'cloudCoverage', 0, 1, 0.01 ).name( 'coverage' ).onChange( guiChanged );

examples/webgpu_sky.html

@@ -67,7 +67,8 @@
 					exposure: renderer.toneMappingExposure,
 					cloudCoverage: 0.4,
 					cloudDensity: 0.4,
-					cloudElevation: 0.5
+					cloudElevation: 0.5,
+					showSunDisc: true
 				};
 
 				function guiChanged() {
@@ -79,6 +80,7 @@
 					sky.cloudCoverage.value = effectController.cloudCoverage;
 					sky.cloudDensity.value = effectController.cloudDensity;
 					sky.cloudElevation.value = effectController.cloudElevation;
+					sky.showSunDisc.value = effectController.showSunDisc;
 
 					const phi = THREE.MathUtils.degToRad( 90 - effectController.elevation );
 					const theta = THREE.MathUtils.degToRad( effectController.azimuth );
@@ -100,6 +102,7 @@
 				gui.add( effectController, 'elevation', 0, 90, 0.1 ).onChange( guiChanged );
 				gui.add( effectController, 'azimuth', - 180, 180, 0.1 ).onChange( guiChanged );
 				gui.add( effectController, 'exposure', 0, 1, 0.0001 ).onChange( guiChanged );
+				gui.add( effectController, 'showSunDisc' ).onChange( guiChanged );
 
 				const folderClouds = gui.addFolder( 'Clouds' );
 				folderClouds.add( effectController, 'cloudCoverage', 0, 1, 0.01 ).name( 'coverage' ).onChange( guiChanged );