javascript - 单个 Canvas 上的多个 WebGLRenderer

Question

我正在尝试在同一个 Canvas 上制作多个 WebGLRenderer 渲染，它适用于第一帧，但如果它在动画循环中工作 - 它无法正确渲染。我想知道这种方法是否有一些限制？

如果 requestAnimationFrame 在更新函数中被调用，我无法正常工作的示例代码。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, WIDTH / HEIGHT, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
// + scene filler

const scene2 = new THREE.Scene();
const camera2 = new THREE.OrthographicCamera(-WIDTH / 2, WIDTH / 2, HEIGHT / 2, -HEIGHT / 2, 0, 30);
const renderer2 = new THREE.WebGLRenderer({ canvas: renderer.domElement });
renderer2.autoClear = false;
// + scene2 filler

function update() {
  renderer.render(scene, camera);
  renderer2.render(scene2, camera2);
  requestAnimationFrame(update);
}

https://codesandbox.io/s/l75w6qyw2m?module=%2Fsrc%2Findex.js

虽然我不确定会发生什么，但我真的很想让它工作，我需要一个单独的渲染器来渲染带有不同相机的多个场景，我正在寻找机会在单独的渲染器中做到这一点为我的插件提供更好的公共(public)接口(interface)。

Answer 1

在一个 Canvas 中不可能有 2 个 WebGLRenderer。原因是每个 Canvas 都有一个 WebGLContext 作为 native 限制，它不能创建第二个上下文。

但是，您似乎只是在尝试渲染两个场景，一个在另一个之上。你可以用一个渲染器来做到这一点。您只需要关闭它的自动清除属性，然后使用它来渲染两个场景，一个在另一个之上，如下所示:

renderer.autoClear = false;

function update() {
  renderer.render(scene, camera);
  renderer.render(hudScene, hudCamera);
  requestAnimationFrame(update);
}