渲染新的ThreeJS场景时参考现有的WebGL深度缓冲区

Question

我有一个现有的WebGL canvas，它不使用ThreeJS进行渲染，并且从两个方面来看，对我来说都是一个黑匣子：（1）我可以访问基础的webgl canvas DOM元素，并且可以在屏幕上定位并调整其大小，以及（2）我知道该场景的摄像机的属性，并获取该摄像机在每个渲染周期的更新。

我需要解决的问题可以简化为以下内容：我需要拥有自己的单独ThreeThree画布，既显示黑匣子画布数据，又显示我绘制的元素，例如一个简单示例的多维数据集。我已经可以轻松地覆盖两个画布，在画布上为除多维数据集之外的所有内容设置透明度，然后将它们与黑盒库中的相机事件对齐。效果很好。

问题是当我绘制对象（如立方体）时，它们不尊重黑盒画布的深度缓冲区。因此，我可能有一个与后退场景和场景移动正确对齐的多维数据集，但是当黑匣子画布中的某个东西比该多维数据集更靠近相机时，它没有被正确遮盖。我的想法是，我需要通过以下两种方式之一解决此问题：（1）我可以使用autoClear = false和preserveDrawingBuffer = true将渲染器写入另一张画布，或者（2）我可以某种方式复制从黑匣子画布到我的画布的深度缓冲区，然后设置渲染器，使其尊重新的深度缓冲区。

我还没有成功使用任何一种方法，所以我想知道这是否可行，是否可以解决上述问题？

-编辑-

有关上述尝试的角度/打字稿实施，请参见https://jsfiddle.net/zdxyoajb/。在下面的动画循环中，如果我注释掉overlayRenderer线，则下面的球体将是红色的并且偏离中心（应该是中心），但是如果我不注释线，则会得到下面的图像。我也收到以下错误： WebGL: INVALID_OPERATION: uniformMatrix4fv: location is not from current program

animate() {
  requestAnimationFrame(() => this.animate());
  this.blackBoxCamera.copy(this.overlayCamera);
  this.blackBoxRenderer.render(this.blackBoxScene, this.blackBoxCamera);
  this.overlayRenderer.state.reset();
  this.overlayRenderer.render(this.overlayScene, this.overlayCamera);
}