'why is the face drawn throught stencil buffer is rendered on top?

code: https://jsfiddle.net/yuqingzhijie/9wt7syn5/11/ https://jsfiddle.net/yuqingzhijie/9wt7syn5/42/

I'm implementing section drawing, but I don't know how to solve this problem

My drawing process

1、record stencil

  gl.enable(gl.STENCIL_TEST);
  gl.stencilMask(0xffff);
  gl.stencilFunc(gl.ALWAYS, 1, 0xffff);
  gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR_WRAP);
  gl.depthMask(false);
  gl.colorMask(false, false, false, false);
  // draw retangle...

2、draw section view

  gl.depthMask(true);
  gl.stencilFunc(gl.EQUAL, 1, 1);
  gl.colorMask(true, true, true, true);
  // draw retangle...

3、draw and discard retangle itself

  // draw retangle...
  // frame shader discard


  [1]: https://ibb.co/WHm6YRV


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source