<canvas class="view"></canvas>

<script id="backgroundFragment" type="x-shader/x-fragment">
    // Adapted from: https://www.shadertoy.com/view/MdlGRr

    // It is required to set the float precision for fragment shaders in OpenGL ES
    // More info here: https://stackoverflow.com/a/28540641/4908989
    #ifdef GL_ES
    precision mediump float;
    #endif

    // This function returns 1 if `coord` correspond to a grid line, 0 otherwise
    float isGridLine (vec2 coord) {
      vec2 pixelsPerGrid = vec2(50.0, 50.0);
      vec2 gridCoords = fract(coord / pixelsPerGrid);
      vec2 gridPixelCoords = gridCoords * pixelsPerGrid;
      vec2 gridLine = step(gridPixelCoords, vec2(1.0));
      float isGridLine = max(gridLine.x, gridLine.y);
      return isGridLine;
    }

    // Main function
    void main () {
      // Coordinates for the current pixel
      vec2 coord = gl_FragCoord.xy;
      // Set `color` to black
      vec3 color = vec3(0.0);
      // If it is a grid line, change blue channel to 0.3
      color.b = isGridLine(coord) * 0.3;
      // Assing the final rgba color to `gl_FragColor`
      gl_FragColor = vec4(color, 1.0);
    }
  </script>

body {
  margin: 0;
  overflow: hidden;
  background-color: black;
}

(function() {

  // Get canvas view
  const view = document.querySelector('.view')
  // Loaded resources will be here
  const resources = PIXI.Loader.shared.resources
  let width, height, app, background

  // Set dimensions
  function initDimensions () {
    width = window.innerWidth
    height = window.innerHeight
  }

  // Init the PixiJS Application
  function initApp () {
    // Create a PixiJS Application, using the view (canvas) provided
    app = new PIXI.Application({ view })
    // Resizes renderer view in CSS pixels to allow for resolutions other than 1
    app.renderer.autoDensity = true
    // Resize the view to match viewport dimensions
    app.renderer.resize(width, height)
  }

  // Init the gridded background
  function initBackground () {
    // Create a new empty Sprite and define its size
    background = new PIXI.Sprite()
    background.width = width
    background.height = height
    // Get the code for the fragment shader
    const backgroundFragmentShader = document.getElementById('backgroundFragment').textContent
    // Create a new Filter using the fragment shader
    // We don't need a custom vertex shader, so we set it as `undefined`
    const backgroundFilter = new PIXI.Filter(undefined, backgroundFragmentShader)
    // Assign the filter to the background Sprite
    background.filters = [backgroundFilter]
    // Add the background to the stage
    app.stage.addChild(background)
  }

  // Init everything
  function init () {
    initDimensions()
    initApp()
    initBackground()
  }

  // Init the app
  init()

})()