examples/slow-fade.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Slow Fade</title>
</head>
<body>
  <h1>Slow Fade</h1>
  <div>
    <canvas id="c"></canvas>
  </div>
</body>
<script src="../dist/gpu-browser.min.js"></script>
<script>
  const canvas = document.getElementById('c');
  const gpu = new GPU({
    canvas: canvas,
    mode: 'gpu'
  });
  const dim = 512;
  const kernel = gpu.createKernel(
    function(x) {
      this.color(
        (x * (this.thread.y + this.thread.x)) / 1024,
        (x * (this.thread.y * this.thread.x)) / (1024 * 1024),
        (x * (this.thread.y * 2 * this.thread.x)) / (1024 * 2),
        1
      );
    },
    {
      useLegacyEncoder: true,
      output: [dim, dim],
      graphical: true
    }
  );

  let param = 0;
  const doDraw = () => {
    kernel(param);
    param += 0.001;
    window.requestAnimationFrame(doDraw);
  };

  window.requestAnimationFrame(doDraw);
</script>
</html>