pixijs motion blur

by magneto903

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>PIXI js motion blur filter </title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
	<script src="https://filters.pixijs.download/v3.1.1/pixi-filters.js"></script>
  <!-- use CDN Luke! -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/viewport.min.js"></script>

  <script
	  	src="https://code.jquery.com/jquery-3.4.1.min.js"
	  	integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
	  	crossorigin="anonymous">
  </script>
</head>
<body>

</body>
</html>

JavaScript

wvar Stats = function() {

  var mode = 0;

  var container = document.createElement('div');
  container.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000';
  container.addEventListener('click', function(event) {

    event.preventDefault();
    showPanel(++mode % container.children.length);

  }, false);

  //

  function addPanel(panel) {

    container.appendChild(panel.dom);
    return panel;

  }

  function showPanel(id) {

    for (var i = 0; i < container.children.length; i++) {

      container.children[i].style.display = i === id ? 'block' : 'none';

    }

    mode = id;

  }

  //

  var beginTime = (performance || Date).now(),
    prevTime = beginTime,
    frames = 0;

  var fpsPanel = addPanel(new Stats.Panel('FPS', '#0ff', '#002'));
  var msPanel = addPanel(new Stats.Panel('MS', '#0f0', '#020'));

  if (self.performance && self.performance.memory) {

    var memPanel = addPanel(new Stats.Panel('MB', '#f08', '#201'));

  }

  showPanel(0);

  return {

    REVISION: 16,

    dom: container,

    addPanel: addPanel,
    showPanel: showPanel,

    begin: function() {

      beginTime = (performance || Date).now();

    },

    end: function() {

      frames++;

      var time = (performance || Date).now();

      msPanel.update(time - beginTime, 200);

      if (time >= prevTime + 1000) {

        fpsPanel.update((frames * 1000) / (time - prevTime), 100);

        prevTime = time;
        frames = 0;

        if (memPanel) {

          var memory = performance.memory;
          memPanel.update(memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576);

        }

      }

      return time;

    },

    update: function() {

      beginTime = this.end();

    },

    // Backwards Compatibility

    domElement: container,
    setMode: showPanel

  };

};

Stats.Panel = function(name, fg, bg) {

  var min = Infinity,
    max = 0,
    round = Math.round;
  var PR = round(window.devicePixelRatio || 1);

  var...