Added the corona image to the sun.

examples/verdant_valley.html

@@ -78,7 +78,7 @@
           <sky-longitude>-99.18</sky-longitude>
         </sky-location>
         <sky-time>
-          <sky-date>2024-04-07 6:00:00</sky-date>
+          <sky-date>1623-12-10 3:00:00</sky-date>
           <sky-utc-offset>7</sky-utc-offset>
           <sky-speed>200.0</sky-speed>
         </sky-time>
@@ -87,6 +87,9 @@
             <sky-assets-dir dir="moon" moon-path></sky-assets-dir>
             <sky-assets-dir dir="star_data" star-path></sky-assets-dir>
             <sky-assets-dir dir="blue_noise" blue-noise-path></sky-assets-dir>
+            <sky-assets-dir dir="solar_eclipse">
+              <sky-solar-eclipse-map></sky-solar-eclipse-map>
+            </sky-assets-dir>
           </sky-assets-dir>
           <sky-assets-dir dir="wasm" wasm-path></sky-assets-dir>
         </sky-assets-dir>

src/glsl/atmosphere/atmosphere-pass.glsl

@@ -55,6 +55,7 @@ const vec3 gamma = vec3(2.2);
   uniform float sunAngularDiameterCos;
   uniform float moonRadius;
   uniform sampler2D moonDiffuseMap;
+  uniform sampler2D solarEclipseMap;
   varying vec2 vUv;
   const float sunDiskIntensity = 30.0;
 

src/glsl/sun/base-sun-partial.glsl

@@ -23,5 +23,5 @@ vec3 vectorBetweenMoonAndPixel = normalizedWorldPosition - moonPosition;
 float distanceBetweenPixelAndMoon = dot(vectorBetweenMoonAndPixel, vectorBetweenMoonAndPixel);
 vec3 sunTexel = vec3(0.0);
 if(distanceBetweenPixelAndMoon > (moonRadius * moonRadius)){
-  sunTexel = sundisk * sunDiskIntensity * limbDarkening * transmittanceFade;
+  sunTexel = (sundisk * sunDiskIntensity * limbDarkening + 2.0 * texture2D(solarEclipseMap, vUv).r)* transmittanceFade;
 }

src/glsl/sun/combination-pass.glsl

@@ -42,5 +42,5 @@ void main(){
   combinedLight += ((texture2D(blueNoiseTexture, screenPosition.xy * 11.0).rgb - vec3(0.5)) / vec3(128.0));
 
   //Return our tone mapped color when everything else is done
-  gl_FragColor = vec4(combinedLight, falloffDisk);
+  gl_FragColor = vec4(combinedLight, 1.0);
 }

src/js/components/AssetManager.js

@@ -4,7 +4,8 @@ StarrySky.AssetManager = function(skyDirector){
   this.images = {
     moonImages: {},
     starImages: {},
-    blueNoiseImages: {}
+    blueNoiseImages: {},
+    solarEclipseImage: null
   };
   const starrySkyComponent = skyDirector.parentComponent;
 
@@ -65,7 +66,8 @@ StarrySky.AssetManager = function(skyDirector){
     const moonEncodings = [THREE.sRGBEncoding, THREE.LinearEncoding, THREE.LinearEncoding, THREE.LinearEncoding, THREE.LinearEncoding];
     const numberOfMoonTextures = moonTextures.length;
     const numberOfBlueNoiseTextures = 5;
-    this.totalNumberOfTextures = numberOfMoonTextures + numberOfStarTextures + numberOfBlueNoiseTextures;
+    const oneSolarEclipseImage = 1;
+    this.totalNumberOfTextures = numberOfMoonTextures + numberOfStarTextures + numberOfBlueNoiseTextures + oneSolarEclipseImage;
 
     //Recursive based functional for loop, with asynchronous execution because
     //Each iteration is not dependent upon the last, but it's just a set of similiar code
@@ -376,6 +378,35 @@ StarrySky.AssetManager = function(skyDirector){
       });
     })(0);
 
+    let solarEclipseTexturePromise = new Promise(function(resolve, reject){
+      textureLoader.load(StarrySky.assetPaths.solarEclipseMap, function(texture){resolve(texture);});
+    });
+    solarEclipseTexturePromise.then(function(texture){
+      //Fill in the details of our texture
+      texture.wrapS = THREE.ClampToEdgeWrapping;
+      texture.wrapT = THREE.ClampToEdgeWrapping;
+      texture.magFilter = THREE.LinearFilter;
+      texture.minFilter = THREE.LinearMipmapLinear;
+      texture.encoding = THREE.LinearEncoding;
+      texture.format = THREE.LuminanceFormat;
+      texture.generateMipmaps = true;
+      self.images.solarEclipseImage = texture;
+
+      //If the renderer already exists, go in and update the uniform
+      //I presume if the moon renderer is loaded the atmosphere renderer is loaded as well
+      if(self.skyDirector?.renderers?.SunRenderer !== undefined){
+        const atmosphereTextureRef = self.skyDirector.renderers.atmosphereRenderer.atmosphereMaterial.uniforms.solarEclipseMap;
+        atmosphereTextureRef.value = texture;
+      }
+
+      self.numberOfTexturesLoaded += 1;
+      if(self.numberOfTexturesLoaded === self.totalNumberOfTextures){
+        self.hasLoadedImages = true;
+      }
+    }, function(err){
+      console.error(err);
+    });
+
     //Load any additional textures
   }
 

