Swapped our current bloom render path for an effect composer shader p…

…ath.

UPDATE.MD

@@ -1,6 +1,7 @@
 **Version 1.1.0**
 * Swapped out emulated 3D textures for Web GL 2 3D textures.
 * Fixed bug with lunar intensity and eliminated crusty moon edges by adding in mipmapping and increased anisotropic sampling.
+* Swapped out the native bloom effect for Three.js's bloom postprocessing pipeline.
 
 **Version 1.0.1**
 * Fixed issues associated with build 137 of THREE which is found in A-Frame Version 1.3.0.

examples/desert.html

@@ -24,8 +24,17 @@
     <!-- The below are used for development purposes, it is advised that you use the files in the dist folder -->
     <!-- Three.js extensions -->
     <script src="../src/js/three_js_extensions/BufferGeometryUtils.js"></script>
+    <script src="../src/js/three_js_extensions/CopyShader.js"></script>
+    <script src="../src/js/three_js_extensions/Pass.js"></script>
+    <script src="../src/js/three_js_extensions/RenderPass.js"></script>
+    <script src="../src/js/three_js_extensions/ShaderPass.js"></script>
+    <script src="../src/js/three_js_extensions/EffectComposer.js"></script>
     <script src="../src/js/three_js_extensions/StarrySkyGPUComputeRenderer.js"></script>
 
+    <!-- Post Processing -->
+    <script src="../src/js/three_js_extensions/LuminosityHighPassShader.js"></script>
+    <script src="../src/js/three_js_extensions/UnrealBloom.js"></script>
+
     <!-- Namespace -->
     <script src="../src/js/StarrySky.js"></script>
 
@@ -36,15 +45,11 @@
     <script src="../src/js/materials/atmosphere/inscattering-sum.js"></script>
     <script src="../src/js/materials/atmosphere/kth-inscattering.js"></script>
     <script src="../src/js/materials/atmosphere/atmosphere-pass.js"></script>
-    <script src="../src/js/materials/postprocessing/high-pass-filter.js"></script>
-    <script src="../src/js/materials/postprocessing/seperable-blur-filter.js"></script>
-    <script src="../src/js/materials/sun/combination-pass.js"></script>
+    <script src="../src/js/materials/postprocessing/moon-and-sun-output.js"></script>
     <script src="../src/js/materials/sun/base-sun-partial.js"></script>
-    <script src="../src/js/materials/moon/combination-pass.js"></script>
     <script src="../src/js/materials/moon/base-moon-partial.js"></script>
     <script src="../src/js/materials/stars/star-data-map.js"></script>
     <script src="../src/js/materials/autoexposure/metering-survey.js"></script>
-    <script src="../src/js/materials/autoexposure/test-pass.js"></script>
 
     <!--- Custom HTML Tags -->
     <script src="../src/js/html_tags/SkyAssetsDir.js"></script>
@@ -59,7 +64,6 @@
 
     <!-- Renderers -->
     <script src="../src/js/renderers/AtmosphereRenderer.js"></script>
-    <script src="../src/js/renderers/BloomRenderer.js"></script>
     <script src="../src/js/renderers/SunRenderer.js"></script>
     <script src="../src/js/renderers/MoonRenderer.js"></script>
     <script src="../src/js/renderers/MeteringSurveyRenderer.js"></script>
@@ -80,12 +84,12 @@
       <!-- Sky Setup -->
       <a-starry-sky web-worker-src="../dist/wasm/starry-sky-web-worker.js">
           <sky-time>
-            <sky-date>1226-12-26 15:00:00</sky-date>
+            <sky-date>1226-12-05 20:00:00</sky-date>
             <sky-speed>200.0</sky-speed>
           </sky-time>
           <sky-atmospheric-parameters>
-            <sky-sun-angular-diameter>5.0</sky-sun-angular-diameter>
-            <sky-moon-angular-diameter>5.0</sky-moon-angular-diameter>
+            <sky-sun-angular-diameter>3.1</sky-sun-angular-diameter>
+            <sky-moon-angular-diameter>3.1</sky-moon-angular-diameter>
           </sky-atmospheric-parameters>
       </a-starry-sky>
 

src/glsl/atmosphere/atmosphere-pass.glsl

