function Scene(renderer) {
      _classCallCheck(this, Scene);

      this.type = "Scene";

      if (!renderer || renderer.type !== "Renderer") {
        throwError(this.type + ": Renderer not passed as first argument", renderer);
      } else if (!renderer.gl) {
        throwError(this.type + ": Renderer WebGL context is undefined", renderer); // return if no gl context

        return;
      }

      this.renderer = renderer;
      this.gl = renderer.gl;
      this.initStacks();
    }
Here we create our Scene object
   The Scene will stack all the objects that will be drawn (planes and shader passes) in different arrays, and call them in the right order to be drawn.
     Based on the concept exposed here https://webgl2fundamentals.org/webgl/lessons/webgl-drawing-multiple-things.html
   The idea is to optimize the order of the rendered object so that the WebGL calls are kept to a strict minimum
     Here's the whole draw process order:
   - first we draw the ping pong planes
   - if needed, we bind the first scene pass frame buffer
   - draw all the planes that are rendered onto a render target (render pass)
   - draw the planes from the first render target created, ordered by their renderOrder then indexes (first added first drawn) order
   - draw the planes from the second render target created, etc.
   - draw the render passes content (depth buffer is cleared after each pass)
   - draw the transparent planes ordered by renderOrder, Z positions, geometry IDs and then indexes (first added first drawn)
   - draw the opaque planes ordered by renderOrder, geometry IDs and then indexes (first added first drawn)
   - draw the scene passes content
     params:
   @renderer (Renderer class object): our renderer class object
     returns :
   @this: our Scene
*