Spaces:

jbilcke-hf
/

compliance

Running

File size: 29,118 Bytes

2b96520
432cf7e
2b96520

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>Compliance</title>

  <link rel="preload" href="fonts/MrEavesXLModOT-Book.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="fonts/MrEavesXLModNarOT-Thin.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="fonts/MrEavesXLModOT-Bold.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="fonts/MrEavesXLModNarOT-Bold.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="fonts/MrEavesXLModNarOT-Reg.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="fonts/MrEavesXLModOT-Thin.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="fonts/MrEavesXLModOT-Light.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="fonts/MrEavesXLModNarOT-Book.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="fonts/MrEavesXLModNarOT-Light.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="fonts/MrEavesXLModOT-Reg.woff2" as="font" type="font/woff2" crossorigin>

  <script src="libs/dat.gui.min.js"></script>
  <script src="libs/ammo.js"></script>
  <script src="libs/cannon.js"></script>
  <script src="libs/Oimo.js"></script>
  <script src="libs/earcut.min.js"></script>
  <script src="libs/babylon.js"></script>
  <script src="libs/babylonjs.materials.min.js"></script>
  <script src="libs/babylonjs.proceduralTextures.min.js"></script>
  <script src="libs/babylonjs.postProcess.min.js"></script>
  <script src="libs/babylonjs.loaders.js"></script>
  <script src="libs/babylonjs.serializers.min.js"></script>
  <script src="libs/babylon.gui.min.js"></script>
  <script src="libs/babylon.inspector.bundle.js"></script>
  <link href="fonts/stylesheet.css" rel="stylesheet">
  <style>
    /*
      all this CSS is just quick & dirty, support of multiple resolutions is not a focus right now
      also it is pretty difficult to do, since we use a virtual resolution to replicate a CRT,
      so some resolutions will display a moiré effect and similar weird other patterns
      */
    html,
    body {
      overflow: hidden;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background-color: rgb(0, 11, 31);
      background-image: url(./background.jpg);
      background-position-y: -200px;
      background-position-x: -392px;
      background-size: 2980px;

      font-family: 'MrEavesXLModNarOT-Reg';
      font-weight: normal;
      font-style: normal;
    }

    .wrapper {
      position: fixed;
      top: 0px;
      left: 135px;

      overflow: hidden;
      /* width: 100%;
      height: 100%;
      */
      margin: 0;
      padding: 0;
      outline: none;
    }

    #renderCanvas {
      /*  screen ratio is 4:3 (1.33) 
      width: 426px;
      height: 320px;

      width: 1024px;
      height: 820px;
      */
      width: 1280px;
      height: 1024px;

      touch-action: none;
      outline: none;
      border-radius: 120px;

      /* transform: scale(0.8); */
    }

    /*
    @media only screen and (max-width: 600px) {
      #renderCanvas {
        width: 511px;
        height: 384px;
      }
    }

    @media only screen and (min-width: 600px) {
      #renderCanvas {
        width: 640px;
        height: 480px;
      }
    }

    @media only screen and (min-width: 800px) {
      #renderCanvas {
        width: 800px;
        height: 640px;
      }
    }

    @media only screen and (min-width: 1024px) {
      #renderCanvas {
        width: 1024px;
        height: 820px;
      }
    }
    */
  </style>
</head>