src/js/html_tags/SkyAssetsDir.js

@@ -12,6 +12,7 @@ window.customElements.define('sky-med-star-maps', class extends HTMLElement{});
 window.customElements.define('sky-bright-star-maps', class extends HTMLElement{});
 window.customElements.define('sky-star-color-map', class extends HTMLElement{});
 window.customElements.define('sky-blue-noise-maps', class extends HTMLElement{});
+window.customElements.define('sky-solar-eclipse-map', class extends HTMLElement{});
 
 StarrySky.DefaultData.fileNames = {
   moonDiffuseMap: 'lunar-diffuse-map.webp',
@@ -52,7 +53,8 @@ StarrySky.DefaultData.fileNames = {
     'blue-noise-2.bmp',
     'blue-noise-3.bmp',
     'blue-noise-4.bmp'
-  ]
+  ],
+  solarEclipseMap: 'solar-eclipse-map.webp'
 };
 
 StarrySky.DefaultData.assetPaths = {
@@ -63,6 +65,7 @@ StarrySky.DefaultData.assetPaths = {
   moonRoughnessMap: './assets/moon/webp_files/' + StarrySky.DefaultData.fileNames.moonRoughnessMap,
   moonAperatureSizeMap: './assets/moon/webp_files/' + StarrySky.DefaultData.fileNames.moonAperatureSizeMap,
   moonAperatureOrientationMap: './assets/moon/webp_files/' + StarrySky.DefaultData.fileNames.moonAperatureOrientationMap,
+  solarEclipseMap: './assets/solar_eclipse/' + StarrySky.DefaultData.fileNames.solarEclipseMap,
   starHashCubemap: StarrySky.DefaultData.fileNames.starHashCubemap.map(x => './assets/star_data/' + x),
   dimStarDataMaps: StarrySky.DefaultData.fileNames.dimStarDataMaps.map(x => './assets/star_data/' + x),
   medStarDataMaps: StarrySky.DefaultData.fileNames.medStarDataMaps.map(x => './assets/star_data/' + x),
@@ -136,6 +139,7 @@ class SkyAssetsDir extends HTMLElement {
       const moonNormalMapTags = childNodes.filter(x => x.nodeName.toLowerCase() === 'sky-moon-normal-map');
       const moonRoughnessMapTags = childNodes.filter(x => x.nodeName.toLowerCase() === 'sky-moon-roughness-map');
       const moonAperatureSizeMapTags = childNodes.filter(x => x.nodeName.toLowerCase() === 'sky-moon-aperature-size-map');
+      const solarEclipseMapTags = childNodes.filter(x => x.nodeName.toLowerCase() === 'sky-solar-eclipse-map');
       const moonAperatureOrientationMapTags = childNodes.filter(x => x.nodeName.toLowerCase() === 'sky-moon-aperature-orientation-map');
       const starCubemapTags = childNodes.filter(x => x.nodeName.toLowerCase() === 'sky-star-cubemap-map');
       const dimStarMapTags = childNodes.filter(x => x.nodeName.toLowerCase() === 'sky-dim-star-map');
@@ -146,10 +150,10 @@ class SkyAssetsDir extends HTMLElement {
 
       const objectProperties = ['skyStateEngine', 'skyInterpolationEngine','moonDiffuseMap', 'moonNormalMap',
         'moonRoughnessMap', 'moonAperatureSizeMap', 'moonAperatureOrientationMap', 'starHashCubemap',
-        'dimStarMaps', 'medStarMaps', 'brightStarMaps', 'starColorMap', 'blueNoiseMaps']
+        'dimStarMaps', 'medStarMaps', 'brightStarMaps', 'starColorMap', 'blueNoiseMaps', 'solarEclipseMap']
       const tagsList = [skyStateEngineTags, skyInterpolationEngineTags, moonDiffuseMapTags, moonNormalMapTags,
         moonRoughnessMapTags, moonAperatureSizeMapTags, moonAperatureOrientationMapTags, starCubemapTags,
-        medStarMapTags, dimStarMapTags, brightStarMapTags, starColorMapTags, blueNoiseMapTags];
+        medStarMapTags, dimStarMapTags, brightStarMapTags, starColorMapTags, blueNoiseMapTags, solarEclipseMapTags];
       const numberOfTagTypes = tagsList.length;
       if(self.hasAttribute('wasm-path') && self.getAttribute('wasm-path').toLowerCase() !== 'false'){
         const wasmKeys = ['skyStateEngine', 'skyInterpolationEngine'];
@@ -162,7 +166,7 @@ class SkyAssetsDir extends HTMLElement {
       }
       else if(self.hasAttribute('texture-path') && self.getAttribute('texture-path').toLowerCase() !== 'false'){
         const singleTextureKeys = ['moonDiffuseMap', 'moonNormalMap', 'moonRoughnessMap',
-        'moonAperatureSizeMap', 'moonAperatureOrientationMap', 'starColorMap'];
+        'moonAperatureSizeMap', 'moonAperatureOrientationMap', 'starColorMap', 'solarEclipseMap'];
         const multiTextureKeys = ['starHashCubemap','dimStarDataMaps', 'medStarDataMaps', 'brightStarDataMaps',
         'blueNoiseMaps'];
 

src/js/materials/atmosphere/atmosphere-pass-template.txt

@@ -28,6 +28,7 @@ StarrySky.Materials.Atmosphere.atmosphereShader = {
       uniforms.radiusOfSunPlane = {type: 'f', value: 1.0};
       uniforms.moonRadius = {type: 'f', value: 1.0};
       uniforms.worldMatrix = {type: 'mat4', value: new THREE.Matrix4()};
+      uniforms.solarEclipseMap = {type: 't', value: null};
       uniforms.moonDiffuseMap = {type: 't', value: null};
     }
     else if(isMoonShader){

src/js/materials/atmosphere/atmosphere-pass.js

@@ -28,6 +28,7 @@ StarrySky.Materials.Atmosphere.atmosphereShader = {
       uniforms.radiusOfSunPlane = {type: 'f', value: 1.0};
       uniforms.moonRadius = {type: 'f', value: 1.0};
       uniforms.worldMatrix = {type: 'mat4', value: new THREE.Matrix4()};
+      uniforms.solarEclipseMap = {type: 't', value: null};
       uniforms.moonDiffuseMap = {type: 't', value: null};
     }
     else if(isMoonShader){
@@ -180,6 +181,7 @@ StarrySky.Materials.Atmosphere.atmosphereShader = {
       'uniform float sunAngularDiameterCos;',
       'uniform float moonRadius;',
       'uniform sampler2D moonDiffuseMap;',
+      'uniform sampler2D solarEclipseMap;',
       'varying vec2 vUv;',
       'const float sunDiskIntensity = 30.0;',
 

src/js/materials/sun/base-sun-partial.js

@@ -29,7 +29,7 @@ StarrySky.Materials.Sun.baseSunPartial = {
     'float distanceBetweenPixelAndMoon = dot(vectorBetweenMoonAndPixel, vectorBetweenMoonAndPixel);',
     'vec3 sunTexel = vec3(0.0);',
     'if(distanceBetweenPixelAndMoon > (moonRadius * moonRadius)){',
-      'sunTexel = sundisk * sunDiskIntensity * limbDarkening * transmittanceFade;',
+      'sunTexel = (sundisk * sunDiskIntensity * limbDarkening + 2.0 * texture2D(solarEclipseMap, vUv).r)* transmittanceFade;',
     '}',
     ];
 

src/js/materials/sun/combination-pass.js

@@ -78,7 +78,7 @@ StarrySky.Materials.Sun.combinationPass = {
       'combinedLight += ((texture2D(blueNoiseTexture, screenPosition.xy * 11.0).rgb - vec3(0.5)) / vec3(128.0));',
 
       '//Return our tone mapped color when everything else is done',
-      'gl_FragColor = vec4(combinedLight, falloffDisk);',
+      'gl_FragColor = vec4(combinedLight, 1.0);',
     '}',
   ].join('\n')
 };

src/js/renderers/SunRenderer.js

@@ -163,12 +163,9 @@ StarrySky.Renderers.SunRenderer = function(skyDirector){
 
     //Connect up our images if they don't exist yet
     if(self.skyDirector.assetManager.hasLoadedImages){
-      //While we only use the alpha channel, we require the lunar map for solar ecclipses
-      self.baseSunVar.material.uniforms.moonDiffuseMap.value = self.skyDirector.assetManager.images.moonImages.moonDiffuseMap;
-      self.baseSunVar.material.uniforms.moonDiffuseMap.needsUpdate = true;
-
       //Image of the solar corona for our solar ecclipse
-
+      self.baseSunVar.material.uniforms.solarEclipseMap.value = self.skyDirector.assetManager.images.solarEclipseImage;
+      self.baseSunVar.material.uniforms.solarEclipseMap.needsUpdate = true;
     }
 
     //Proceed with the first tick