function ShaderPass(renderer) {
      var _this34;

      var _ref13 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
          widthSegments = _ref13.widthSegments,
          heightSegments = _ref13.heightSegments,
          renderOrder = _ref13.renderOrder,
          depthTest = _ref13.depthTest,
          cullFace = _ref13.cullFace,
          uniforms = _ref13.uniforms,
          vertexShaderID = _ref13.vertexShaderID,
          fragmentShaderID = _ref13.fragmentShaderID,
          vertexShader = _ref13.vertexShader,
          fragmentShader = _ref13.fragmentShader,
          texturesOptions = _ref13.texturesOptions,
          crossOrigin = _ref13.crossOrigin,
          _ref13$depth = _ref13.depth,
          depth = _ref13$depth === void 0 ? false : _ref13$depth,
          _ref13$clear = _ref13.clear,
          clear = _ref13$clear === void 0 ? true : _ref13$clear,
          renderTarget = _ref13.renderTarget;

      _classCallCheck(this, ShaderPass);

      // force plane defintion to 1x1
      widthSegments = 1;
      heightSegments = 1; // always cull back face

      cullFace = "back"; // use the renderer container as our HTML element to create a DOMMesh object

      _this34 = _super4.call(this, renderer, renderer.container, "ShaderPass", {
        widthSegments: widthSegments,
        heightSegments: heightSegments,
        renderOrder: renderOrder,
        depthTest: depthTest,
        cullFace: cullFace,
        uniforms: uniforms,
        vertexShaderID: vertexShaderID,
        fragmentShaderID: fragmentShaderID,
        vertexShader: vertexShader,
        fragmentShader: fragmentShader,
        texturesOptions: texturesOptions,
        crossOrigin: crossOrigin
      }); // return if no gl context

      if (!_this34.gl) {
        return _possibleConstructorReturn(_this34);
      } // default to scene pass


      _this34._isScenePass = true;
      _this34.index = _this34.renderer.shaderPasses.length;
      _this34._depth = depth;
      _this34._shouldClear = clear;
      _this34.target = renderTarget;

      if (_this34.target) {
        // if there's a target defined it's not a scene pass
        _this34._isScenePass = false; // inherit clear param

        _this34._shouldClear = _this34.target._shouldClear;
      } // if the program is valid, go on


      if (_this34._program.compiled) {
        _this34._initShaderPass(); // add shader pass to our renderer shaderPasses array


        _this34.renderer.shaderPasses.push(_assertThisInitialized(_this34)); // wait one tick before adding our shader pass to the scene to avoid flickering black screen for one frame


        _this34.renderer.nextRender.add(function () {
          _this34.renderer.scene.addShaderPass(_assertThisInitialized(_this34));
        });
      }

      return _this34;
    }
Here we create our ShaderPass object
   We will extend our DOMMesh class that handles all the WebGL part and basic HTML sizings
   ShaderPass class will add the frame buffer by creating a new RenderTarget class object
     params :
   @renderer (Curtains renderer or Renderer class object): our curtains object OR our curtains renderer object
     @Meshparams (object): see Mesh class object
     @depth (boolean, optionnal): whether the shader pass render target should use a depth buffer (see RenderTarget class object). Default to false.
   @clear (boolean, optional): whether the shader pass render target content should be cleared before being drawn (see RenderTarget class object). Default to true.
   @renderTarget (RenderTarget class object, optional): an already existing render target to use. Default to null.
     returns :
   @this: our ShaderPass element
*