Can I use a WebGLRenderer to render lines, meshes and other graphic stuff while at the same time using a CSS3DRenderer to render text as in the periodic table example? It looks like you have to add a renderer’s DOM element as a child to a div in your HTML, so I’m guessing renderers don’t play well together?
Yes, you can use multiple renderers, but in my experience it doesn’t make sense.
You can even use multiple renderers with workers, which I’ve already tested! I wasn’t happy with it, why?
Although each renderer then ran in a different CPU core and delivered its results to the main thread, all renderers accessed the one GPU that I have. But if one renderer is already making good use of the GPU, then additional renderers in other CPU cores (multithreading) don’t make sense.
If the GPU still has a lot of leeway, then you have enough potential with one renderer and its better to work on your render management.
So I can add the DOM element for each renderer to the same div in my HTML and they’ll all use the same coordinate system, camera, etc?
No, every renderer is a world of its own.
I don’t know everything about it either and maybe someone else can contribute their experiences here.
I tested up to 8 renderers (8 CPU cores). My main renderer in the main thread and 7 auxiliary renderers in workers that sent their results back to the main thread. But as mentioned, it wasn’t better because all renderers use the same GPU.
You can definitely use several renderers, but since they don’t coordinate with each other, you have to make sure that they don’t fully use the GPU at the same time. If two renderers only use 30% of the GPU each then it will work fine.
There’s a hard limit on how many WebGL contexts may be active on a page, and each THREE.WebGLRenderer adds one WebGL context. I think the limit depends on device but is often around 16. Each also duplicates texture and geometry in GPU memory, so if you’re drawing the same objects then it’s better to use one renderer if possible so the data isn’t duplicated.
A common way to work around this is to use a single renderer with a transparent canvas and draw into different scissor test regions, see:
2 Likes
Add performance ang gpu calculations
1 Like
I think OP was specifically interested in using a WebGL renderer + a CSS3D renderer. That’s absolutely fine, people usually avoid multiple WebGL renderers. But the CSS renderer is independent from WebGL.
However CSS animation on top of a WebGL canvas can sometimes be a bit slow, depending on what you’re rendering, so you might get better results rendering your text inside of your WebGL scene with something like troika-three-text
1 Like
Can scissor test work in conjunction with postprocessing? And if so can scissor sections be irregular? Eg… Not 90 degree rectangles?
Can scissor test work in conjunction with postprocessing?
In theory, yes. I haven’t tested this, and it’s possible one or both of the post-processing implementations might have issues to work out though.
And if so can scissor sections be irregular?
The WebGL scissor region is always a box. You might combine that with the stencil buffer for more complex shapes.
3 Likes