react-three-renderer-example icon indicating copy to clipboard operation
react-three-renderer-example copied to clipboard

React slower than Direct update?

Open jflayhart opened this issue 8 years ago • 4 comments
trafficstars

Guess I am confused and maybe misinformed, but how is http://toxicfork.github.io/react-three-renderer-example/#/benchmarks_rotating_cubes_react slower (considerably less FPS running at 3000 cubes) than the direct update example? I am assuming "direct update" means manipulating the DOM directly instead of leveraging React's virtual DOM (which I figured would be more performant)?

jflayhart avatar Dec 19 '16 16:12 jflayhart

Well, it's probably more like I am confused, but what is direct update doing exactly? Just the difference between directly extending the cube component vs running the ExampleBase component? Because it seems both examples are using React, so my initial assumption of what "direct" meant seems to be wrong.

jflayhart avatar Dec 19 '16 16:12 jflayhart

From the direct update js, its updateGraphic function is different. It updates the DOM directly.

eexe1 avatar Apr 10 '17 13:04 eexe1

I had sent an email response but it seems github had missed it... Direct updates version uses react only to build the scene for the initial render, but for the updates it modifies the objects without going through React, which will be faster without doubt. Once react becomes even more performant we will see the gap decrease, but there may always be some sort of overhead for cases like these.

toxicFork avatar Apr 10 '17 14:04 toxicFork

And instead of the dom it's threejs objects :)

toxicFork avatar Apr 10 '17 14:04 toxicFork