Day/Night shader demo

Small demo of day night shader

HTML

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>

    <title>Lazy Day Cafe</title>
    <link rel='stylesheet' type='text/css' href='style.css'>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.2.2/browser/pixi.js"></script>
    <script id='foregroundDayNightShader' type='x-shader/x-fragment' >
      varying vec2 vTextureCoord;
      uniform sampler2D uSampler;

      uniform sampler2D lights;

      uniform vec3 color;
      uniform float con_sat_brt[5];
      uniform float lightStrength;

      #define contrast      con_sat_brt[0]
      #define saturation    con_sat_brt[1]
      #define brightness    con_sat_brt[2]
      #define pop_strength  con_sat_brt[3]
      #define pop_threshold con_sat_brt[4]

      void main() {
        vec4 tex = texture2D(uSampler, vTextureCoord);
        vec3 out_col = tex.rgb;

        float grey = dot(out_col, vec3(0.299, 0.587, 0.114));
        // overlay
        out_col = grey > 0.5 ? 1.0 - (1.0 - 2.0 * (out_col - 0.5)) * (1.0 - color)  : 2.0 * out_col * color;
        // add saturation
        out_col = mix(vec3(grey), out_col, saturation);
        // add contrast
        out_col = (out_col - 0.5) * contrast + 0.5;
        // pop lights
        out_col = out_col + pop_strength * max(grey - pop_threshold, 0.0);
        // add brightness
        out_col = out_col + brightness;

        // lights for night time, breh
        vec3 lights_col = texture2D(lights, vTextureCoord).rgb;
        grey = lightStrength * dot(lights_col, vec3(0.333));
        out_col = mix(out_col, tex.rgb * normalize(lights_col + 0.05) * 3.0, grey);

        gl_FragColor = vec4(out_col, tex.a);
      }
    </script>
  </head>

  <body>
    <div id="body">
    </div>
  </body>
</html>

CSS

body, html {
  overflow: hidden;
  margin:0;
}

#body {
  background-color: black;
  background-size:cover;
  -webkit-background-size:cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  position:fixed;
}

.display {
  display: block;
  float: left;
  position: fixed;
  bottom: 15px;
  color: #DDD;
  z-index: 3;
}

.info {
  margin: 5px 20px 5px 20px;
  padding: 5px 20px 5px 20px;
  font-size: 30px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  background:rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  opacity: 0;
  z-index: 3;
}

.time-of-day-slider-container {
  width: 100%;
  position: absolute;
  z-index: 5;
  opacity: 0.2;
}

.time-of-day-slider-container:hover {
  opacity: 1;
}

.time-of-day-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 25px;
  background: var(--dark-grey-color);
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.time-of-day-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: var(--nice-blue);
  cursor: pointer;
}

.time-of-day-slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: var(--nice-blue);
  cursor: pointer;
}

#time-of-day-tooltip {
  position: absolute;
  top: 2.1rem;
  background-color: white;
  color: var(--background-color);
  border-radius: 0.4rem;
  padding: 0.5rem 0.9rem;
  font-size: 1.4rem;
  transition: 0s;
  opacity: 0;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.time-of-day-slider-container:hover #time-of-day-tooltip {
  opacity: 1;
}

#time {
  color: #DDD;
  margin: 5px 20px 5px 20px;
  padding: 5px 20px 5px 20px;
  font-size: 30px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  background:rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  z-index: 3;
}

.loading-screen.hide-opacity{
  opacity: 0;
}

.loading-screen {
  pointer-events: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 10;
  background-image:...

JavaScript

PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
PIXI.settings.SORTABLE_CHILDREN = true;
const app = new PIXI.Application({
    width: window.innerWidth, height: window.innerHeight,
    backgroundColor: 0x1099bb, resolution: window.devicePixelRatio || 1,
    sharedTicker: true
});
document.getElementById("body").appendChild(app.view);

const landscape = PIXI.Sprite.from("https://i.imgur.com/dZHHphQ.png");

landscape.position.set(0,0);
landscape.height = Math.floor(app.screen.height/window.devicePixelRatio);
landscape.width = Math.floor(app.screen.width/window.devicePixelRatio);

const lights = PIXI.Sprite.from("https://i.imgur.com/mFglxfF.png");
lights.position.set(0,0);
lights.height = Math.floor(app.screen.height/window.devicePixelRatio);
lights.width = Math.floor(app.screen.width/window.devicePixelRatio);
lights.visible=false;

const uniforms = {
	color: [80/255, 80/255, 185/255],
  con_sat_brt: [0.8, 0.6, -0.15, 0.2, 0.80]
}
const foregroundDayNightShaderRaw = document.getElementById("foregroundDayNightShader").innerHTML;
const foregroundDayNightShader = new PIXI.Filter(null, foregroundDayNightShaderRaw, uniforms);
landscape.filters = [foregroundDayNightShader];


app.stage.addChild(landscape);
app.stage.addChild(lights);


foregroundDayNightShader.uniforms.lightStrength= 1.0;
foregroundDayNightShader.uniforms.lights= lights._texture;