title: Stenciling using OpenGl ES 2.0
body: <p>I am trying to figure out a way to cut out a certain region of a background texture such that a certain custom pattern is not rendered on the screen for that background. For example:
  <img src="https://i.stack.imgur.com/C8bEZ.png" alt="enter image description here"> </p>
  
  <p>This square can be any pattern.
  I am using Frame Buffer Object and Stencil Buffer to achieve this kind of effect. Here is the code:</p>
  
  <pre><code>fbo.begin();
  //Disables ColorMask and DepthMask so that all the rendering is done on the Stencil Buffer
  Gdx.gl20.glColorMask(false, false, false, false);
  Gdx.gl20.glDepthMask(false);
  Gdx.gl20.glEnable(GL20.GL_STENCIL_TEST);
  Gdx.gl20.glStencilFunc(GL20.GL_ALWAYS, 1, 0xFFFFFFFF);
  Gdx.gl20.glStencilOp(GL20.GL_REPLACE, GL20.GL_REPLACE, GL20.GL_REPLACE);
  
  stage.getSpriteBatch().begin();
  rHeart.draw(stage.getSpriteBatch(), 1); //Draws the required pattern on the stencil buffer
  
  //Enables the ColorMask and DepthMask to resume normal rendering
  Gdx.gl20.glColorMask(true, true, true, true);
  Gdx.gl20.glDepthMask(true);
  
  Gdx.gl20.glStencilFunc(GL20.GL_EQUAL, 1, 0xFFFFFFFF);
  Gdx.gl20.glStencilOp(GL20.GL_KEEP, GL20.GL_KEEP, GL20.GL_KEEP);
  
  background.draw(stage.getSpriteBatch(), 1); //Draws the background such that the background is not rendered on the required pattern, leaving that area black.
  
  stage.getSpriteBatch().end();
  Gdx.gl20.glDisable(GL20.GL_STENCIL_TEST);
  fbo.end();
  </code></pre>
  
  <p>However this is not working at all. How am I supposed to do this using Stencil Buffers? I am also facing some difficulty understanding glStencilFunc and glStencilOp. It would be very helpful if anyone can shed some light on these two.</p>
  
  <p><strong>UPDATE:</strong> I have also tried producing something of the same kind using glColorMask. Here is the code:</p>
  
  <pre><code>Gdx.gl20.glClearColor(0, 0, 0, 0);
  stage.draw();
  FrameBuffer.clearAllFrameBuffers(Gdx.app);
  fbo1.begin();
  Gdx.gl20.glClearColor(0, 0, 0, 0);
  batch.begin();
  rubber.draw(batch, 1);
  Gdx.gl20.glColorMask(false, false, false, true);
  coverHeart.draw(batch, 1);
  Gdx.gl20.glColorMask(true, true, true, false);
  batch.end();        
  fbo1.end();
  
  toDrawHeart = new Image(new TextureRegion(fbo1.getColorBufferTexture()));
  batch.begin();
  toDrawHeart.draw(batch, 1);
  batch.end();
  </code></pre>
  
  <p>This code is producing this:
  <img src="https://i.stack.imgur.com/cymOX.png" alt="enter image description here">
  Instead of something like this: (Ignore the windows sizes and colour tones)
  <img src="https://i.stack.imgur.com/C8bEZ.png" alt="enter image description here"> </p>
  
  <p>Note: I am using the libgdx library.</p>