WebGL 中的模板缓冲区

Question

我如何为我最简单的程序使用模板缓冲区？我已经阅读了许多关于它的不同主题，但我没有找到关于它的详细指南。我想在创建的四面体的每一侧切出孔。

请向我逐步解释使用模板缓冲区？

我的程序的链接

Answer 1

要使用模板缓冲区，您必须在创建 webgl 上下文时首先请求它

const gl = someCanvasElement.getContext('webgl', {stencil: true});

然后你打开模板测试

  gl.enable(gl.STENCIL_TEST);

设置测试使其始终通过并将参考值设置为 1

  gl.stencilFunc(
     gl.ALWAYS,    // the test
     1,            // reference value
     0xFF,         // mask
  );

并设置操作，以便当模板和深度测试都通过时我们将模板设置为参考值

  gl.stencilOp(
     gl.KEEP,     // what to do if the stencil test fails
     gl.KEEP,     // what to do if the depth test fails
     gl.REPLACE,  // what to do if both tests pass
  );

然后我们绘制第一个内三角形

... lots of setup for a single triangle ...

gl.drawArrays(...) or gl.drawElements(...)

然后我们更改测试，使其仅在模板为零时通过

  gl.stencilFunc(
     gl.EQUAL,     // the test
     0,            // reference value
     0xFF,         // mask
  );
  gl.stencilOp(
     gl.KEEP,     // what to do if the stencil test fails
     gl.KEEP,     // what to do if the depth test fails
     gl.KEEP,     // what to do if both tests pass
  );

现在我们可以绘制其他东西（更大的三角形），它只会在模板缓冲区中有 0 的地方绘制，除了绘制第一个三角形的地方外，它无处不在。

例子：

const gl = someCanvasElement.getContext('webgl', {stencil: true});

  gl.enable(gl.STENCIL_TEST);

  gl.stencilFunc(
     gl.ALWAYS,    // the test
     1,            // reference value
     0xFF,         // mask
  );