Home > database >  Three.js: How is using two or more renderers affect the performance? (WebGLRenderer and CSS2DRendere
Three.js: How is using two or more renderers affect the performance? (WebGLRenderer and CSS2DRendere

Time:07-02

Currently, I'm using WebGLRenderer to render the scene. I also need to display some HTML elements on the scene. For that, I wrap HTML elements in CSS2DObjects and render them with CSS2DRenderer.

Question: how does adding CSS2DRenderer affect the performance? Is there any practical way to measure performance using just WebGLRenderer and using both WebGL and CSS2DRenderer?

Thanks!

CodePudding user response:

how does adding CSS2DRenderer affect the performance?

I'm afraid it's not possible to answer this question since the performance impact depends on the number of DOM elements in your scene. For a common usage (rendering a few labels), the performance impact should not be noticeable.

In general, CSS renderers do not work with WebGL nor a canvas element so there is no side effect regarding WebGLRenderer's tasks. If you want exact numbers, you have to make a detailed performance analysis with the dev tools of your browser and compare the frame times with and without a CSS renderer.

  • Related