<body>
  <div class="wrapper"><canvas id="renderCanvas"></canvas></div>
  <script>
    const config = {
      // CRET screen resolution needs to be half of the actual resolution
      crt: {
        screenResolution: {
          width: 800, // 486, 512, 640
          height: 800, // 320, 480, 512, 640
        }
      },
      window: {
        width: 1280,
        height: 1024
      }
    };
    function toggleFullScreen() {
      if (!document.fullscreenElement) {
          document.documentElement.requestFullscreen();
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
      }
    }

    document.addEventListener("keydown", function(e) {
      if (e.keyCode == 13) {
        toggleFullScreen();
      }
    }, false);

    const randomMutation = (value, probability = 1) => {
      const r = Math.random();
      return (r < probability || typeof value !== 'number') ? r : value;
    }

    const newRandomDigit = (digit) => {
      digit.randomWobbleAmplitudeX = Math.random();
      digit.randomWobbleAmplitudeY = Math.random();
      digit.randomTimeShiftX = Math.random();
      digit.randomTimeShiftY = Math.random();
      digit.randomWobbleSpeedX = Math.random();
      digit.randomWobbleSpeedY = Math.random();
    }

    const randomDigitMutation = (digit, probability) => {
      digit.randomWobbleSpeedX = randomMutation(digit.randomWobbleSpeedX, probability);
      digit.randomWobbleSpeedY = randomMutation(digit.randomWobbleSpeedY, probability);
    }

    var canvas = document.getElementById("renderCanvas");

    var startRenderLoop = function (engine, canvas) {
      engine.runRenderLoop(function () {
        if (sceneToRender && sceneToRender.activeCamera) {
          sceneToRender.render();
        }
      });
    };

    // get an "ajusted" size in pixel
    // eg. if we want 9 "virtual pixels" we will need to have a larger size
    const getFontSize = (size) => {
      return Math.round(size * (window.innerHeight / config.crt.screenResolution.height));
    }

    // get an "ajusted" size in pixel
    // eg. if we want 9 "virtual pixels" we will need to have a larger size
    const getSize = (x, y) => {
      var wRatio = window.innerWidth / config.crt.screenResolution.width;
      var hRatio = window.innerHeight / config.crt.screenResolution.height;
      return {
        x: Math.round(x * wRatio),
        y: Math.round(y * hRatio),
      };
    }


    var engine = null;
    var scene = null;
    var sceneToRender = null;
    var createDefaultEngine = function () {
      return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true, disableWebGL2Support: false });
    };
    var createScene = function () {

      // engine.setHardwareScalingLevel(1);

      var scene = new BABYLON.Scene(engine);
      var gl = new BABYLON.GlowLayer("glow", scene);
      gl.intensity = 0.5;

      const backgroundBlue = new BABYLON.Color3(0, 0.04, 0.07);
      const darkBlue = new BABYLON.Color3(0, 0.16, 0.28);
      const deepBlue = new BABYLON.Color3(0, 0.156, 0.313);
      const lightBlue = new BABYLON.Color3(0.062, 0.564, 0.690);
      const brightBlue = new BABYLON.Color3(0.360, 0.768, 0.823);


      scene.clearColor = backgroundBlue;

      // This creates and positions a free camera (non-mesh)
      var camera = new BABYLON.UniversalCamera("UniversalCamera", new BABYLON.Vector3(0, 0, -10), scene);
      camera.lowerRadiusLimit = camera.radius;
      camera.upperRadiusLimit = camera.radius;

      // This targets the camera to scene origin
      camera.setTarget(BABYLON.Vector3.Zero());

      // This attaches the camera to the canvas
      camera.attachControl(canvas, true);

      // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
      var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

      // Default intensity is 1. Let's dim the light a small amount
      light.intensity = 1;


      // Our built-in 'ground' shape.
      //  var ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 6, height: 6 }, scene);
      // Ground
      const width = 100;
      const height = 100;
      const subdivisions = 100;
      var ground = BABYLON.MeshBuilder.CreateGround("ground", { width, height, subdivisions }, scene, false);
      var groundMaterial = new BABYLON.GridMaterial("ground", scene);
      ground.material = groundMaterial;
      ground.updateFacetData();


      // GUI
      const advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");


      /*
      var button = BABYLON.GUI.Button.CreateImageButton("but", "Click Me");
      button.width = 0.2;
      button.height = "80px";
      button.color = "white";
      button.background = "green";
      advancedTexture.addControl(button);    
      */

      const matrix = [];
      const matrixSize = 28;

      let matrixTop = -500;
      let matrixLeft = -500;
      const matrixSpacing = 24;

      let isDragging = false;
      let isSelecting = false;

      let lastMouseX = 0;
      let lastMouseY = 0;

      // speed of the wobble effect
      const minWobbleAmplitude = 0;
      const maxWobbleAmplitude = 10;

      const lowFreqWobbleTimeMin = 0.001;
      const lowFreqWobbleTimeMax = 0.005;

      // speed of the wobble effect
      const minWobbleSpeed = 0.0005;
      const maxWobbleSpeed = 0.0010;

      // we want to "desync" wobble effect by giving them different time periods (not just different speeds)
      const minTimeShift = 5000; // may individual shift for animation
      const maxTimeShift = 7000; // may individual shift for animation



      let scale = 2; // between 0 and 200

      for (let i = 0; i < matrixSize; i++) {
        const row = [];
        for (let j = 0; j < matrixSize; j++) {
          var digit = new BABYLON.GUI.TextBlock();
          row.push(digit);
          digit.value = Math.round(Math.random() * 9);

          digit.color = "rgb(50, 253, 254)";
          digit.height = `${Math.round(scale * 128)}px`;

          // Style
          const style = advancedTexture.createStyle();
          style.fontSize = getFontSize(12);
          style.fontFamily = 'MrEavesXLModOT-Book';
          // style.fontStyle = "bold";
          digit.style = style;

          digit.top = `${Math.round(scale * (matrixTop + i * matrixSpacing))}px`;
          digit.left = `${Math.round(scale * (matrixLeft + j * matrixSpacing))}px`;

          digit.text = `${digit.value}`;
          // digit.text = `(${digit.left}, ${digit.top})`;
          digit.selected = false;

          // force random mutation upon all digit variable fields
          newRandomDigit(digit);

          advancedTexture.addControl(digit);
        }
        matrix.push(row);
      }

      const bgColor = "rgb(0, 10, 17)";
      const fgColor = "rgb(50, 253, 254)";
      const dbgColor = "rgb(200, 80, 20)";

      const engineWidth = engine.getRenderWidth();
      const engineHeight = engine.getRenderHeight();

      const header = new BABYLON.GUI.Rectangle();
      // header.left = 0;
      // header.top = 0;
      header.width = "100%";
      header.height = `${Math.round(engineHeight * 0.20)}px`;
      header.thickness = 0;
      header.background = bgColor; // "rgb(0, 10, 17)"; // "transparent";
      // header.paddingBottom = 5;
      // header.paddingRight = 5;
      header.horizontalAlignment = 0;
      header.verticalAlignment = 0;
      advancedTexture.addControl(header);

      const titleBox = new BABYLON.GUI.Rectangle();
      titleBox.left = "-5%";
      titleBox.top = `${70}px`;
      titleBox.width = "90%";
      titleBox.height = `${70}px`;
      titleBox.color = fgColor;
      titleBox.thickness = 2;
      titleBox.background = "transparent";
      titleBox.horizontalAlignment = 1;
      titleBox.verticalAlignment = 0; // 3;

      header.addControl(titleBox);


      var titleText = new BABYLON.GUI.TextBlock();

      titleText.color = fgColor;
      titleText.height = `${100}px`;

      // Style
      const titleStyle = advancedTexture.createStyle();
      titleStyle.fontSize = getFontSize(45);
      titleStyle.fontFamily = 'MrEavesXLModOT-Book';
      // titleStyle.fontStyle = "bold";
      titleText.style = titleStyle;
      titleText.top = `2px`;
      titleText.left = `-43%`;
      titleText.text = `Siena`;
      titleBox.addControl(titleText);



      const headerDoubleBorder = new BABYLON.GUI.Rectangle();
      headerDoubleBorder.left = "-5%";
      headerDoubleBorder.top = `${Math.round((engineHeight * 0.185))}px`;
      headerDoubleBorder.width = "110%";
      headerDoubleBorder.height = "10px";
      headerDoubleBorder.color = fgColor;
      headerDoubleBorder.thickness = 2;
      headerDoubleBorder.background = "transparent";
      headerDoubleBorder.horizontalAlignment = 0;
      headerDoubleBorder.verticalAlignment = 3; // 3;

      header.addControl(headerDoubleBorder);

      const footer = new BABYLON.GUI.Rectangle();
      footer.left = 0;
      footer.top = `${Math.round(engineHeight * 0.82)}px`;
      footer.width = "100%";
      footer.height = engineHeight * 0.40;
      footer.thickness = 0;
      footer.background = bgColor; // "rgb(0, 10, 17)"; // "transparent";
      // rect1.paddingBottom = 5;
      // rect1.paddingRight = 5;
      footer.horizontalAlignment = 0;
      footer.verticalAlignment = 0;
      advancedTexture.addControl(footer);


      const footerDoubleBorder = new BABYLON.GUI.Rectangle();
      footerDoubleBorder.left = "-5%";
      footerDoubleBorder.top = 0;
      footerDoubleBorder.width = "110%";
      footerDoubleBorder.height = "12px";
      footerDoubleBorder.color = fgColor;
      footerDoubleBorder.thickness = 2;
      footerDoubleBorder.background = "transparent";
      footerDoubleBorder.horizontalAlignment = 0;
      footerDoubleBorder.verticalAlignment = 0; // 3;

      footer.addControl(footerDoubleBorder);


      const dropzones = [];
      const completions = [];

      const boxesMarginL = engineWidth * 0.06;
      const boxWidth = engineWidth * 0.18;
      const boxSpacingL = engineWidth * 0.008;

      for (let i = 0; i < 5; i++) {
        const left = boxesMarginL + (i * (boxWidth + boxSpacingL));
        const width = "15%";
        const thickness = 3;

        const dropzone = new BABYLON.GUI.Rectangle();
        dropzone.left = left;
        dropzone.top = 23;
        dropzone.width = width;
        dropzone.height = `51px`;
        dropzone.cornerRadius = 2;
        dropzone.color = fgColor;
        dropzone.thickness = thickness;
        dropzone.background = "transparent";
        // rect1.paddingBottom = 5;
        // rect1.paddingRight = 5;
        dropzone.horizontalAlignment = 0;
        dropzone.verticalAlignment = 0;

        footer.addControl(dropzone);
        dropzones.push(dropzone);



        var category = new BABYLON.GUI.TextBlock();

        category.color = fgColor;
        category.height = `${100}px`;

        // Style
        const categoryStyle = advancedTexture.createStyle();
        categoryStyle.fontSize = getFontSize(31);
        categoryStyle.fontFamily = 'Arial';
        // categoryStyle.fontStyle = "bold";
        category.style = categoryStyle;

        category.top = `2px`;
        category.left = `0px`;
        category.text = `0${i + 1}`;
        dropzone.addControl(category);


        const completion = new BABYLON.GUI.Rectangle();
        completion.left = left;
        completion.top = 86;
        completion.width = width;
        completion.height = `40px`;
        completion.cornerRadius = 2;
        completion.color = fgColor;
        completion.thickness = thickness;
        completion.background = "transparent";
        // rect1.paddingBottom = 5;
        // rect1.paddingRight = 5;
        completion.horizontalAlignment = 0;
        completion.verticalAlignment = 0;

        footer.addControl(completion);
        completions.push(completion);

        var completionRate = new BABYLON.GUI.TextBlock();

        completionRate.color = fgColor;
        completionRate.height = `${Math.round(scale * 100)}px`;

        // Style
        const completionStyle = advancedTexture.createStyle();
        completionStyle.fontSize = getFontSize(32);
        completionStyle.fontFamily = 'MrEavesXLModOT-Book';
        // completionStyle.fontStyle = "bold";
        completionRate.style = completionStyle;
        completionRate.top = `2px`;
        completionRate.left = `-${Math.round(engineWidth * 0.048)}px`;
        completionRate.text = `${0}%`;
        completion.addControl(completionRate);

      }

      const footerSeparator = new BABYLON.GUI.Rectangle();
      footerSeparator.left = "-5%";
      footerSeparator.top = 137;
      footerSeparator.width = "110%";
      footerSeparator.height = "2px";
      // rect1.cornerRadius = 20;
      footerSeparator.color = fgColor;
      footerSeparator.thickness = 6;
      footerSeparator.background = "transparent";
      // rect1.paddingBottom = 5;
      // rect1.paddingRight = 5;
      footerSeparator.horizontalAlignment = 0;
      footerSeparator.verticalAlignment = 0;

      footer.addControl(footerSeparator);


      scene.onPointerObservable.add((pointerInfo) => {
        switch (pointerInfo.type) {
          case BABYLON.PointerEventTypes.POINTERDOWN:
            console.log("POINTER DOWN", pointerInfo.event);
            if (pointerInfo.event.button === 0) {
              isSelecting = true;
              isDragging = false;
            } else if (pointerInfo.event.button === 2) {
              isDragging = true;
              isSelecting = false;
            }
            lastMouseX = scene.pointerX;
            lastMouseY = scene.pointerY;
            break;
          case BABYLON.PointerEventTypes.POINTERUP:
            console.log("POINTER UP");
            isSelecting = false;
            isDragging = false;
            break;
          case BABYLON.PointerEventTypes.POINTERMOVE:
            console.log("POINTER MOVE");
            /*
              var pickingInfo = scene.pick(scene.pointerX, scene.pointerY);
              console.log('pointer:', {
                pointerX: scene.pointerX,
                pointerY: scene.pointerY
              });
            */

            if (isDragging) {
              matrixLeft += (scene.pointerX - lastMouseX) / scale;
              matrixTop += (scene.pointerY - lastMouseY) / scale;
              lastMouseX = scene.pointerX;
              lastMouseY = scene.pointerY;
            }
            break;
          case BABYLON.PointerEventTypes.POINTERWHEEL:
            console.log("POINTER WHEEL");
            break;
          case BABYLON.PointerEventTypes.POINTERPICK:
            console.log("POINTER PICK");
            break;
          case BABYLON.PointerEventTypes.POINTERTAP:
            console.log("POINTER TAP");
            break;
          case BABYLON.PointerEventTypes.POINTERDOUBLETAP:
            console.log("POINTER DOUBLE-TAP");
            break;
        }
      });

      document.querySelector('#renderCanvas').onwheel = (event) => {
        event.preventDefault();

        scale += event.deltaY * -0.0005;

        // Restrict scale
        scale = Math.min(Math.max(2, scale), 6);
      }

      // TODO should implement virtualization to give the feeling of infinite array

      scene.onBeforeRenderObservable.add(() => {
        const ts = new Date().getTime();
        // console.log('pop');
        for (let i = 0; i < matrixSize; i++) {
          const row = [];
          for (let j = 0; j < matrixSize; j++) {
            const digit = matrix[i][j];

            // from time to time, we randomize some of the digit parameters
            // EDIT: disabled, doesn't work like I would like it to be
            // randomDigitMutation(digit, 0.001);

            // some kind of "CRT" like jitter
            // EDIT: disabled
            const highFreqJitterX = 0; // Math.random() * 1;
            const highFreqJitterY = 0; // Math.random() * 1;

            // we want to "unsync" digits
            const timeShiftX = minTimeShift + digit.randomTimeShiftX * maxTimeShift;
            const timeShiftY = minTimeShift + digit.randomTimeShiftY * maxTimeShift;

            // wobble speed
            const wobbleSpeedX = minWobbleSpeed + digit.randomWobbleSpeedX * maxWobbleSpeed;
            const wobbleSpeedY = minWobbleSpeed + digit.randomWobbleSpeedY * maxWobbleSpeed;

            const wobbleAmplitudeX = minWobbleAmplitude + (digit.randomWobbleAmplitudeX - 0.5) * maxWobbleAmplitude;
            const wobbleAmplitudeY = minWobbleAmplitude + (digit.randomWobbleAmplitudeY - 0.5) * maxWobbleAmplitude;

            const lowFreqWobbleX = (wobbleAmplitudeX) * Math.cos((timeShiftX + ts) * wobbleSpeedX);
            const lowFreqWobbleY = (wobbleAmplitudeY) * Math.cos((timeShiftY + ts) * wobbleSpeedY);

            const randomX = highFreqJitterX + lowFreqWobbleX;
            const randomY = highFreqJitterY + lowFreqWobbleY;

            const newTop = scale * (matrixTop + i * matrixSpacing + randomY);
            const newLeft = scale * (matrixLeft + j * matrixSpacing + randomX);

            digit.top = `${Math.round(newTop)}px`;
            digit.left = `${Math.round(newLeft)}px`;

            const screenMouseX = scene.pointerX - engine.getRenderWidth() / 2;
            const screenMouseY = scene.pointerY - engine.getRenderHeight() / 2;

            const dx = screenMouseX - newLeft;
            const dy = screenMouseY - newTop;

            const screenDistance = Math.sqrt(dx * dx + dy * dy);

            // we need to adjust cutoff for the current zoom level
            const cutoff = 40 * scale;

            // compute the adjusted distance (based on zoom)
            let distance = 1 - (Math.max(1, Math.min(cutoff, screenDistance)) / cutoff);

            if (isSelecting && (distance > 0.7)) {
              digit.selected = true;
            }

            // hold selected items
            distance = digit.selected ? 1 : distance;

            // an hover effect based on mouse distance
            const minHover = 62;
            const maxHover = 74;
            const hoverAmount = minHover + distance * maxHover;

            digit.height = `${Math.round(scale * (120))}px`;
            digit.style.fontSize = getFontSize(scale * 0.12 * (hoverAmount));
          }
        }
      });

      BABYLON.Effect.ShadersStore["crtFragmentShader"] = `
    #ifdef GL_ES
        precision highp float;
    #endif

    #define PI 3.1415926538

    // Samplers
    varying vec2 vUV;
    uniform sampler2D textureSampler;

    // Parameters
    uniform vec2 curvature;
    uniform vec2 screenResolution;
    uniform vec2 scanLineOpacity;
    uniform float vignetteOpacity;
    uniform float brightness;
    uniform float vignetteRoundness;


    vec2 curveRemapUV(vec2 uv)
    {
        // as we near the edge of our screen apply greater distortion using a sinusoid.

        uv = uv * 2.0 - 1.0;
		vec2 offset = abs(uv.yx) / vec2(curvature.x, curvature.y);
		uv = uv + uv * offset * offset;
		uv = uv * 0.5 + 0.5;
        return uv;
    }

    vec4 scanLineIntensity(float uv, float resolution, float opacity)
    {
        float intensity = sin(uv * resolution * PI * 2.0);
        intensity = ((0.5 * intensity) + 0.5) * 0.9 + 0.1;
        return vec4(vec3(pow(intensity, opacity)), 1.0);
    }

    vec4 vignetteIntensity(vec2 uv, vec2 resolution, float opacity, float roundness)
    {
        float intensity = uv.x * uv.y * (1.0 - uv.x) * (1.0 - uv.y);
        return vec4(vec3(clamp(pow((resolution.x / roundness) * intensity, opacity), 0.0, 1.0)), 1.0);
    }

    void main(void) 
    {
        vec2 remappedUV = curveRemapUV(vec2(vUV.x, vUV.y));
        vec4 baseColor = texture2D(textureSampler, remappedUV);

        baseColor *= vignetteIntensity(remappedUV, screenResolution, vignetteOpacity, vignetteRoundness);

        baseColor *= scanLineIntensity(remappedUV.x, screenResolution.y, scanLineOpacity.x);
        baseColor *= scanLineIntensity(remappedUV.y, screenResolution.x, scanLineOpacity.y);

        baseColor *= vec4(vec3(brightness), 1.0);

        if (remappedUV.x < 0.0 || remappedUV.y < 0.0 || remappedUV.x > 1.0 || remappedUV.y > 1.0){
            gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
        } else {
            gl_FragColor = baseColor;
        }
    }
    `;

      var postProcess1 = new BABYLON.PostProcess("CRTShaderPostProcess", "crt", ["curvature", "screenResolution", "scanLineOpacity", "vignetteOpacity", "brightness", "vignetteRoundness"], null, 0.25, camera);
      postProcess1.onApply = function (effect) {
        // having a curvature is nice, but this should happen AFTER the pixelation and blur effect
        effect.setFloat2("curvature", 255.0, 255.0);
        effect.setFloat2("screenResolution", config.crt.screenResolution.width, config.crt.screenResolution.height);
        effect.setFloat2("scanLineOpacity", 0.1, 0.1);
        effect.setFloat("vignetteOpacity", 0.2); // was 0.3
        effect.setFloat("brightness", 1);
        effect.setFloat("vignetteRoundness", 20.0);
      };


      // ----------- BLUR EFFECT ----------
      var postProcess2 = new BABYLON.BlurPostProcess("Horizontal blur", new BABYLON.Vector2(0.7, 0), 4.0, 0.5, camera);
      var postProcess3 = new BABYLON.BlurPostProcess("Vertical blur", new BABYLON.Vector2(0, 0.7), 4.0, 0.5, camera);

      BABYLON.Effect.ShadersStore["curveFragmentShader"] = `
    #ifdef GL_ES
        precision highp float;
    #endif

    #define PI 3.1415926538

    // Samplers
    varying vec2 vUV;
    uniform sampler2D textureSampler;

    // Parameters
    uniform vec2 curvature;
    uniform vec2 screenResolution;
    uniform vec2 scanLineOpacity;
    uniform float vignetteOpacity;
    uniform float brightness;
    uniform float vignetteRoundness;


    vec2 curveRemapUV(vec2 uv)
    {
        // as we near the edge of our screen apply greater distortion using a sinusoid.

        uv = uv * 2.0 - 1.0;
		vec2 offset = abs(uv.yx) / vec2(curvature.x, curvature.y);
		uv = uv + uv * offset * offset;
		uv = uv * 0.5 + 0.5;
        return uv;
    }

    vec4 scanLineIntensity(float uv, float resolution, float opacity)
    {
        float intensity = sin(uv * resolution * PI * 2.0);
        intensity = ((0.5 * intensity) + 0.5) * 0.9 + 0.1;
        return vec4(vec3(pow(intensity, opacity)), 1.0);
    }

    vec4 vignetteIntensity(vec2 uv, vec2 resolution, float opacity, float roundness)
    {
        float intensity = uv.x * uv.y * (1.0 - uv.x) * (1.0 - uv.y);
        return vec4(vec3(clamp(pow((resolution.x / roundness) * intensity, opacity), 0.0, 1.0)), 1.0);
    }

    void main(void) 
    {
        vec2 remappedUV = curveRemapUV(vec2(vUV.x, vUV.y));
        vec4 baseColor = texture2D(textureSampler, remappedUV);

        baseColor *= vignetteIntensity(remappedUV, screenResolution, vignetteOpacity, vignetteRoundness);

        baseColor *= scanLineIntensity(remappedUV.x, screenResolution.y, scanLineOpacity.x);
        baseColor *= scanLineIntensity(remappedUV.y, screenResolution.x, scanLineOpacity.y);

        baseColor *= vec4(vec3(brightness), 1.0);

        if (remappedUV.x < 0.0 || remappedUV.y < 0.0 || remappedUV.x > 1.0 || remappedUV.y > 1.0){
            gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
        } else {
            gl_FragColor = baseColor;
        }
    }
    `;

      var postProcess4 = new BABYLON.PostProcess("CurveShaderPostProcess", "curve", ["curvature", "screenResolution", "scanLineOpacity", "vignetteOpacity", "brightness", "vignetteRoundness"], null, 0.25, camera);
      postProcess4.onApply = function (effect) {
        // having a curvature is nice, but this should happen AFTER the pixelation and blur effect
        effect.setFloat2("curvature", 255.0, 255.0);
        effect.setFloat2("screenResolution", config.crt.screenResolution.width, config.crt.screenResolution.height);
        effect.setFloat2("scanLineOpacity", 0.2, 0.2);
        effect.setFloat("vignetteOpacity", 0.3); // was 0.3
        effect.setFloat("brightness", 8);
        effect.setFloat("vignetteRoundness", 20.0);
      };


      var postProcess5 = new BABYLON.BlurPostProcess("Horizontal blur", new BABYLON.Vector2(1.0, 0), 2.0, 0.86, camera);
      var postProcess6 = new BABYLON.BlurPostProcess("Vertical blur", new BABYLON.Vector2(0, 1.0), 2.0, 0.86, camera);

      // var postProcess6 = new BABYLON.BlurPostProcess("Horizontal blur", new BABYLON.Vector2(1.0, 0), 2.0, 0.85, camera);
      // var postProcess7 = new BABYLON.BlurPostProcess("Vertical blur", new BABYLON.Vector2(0, 1.0), 2.0, 0.85, camera);


      return scene;
    };
    window.initFunction = async function () {
      var asyncEngineCreation = async function () {
        try {
          return createDefaultEngine();
        } catch (e) {
          console.log("the available createEngine function failed. Creating the default engine instead");
          return createDefaultEngine();
        }
      };

      window.engine = await asyncEngineCreation();
      if (!engine) throw "engine should not be null.";
      startRenderLoop(engine, canvas);
      window.scene = createScene();
    };
    initFunction().then(() => {
      sceneToRender = scene;
    });

    // Resize
    window.addEventListener("resize", function () {
      engine.resize();
    });
  </script>
</body>

</html>