To avoid getting sidetracked, let me provide some context. I am looking to display numerous waveforms stacked on top of each other using the same time axis in THREE.js. These waveforms are essentially THREE.Line objects and I am working on implementing zoom, pan, and scaling functionalities by adjusting the view bounds of an Orthographic camera.
My initial approach involved creating multiple canvas elements with fixed heights stacked vertically and attaching a THREE.WebGLRenderer to each one. Everything was working smoothly until I attempted to scale beyond 15 waveforms. At that point, THREE.js issued a warning about "too many active WebGL contexts" and began deleting old contexts.
I believe this method is valid since it mirrors the technique demonstrated here:
In the provided example, four WebGLRenderers are generated, each associated with a separate canvas element.
Is there a way to bypass this warning and create an unlimited number of canvas elements, each with its own renderer?
SIDE NOTE:
I have contemplated utilizing a single scene and positioning the waveforms accordingly within it, along with employing multiple cameras following a similar approach as shown here: .
However, this presents two challenges:
(1) It eliminates the convenience of easily applying key and mouse listeners specific to each waveform through DOM manipulation.
(2) This solution also seems to hit a barrier in terms of scalability. Once the height of the renderer surpasses around 6000px, strange rendering issues occur such as parts of the scene not displaying correctly while others appear stretched.
Any assistance provided would be greatly appreciated!