I am attempting to have multiple WebGLRenderer instances render on the same canvas. It seems to work initially for the first frame, but when it comes to animating, things start to break down. I'm curious if there are any limitations with this approach?
Below is the sample code that is causing issues when using requestAnimationFrame inside the update function.
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, WIDTH / HEIGHT, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
// + scene content
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 content
function update() {
renderer.render(scene, camera);
renderer2.render(scene2, camera2);
requestAnimationFrame(update);
}
https://codesandbox.io/s/l75w6qyw2m?module=%2Fsrc%2Findex.js
I'm uncertain about what outcomes to expect, but I am determined to get this working. I need separate renderers for rendering multiple scenes with different cameras, and I aim to achieve a more user-friendly interface for my plugin.