@@ -283,15 +283,13 @@ void main(){
   //In the event that we have a moon shader, we need to block out all astronomical light blocked by the moon
   #if($isMoonPass)
     //Get our lunar occlusion texel
-    vec2 offsetUV = vUv * 2.0 - vec2(0.5);
+    vec2 offsetUV = clamp(vUv * 4.0 - vec2(1.5), vec2(0.0), vec2(1.0));
     vec4 lunarDiffuseTexel = texture(moonDiffuseMap, offsetUV);
-    vec2 uvClamp1 = 1.0 - vec2(step(offsetUV.x, 0.0), step(offsetUV.y, 0.0));
-    vec2 uvClamp2 = 1.0 - vec2(step(1.0 - offsetUV.x, 0.0), step(1.0 - offsetUV.y, 0.0));
     vec3 lunarDiffuseColor = lunarDiffuseTexel.rgb;
-    float lunarMask = lunarDiffuseTexel.a * uvClamp1.x * uvClamp1.y * uvClamp2.x * uvClamp2.y;
   #elif($isSunPass)
     //Get our lunar occlusion texel in the frame of the sun
-    float lunarMask = texture(moonDiffuseMap, vUv).a;
+    vec2 offsetUV = clamp(vUv * 4.0 - vec2(1.5), vec2(0.0), vec2(1.0));
+    float lunarMask = texture(moonDiffuseMap, offsetUV).a;
   #endif
 
   //Atmosphere (We multiply the scattering sun intensity by vec3 to convert it to a vector)
@@ -366,15 +364,15 @@ void main(){
 
     $draw_sun_pass
 
-    combinedPass = pow(MyAESFilmicToneMapping(combinedPass + pow(sunTexel, gamma)), inverseGamma);
+    combinedPass = pow(MyAESFilmicToneMapping(combinedPass + sunTexel), inverseGamma);
   #elif($isMoonPass)
     vec3 combinedPass = lunarAtmosphericPass + solarAtmosphericPass + baseSkyLighting;
     vec3 earthsShadow = getLunarEcclipseShadow(sphericalPosition);
 
     $draw_moon_pass
 
     //Now mix in the moon light
-    combinedPass = mix(combinedPass + galacticLighting, combinedPass + moonTexel, lunarMask);
+    combinedPass = mix(combinedPass + galacticLighting, combinedPass + moonTexel, lunarDiffuseTexel.a);
 
     //And bring it back to the normal gamma afterwards
     combinedPass = pow(MyAESFilmicToneMapping(combinedPass), inverseGamma);
@@ -399,7 +397,7 @@ void main(){
     combinedPass = pow(MyAESFilmicToneMapping(combinedPass), inverseGamma);
 
     //Now apply the blue noise
-    combinedPass += (texelFetch(blueNoiseTexture, ivec2(gl_FragCoord.xy) % 128, 0).rgb - vec3(0.5)) / vec3(256.0);
+    combinedPass += (texelFetch(blueNoiseTexture, (ivec2(gl_FragCoord.xy) + ivec2(128.0 * noise(uTime),  128.0 * noise(uTime + 511.0))) % 128, 0).rgb - vec3(0.5)) / vec3(128.0);
   #endif
 
   #if($isMeteringPass)

src/glsl/moon/base-moon-vertex.glsl

@@ -22,9 +22,10 @@ const float threePiOverTwo = 4.712388980384689857693;
 const float pi = 3.141592653589793238462;
 
 void main() {
-  vec4 worldPosition = worldMatrix * vec4(position * radiusOfMoonPlane, 1.0);
+  vec4 worldPosition = worldMatrix * vec4(position * radiusOfMoonPlane * 2.0, 1.0);
   vec3 normalizedWorldPosition = normalize(worldPosition.xyz);
-  vWorldPosition = normalize(vec3(-worldPosition.z, worldPosition.y, -worldPosition.x));
+  vWorldPosition = vec3(-normalizedWorldPosition.z, normalizedWorldPosition.y, -normalizedWorldPosition.x);
+
   vUv = uv;
 
   //Other then our bitangent, all of our other values are already normalized

src/glsl/sun/combination-pass-vertex.glsl → src/glsl/postprocessing/moon-and-sun-output-vertex.glsl

@@ -1,6 +1,5 @@
 varying vec3 vWorldPosition;
 varying vec2 vUv;
-varying vec2 screenPosition;
 
 void main() {
   vec4 worldPosition = modelMatrix * vec4(position, 1.0);
@@ -9,7 +8,6 @@ void main() {
 
   vec4 projectionPosition = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
   vec3 normalizedPosition = projectionPosition.xyz / projectionPosition.w;
-  screenPosition = vec2(0.5) + 0.5 * normalizedPosition.xy;
   gl_Position = projectionPosition;
 
   //We offset our sun z-position by 0.01 to avoid Z-Fighting with the back sky plane

src/glsl/postprocessing/moon-and-sun-output.glsl

@@ -0,0 +1,41 @@
+uniform sampler2D blueNoiseTexture;
+uniform sampler2D outputImage;
+uniform float uTime;
+
+varying vec3 vWorldPosition;
+varying vec2 vUv;
+const vec3 inverseGamma = vec3(0.454545454545454545454545);
+const float sqrtOfOneHalf = 0.7071067811865475244008443;
+
+//From http://byteblacksmith.com/improvements-to-the-canonical-one-liner-glsl-rand-for-opengl-es-2-0/
+float rand(float x){
+  float a = 12.9898;
+  float b = 78.233;
+  float c = 43758.5453;
+  float dt= dot(vec2(x, x) ,vec2(a,b));
+  float sn= mod(dt,3.14);
+  return fract(sin(sn) * c);
+}
+
+//From The Book of Shaders :D
+//https://thebookofshaders.com/11/
+float noise(float x){
+  float i = floor(x);
+  float f = fract(x);
+  float y = mix(rand(i), rand(i + 1.0), smoothstep(0.0,1.0,f));
+
+  return y;
+}
+
+//Including this because someone removed this in a future version of THREE. Why?!
+vec3 MyAESFilmicToneMapping(vec3 color) {
+  return clamp((color * (2.51 * color + 0.03)) / (color * (2.43 * color + 0.59) + 0.14), 0.0, 1.0);
+}
+
+void main(){
+  float distanceFromCenter = distance(vUv, vec2(0.5));
+  float falloffDisk = clamp(smoothstep(0.0, 1.0, (sqrtOfOneHalf - min(distanceFromCenter * 2.7 - 0.8, 1.0))), 0.0, 1.0);
+  vec3 combinedPass = texture(outputImage, vUv).rgb;
+  combinedPass += (texelFetch(blueNoiseTexture, (ivec2(gl_FragCoord.xy) + ivec2(128.0 * noise(uTime),  128.0 * noise(uTime + 511.0))) % 128, 0).rgb - vec3(0.5)) / vec3(128.0);
+  gl_FragColor = vec4(combinedPass, falloffDisk);
+}

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

@@ -5,7 +5,6 @@
 //solar bloom enough room to expand into without clipping the edge.
 //We also fade out our quad towards the edge to reduce the visibility of sharp
 //edges.
-vec2 offsetUV = vUv * 2.0 - vec2(0.5);
 float pixelDistanceFromSun = distance(offsetUV, vec2(0.5));
 
 //From https://github.com/supermedium/superframe/blob/master/components/sun-sky/shaders/fragment.glsl
@@ -21,5 +20,5 @@ float limbDarkening = (ac1 + ac2 * mu + 2.0 * ac3 * mu * mu);
 vec3 normalizedWorldPosition = normalize(vWorldPosition);
 vec3 vectorBetweenMoonAndPixel = normalizedWorldPosition - moonPosition;
 float distanceBetweenPixelAndMoon = length(vectorBetweenMoonAndPixel);
-vec3 sunTexel = (sundisk * sunDiskIntensity * limbDarkening + 2.0 * texture2D(solarEclipseMap, vUv).r)* transmittanceFade;
+vec3 sunTexel = (sundisk * sunDiskIntensity * limbDarkening + 2.0 * texture2D(solarEclipseMap, vUv * 1.9 - vec2(0.45)).r)* transmittanceFade;
 sunTexel *= smoothstep(0.97 * moonRadius, moonRadius, distanceBetweenPixelAndMoon);

src/glsl/sun/base-sun-vertex.glsl

@@ -4,7 +4,7 @@ varying vec3 vWorldPosition;
 varying vec2 vUv;
 
 void main() {
-  vec4 worldPosition = worldMatrix * vec4(position * radiusOfSunPlane, 1.0);
+  vec4 worldPosition = worldMatrix * vec4(position * radiusOfSunPlane * 2.0, 1.0);
   vWorldPosition = vec3(-worldPosition.z, worldPosition.y, -worldPosition.x);
 
   vUv = uv;

src/js/components/SkyDirector.js

@@ -168,7 +168,6 @@ StarrySky.SkyDirector = function(parentComponent, webWorkerURI){
       //Prepare all of our renderers to display stuff
       self.speed = self.assetManager.data.skyTimeData.speed;
       self.renderers.atmosphereRenderer = new StarrySky.Renderers.AtmosphereRenderer(self);
-      self.renderers.bloomRenderer = new StarrySky.Renderers.BloomRenderer(self, 'shared', 0.98);
       self.renderers.sunRenderer = new StarrySky.Renderers.SunRenderer(self);
       self.renderers.moonRenderer = new StarrySky.Renderers.MoonRenderer(self);
       self.renderers.meteringSurveyRenderer = new StarrySky.Renderers.MeteringSurveyRenderer(self);

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

@@ -16,7 +16,7 @@ StarrySky.Materials.Atmosphere.atmosphereShader = {
       scatteringMoonIntensity: {value: 1.4}
     }
 
-    if(!isSunShader && !isMoonShader && !isMeteringShader){
+    if(!isSunShader && !isMeteringShader){
       uniforms.blueNoiseTexture = {type: 't', value: null};
     }