优化webgl（绘制）调用开销

Question

我正在尝试使用模板缓冲区来渲染带有WebGL的3d模型的横截面。我也在使用一个库 - three.js，它给了我一个场景图和各种其他抽象。

Three.js公开了一个回调，在之前称为，在 gl.drawElements之后用进行模板调用。如果我让渲染顺序由三个管理，我最终会遇到这种情况：

这看起来很多余：

gl.disable(STENCIL_TEST) //disable followed immediately by enable
gl.enable(STENCIL_TEST)

gl.stencilFunc(...) //same call for multiple draw calls
gl.stencilOp(...)

看起来需要一些杂技才能用three.js批量处理这些杂技，我想知道它是否值得。我一直在阅读WebGL（绘制？）调用的开销，但我并不了解它们的重量。很明显当一组几何体被合并并用一次调用绘制时会发生什么，但我不明白其他调用会发生什么。

我甚至不完全确定如何测试它，是否足以在这些绘制调用之间多次打开/关闭模板，直到帧丢失为止？

我想在发出多个绘制调用之前只启用模板一次，并在最后一次调用后禁用它。我想更改那组绘制调用中的stencilOp和stencilFunc，但我不确定从中可以获得多少。

我不是在问这个怎么用three.js

有三种相对简单的方法可以做到这一点。需要批处理的几何图形可以放在它们自己的场景中，并且可以在渲染之前和之后设置模板状态。另一个是手动排序所有内容并仅在第一个之前进行模板调用。

我的问题是，由于任何原因，这个命令队列是否以及为什么看起来不同？

对gl.enable(STENCIL_TEST)和gl.stencilOp()进行5次和255次调用之间有什么区别，是否可以忽略。

修改

我减少了调用次数，并在渲染不透明对象时达到了预期的效果。但是，透明度现在变得更加复杂。我试图理解Sceenshot #2中4k和5k“呼叫”之间的区别是什么。这是我应该关注的事情，还是有选择地关注的事情。